/* ==========================================================================
   ARCHON — motion & signature layouts
   Default (no JS / reduced motion) state is always the final, readable state.
   ========================================================================== */

/* ---------- Cross-page transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 280ms var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in 520ms var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ---------- Intro curtain (first visit per session) ---------- */
.intro { display: none; }
.has-intro .intro { display: grid; position: fixed; inset: 0; z-index: 300; place-items: center; pointer-events: none; }
.intro__panel { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--forest); }
.intro__panel--a { top: 0; animation: intro-up 900ms 1500ms cubic-bezier(.76,0,.24,1) forwards; }
.intro__panel--b { bottom: 0; animation: intro-down 900ms 1500ms cubic-bezier(.76,0,.24,1) forwards; }
@keyframes intro-up { to { transform: translateY(-100%); } }
@keyframes intro-down { to { transform: translateY(100%); } }
.intro__center { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1rem; color: var(--on-forest); animation: intro-fade 400ms 1350ms ease forwards; }
@keyframes intro-fade { to { opacity: 0; transform: scale(.96); } }
.intro__mark { width: 64px; height: 64px; fill: none; stroke-width: 4; stroke-linecap: round; }
.intro__mark circle { stroke: var(--leaf); stroke-dasharray: 95; stroke-dashoffset: 95; animation: draw 900ms 100ms var(--ease) forwards; }
.intro__mark path { stroke: var(--saffron); stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 700ms 450ms var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.intro__word { display: flex; overflow: hidden; font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 3vw, 4.4rem); letter-spacing: .12em; line-height: 1.1; }
.intro__word span { display: inline-block; transform: translateY(110%); animation: rise 700ms var(--ease) forwards; }
.intro__word span:nth-child(1) { animation-delay: 300ms; } .intro__word span:nth-child(2) { animation-delay: 360ms; }
.intro__word span:nth-child(3) { animation-delay: 420ms; } .intro__word span:nth-child(4) { animation-delay: 480ms; }
.intro__word span:nth-child(5) { animation-delay: 540ms; color: var(--saffron); } .intro__word span:nth-child(6) { animation-delay: 600ms; }
@keyframes rise { to { transform: none; } }
.intro__tag { font-size: .8125rem; letter-spacing: .3em; text-transform: uppercase; color: var(--on-forest-2); opacity: 0; animation: fadein 600ms 800ms ease forwards; }
@keyframes fadein { to { opacity: 1; } }
.intro-done .intro { display: none; }

/* ---------- Scroll progress & header behaviour ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; background: linear-gradient(90deg, var(--leaf), var(--saffron)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.header { transition: transform 420ms var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.header.is-hidden { transform: translateY(-110%); }
.header:focus-within { transform: none; }

/* ---------- Custom cursor (fine pointers only) ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .motion-ok .cursor { display: grid; place-items: center; position: fixed; left: 0; top: 0; z-index: 250; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1px solid rgba(173, 74, 24, .55); pointer-events: none; opacity: 0; transition: width 320ms var(--ease), height 320ms var(--ease), margin 320ms var(--ease), background 320ms var(--ease), border-color 320ms var(--ease), opacity 200ms; mix-blend-mode: normal; }
  .motion-ok .cursor.is-active { opacity: 1; }
  .motion-ok .cursor.is-link { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(229, 121, 61, .12); border-color: transparent; }
  .motion-ok .cursor.is-label { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--forest); border-color: var(--forest); }
  .cursor__label { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; color: var(--on-forest); opacity: 0; transform: scale(.6); transition: all 260ms var(--ease); }
  .cursor.is-label .cursor__label { opacity: 1; transform: none; }
}

/* ---------- Split text ---------- */
.split-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split-word > span { display: inline-block; will-change: transform; }

/* ---------- Buttons: shine + arrow swap ---------- */
.btn { overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform 700ms var(--ease); }
.btn:hover::after { transform: translateX(120%); }
.btn--ghost::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); border-radius: inherit; transform: translateY(101%); transition: transform 420ms var(--ease); }
.btn--ghost:hover { --bg: transparent; }
.btn--ghost:hover::before { transform: none; }
.nav__link:not(button)::before { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 420ms var(--ease); }
.nav__link:not(button):hover::before { transform: scaleX(1); transform-origin: left; }
.nav__link:hover { background: transparent; }

/* ---------- Ambient orbs ---------- */
.hero::before, .page-hero::before {
  content: ""; position: absolute; z-index: -1; width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; right: -12vw; top: -14vw; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(229,121,61,.22), rgba(95,148,64,.12) 45%, transparent 70%); filter: blur(30px);
  animation: orb 18s ease-in-out infinite alternate; pointer-events: none;
}
.page-hero { isolation: isolate; }
@keyframes orb { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-6vw, 5vw) scale(1.12); } 100% { transform: translate(-2vw, 10vw) scale(.95); } }

/* ---------- Hero slideshow ---------- */
.hero__arch img { animation: none; transform: none; }
.hero__slides { position: absolute; inset: 0; }
.hero__slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: slide 18s infinite; }
.hero__slides img:nth-child(1) { opacity: 1; animation-delay: 0s; }
.hero__slides img:nth-child(2) { animation-delay: 6s; }
.hero__slides img:nth-child(3) { animation-delay: 12s; }
@keyframes slide {
  0% { opacity: 0; transform: scale(1.14); }
  6% { opacity: 1; }
  33% { opacity: 1; }
  40% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
.hero__arch.is-paused .hero__slides img { animation-play-state: paused; }
.hero__pause { position: absolute; left: 50%; bottom: 18px; z-index: 3; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(24,51,40,.45); backdrop-filter: blur(6px); color: #fff; display: grid; place-items: center; }
.hero__pause .ic { width: 16px; height: 16px; }
.hero__arch.is-paused .hero__pause { background: var(--saffron); border-color: var(--saffron); }
.hero__badge { animation: bob 6s ease-in-out infinite; }
.hero__inset { animation: bob 7s -2s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) {
  .hero__slides img { animation: none; }
  .hero__slides img:not(:first-child) { display: none; }
  .hero__pause { display: none; }
  .hero::before, .page-hero::before { animation: none; }
}

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--paper); padding-block: 1.6rem; }
.marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; }
.marquee span { font-family: var(--font-display); font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.4rem); line-height: 1; white-space: nowrap; color: var(--ink); letter-spacing: -0.02em; }
.marquee span:nth-of-type(even) { font-style: italic; color: var(--clay); font-variation-settings: "SOFT" 100, "WONK" 1; }
.marquee__star { width: 26px; height: 26px; fill: var(--saffron); flex: none; animation: spin 10s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track, .marquee__star { animation: none; } .marquee { overflow-x: auto; } }

/* ---------- Expanding story section ---------- */
.expand { position: relative; background: var(--paper); }
.expand__pin { position: relative; height: 100svh; min-height: 560px; display: grid; align-items: end; overflow: hidden; }
.expand__media { position: absolute; inset: 0; overflow: hidden; }
.expand__media img { width: 100%; height: 100%; object-fit: cover; }
.expand__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,30,24,.1) 0%, rgba(15,30,24,.25) 40%, rgba(15,30,24,.85) 100%); }
.expand__content { position: relative; z-index: 1; color: #fff; padding-bottom: clamp(2.5rem, 2rem + 4vw, 6rem); }
.expand__content .eyebrow { color: var(--saffron); }
.expand__content .eyebrow::before { background: var(--saffron); }
.expand__title { font-size: clamp(2.6rem, 1.5rem + 5vw, 6.4rem); color: #fff; max-width: 14ch; margin-bottom: var(--s5); }
.expand__title em { font-style: italic; color: var(--saffron-soft); font-variation-settings: "SOFT" 100, "WONK" 1; }
.expand__facts { display: grid; gap: var(--s3); border-top: 1px solid rgba(255,255,255,.25); padding-top: var(--s3); }
@media (min-width: 720px) { .expand__facts { grid-template-columns: repeat(3, 1fr); } }
.expand__facts strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.8rem); line-height: 1.1; }
.expand__facts span { color: rgba(255,255,255,.8); font-size: .96875rem; }

/* ---------- Care rail ---------- */
.rail { position: relative; padding-block: var(--section); background: var(--paper); overflow: hidden; }
.rail__head { display: grid; gap: var(--s3); margin-bottom: var(--s5); align-items: end; }
@media (min-width: 900px) { .rail__head { grid-template-columns: 1.1fr .9fr; gap: var(--s6); } }
.rail__meta { display: grid; gap: 1rem; }
.rail__progress { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.rail__progress span { display: block; height: 100%; background: var(--clay); transform-origin: 0 50%; transform: scaleX(.12); }
.rail__hint { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.rail__hint .ic { animation: nudge 1.8s var(--ease) infinite; }
.rail__hint-desk { display: none; }
@media (min-width: 1024px) and (hover: hover) { .rail__hint-desk { display: inline; } .rail__hint-touch { display: none; } }
@media (hover: none) { .rail-card::after { background: linear-gradient(180deg, rgba(15,30,24,.1) 15%, rgba(15,30,24,.72) 42%, rgba(15,30,24,.96)); } }
@keyframes nudge { 50% { transform: translateX(6px); } }
.rail__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.rail__viewport::-webkit-scrollbar { display: none; }
.rail__viewport:focus-visible { outline-offset: -3px; }
@media (min-width: 1280px) { .rail__viewport { padding-inline: calc((100vw - var(--max)) / 2 + var(--gutter)); } }
.rail__track { display: flex; gap: var(--s3); width: max-content; padding-block: 8px 12px; }
.rail-card {
  position: relative; flex: none; width: clamp(280px, 78vw, 400px); aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; scroll-snap-align: start;
  color: #fff; text-decoration: none; background: var(--forest); isolation: isolate; box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-med) var(--ease);
}
@media (min-width: 1024px) { .rail-card { width: clamp(340px, 29vw, 420px); } }
.rail-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.rail-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,30,24,.05) 25%, rgba(15,30,24,.55) 55%, rgba(15,30,24,.94)); transition: opacity var(--t-med) var(--ease); }
.rail-card:hover { box-shadow: var(--shadow-2); }
.rail-card:hover img { transform: scale(1.08); }
.rail-card__num { position: absolute; left: 1.5rem; top: 1.4rem; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.rail-card__num small { font-family: var(--font-body); font-size: .75rem; opacity: .75; margin-left: 4px; }
.rail-card__icon { position: absolute; right: 1.25rem; top: 1.25rem; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(250,246,239,.16); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); transition: background var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.rail-card:hover .rail-card__icon { background: var(--saffron); transform: rotate(-12deg) scale(1.06); }
.rail-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem; display: grid; gap: .6rem; }
.rail-card__body strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); line-height: 1.1; }
.rail-card__desc { font-size: .96875rem; line-height: 1.5; color: rgba(255,255,255,.85); }
@media (hover: hover) {
  .rail-card:not(.rail-card--end) .rail-card__desc { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 600ms var(--ease), opacity 400ms var(--ease); }
  .rail-card:hover .rail-card__desc, .rail-card:focus-visible .rail-card__desc { max-height: 8em; opacity: 1; }
}
.rail-card__go { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--saffron-soft); margin-top: .25rem; }
.rail-card__go .ic { transition: transform var(--t-med) var(--ease); }
.rail-card:hover .rail-card__go .ic { transform: translateX(6px); }
.rail-card--end { background: var(--forest); color: var(--on-forest); display: flex; align-items: flex-end; }
.rail-card--end::after { background: radial-gradient(circle at 80% 10%, rgba(229,121,61,.35), transparent 55%); }
.rail-card--end .eyebrow { color: var(--saffron); margin-bottom: 0; }
.rail-card--end .eyebrow::before { background: var(--saffron); }
.rail.is-pinned .rail__viewport { overflow: visible; scroll-snap-type: none; }

/* Pinned mode: the whole rail must fit one screen, so cards size from the space left under the heading */
.rail.is-pinned { height: 100vh; height: 100svh; padding-block: clamp(1.25rem, 4vh, 3rem); display: flex; flex-direction: column; }
.rail.is-pinned .rail__pin { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rail.is-pinned .rail__head { margin-bottom: clamp(1rem, 3vh, 2.5rem); flex: none; }
.rail.is-pinned .rail__viewport { flex: 1; min-height: 0; }
.rail.is-pinned .rail__track { height: 100%; }
.rail.is-pinned .rail-card { height: 100%; width: auto; aspect-ratio: 4 / 5; max-width: 440px; }
@media (max-height: 820px) {
  .rail.is-pinned .rail__meta .lede { display: none; }
  .rail.is-pinned .rail__head .h2 { font-size: clamp(1.8rem, 4.2vh + .6rem, 3rem); }
  .rail.is-pinned .rail-card__body { padding: 1.1rem; gap: .4rem; }
  .rail.is-pinned .rail-card__body strong { font-size: clamp(1.3rem, 2.6vh + .4rem, 2rem); }
}
@media (max-height: 640px) {
  .rail.is-pinned .rail__hint { display: none; }
  .rail.is-pinned .rail-card__desc { display: none; }
}

/* ---------- Steps timeline ---------- */
.steps-wrap { position: relative; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); position: relative; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s4); } }
.steps__line { position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: var(--line-2); }
.steps__line span { position: absolute; inset: 0; background: linear-gradient(180deg, var(--leaf), var(--saffron)); transform-origin: top; }
@media (min-width: 900px) { .steps__line { left: 28px; right: 12%; top: 27px; bottom: auto; width: auto; height: 2px; } .steps__line span { transform-origin: left; background: linear-gradient(90deg, var(--leaf), var(--saffron)); } }
.step { position: relative; padding-left: 84px; }
@media (min-width: 900px) { .step { padding-left: 0; padding-top: 88px; } }
.step__dot { position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 2px solid var(--line-2); color: var(--clay); transition: background 500ms var(--ease), color 500ms var(--ease), border-color 500ms var(--ease), transform 500ms var(--ease); z-index: 1; }
.step__dot .ic { width: 24px; height: 24px; }
.step.is-active .step__dot { background: var(--forest); border-color: var(--forest); color: var(--saffron); transform: scale(1.08); box-shadow: 0 0 0 8px rgba(229,121,61,.14); }
.step__num { display: block; font-family: var(--font-display); font-size: .95rem; color: var(--clay); letter-spacing: .1em; margin-bottom: .4rem; }
.step h3 { font-size: 1.6rem; margin-bottom: .6rem; }
.step p { color: var(--ink-2); font-size: 1rem; }

/* ---------- Card spotlight & tilt ---------- */
.spot { --mx: -999px; --my: -999px; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: radial-gradient(380px circle at var(--mx) var(--my), rgba(229,121,61,.13), transparent 45%); }
.amenity.spot, .feature.spot, .member.spot, .stay.spot, .aside-card.spot, .post-card.spot { position: relative; }
.stay.spot > *, .feature.spot > *, .member.spot > * { position: relative; }
.care-card, .rail-card { transform-style: preserve-3d; will-change: transform; }

/* ---------- Parallax images: GSAP owns transforms ---------- */
.px { transition: none !important; will-change: transform; }

/* ---------- Stats underline ---------- */
.stat { position: relative; }
.stat::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 60%; background: var(--saffron); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .3s; }
.stat.is-in::after { transform: scaleX(1); }

/* ---------- Eyebrow line grows ---------- */
.js .reveal .eyebrow::before, .js .eyebrow.reveal::before { transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease) 200ms; }
.js .reveal.is-in .eyebrow::before, .js .eyebrow.reveal.is-in::before { transform: none; }

/* ---------- Footer wordmark ---------- */
.footer__mark { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: clamp(4.5rem, 19vw, 19rem); line-height: .8; letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: 1px rgba(244,239,230,.22); padding-block: var(--s4) var(--s3); overflow: hidden; user-select: none; }
.footer__mark span { display: inline-block; transition: color 600ms var(--ease), -webkit-text-stroke-color 600ms var(--ease); }
.footer__mark span:hover { color: var(--saffron); -webkit-text-stroke-color: var(--saffron); }

/* ---------- Image hover zoom inside media stacks ---------- */
.media-stack__main, .inline-figure, .page-hero__media { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .hero__badge, .hero__inset, .rail__hint .ic { animation: none; }
  .stat::after { transition: none; }
}