/* ============================================================================
   RanchOS landing — "A Year on the Ranch"
   Brand tokens + Act 0 hero + engine-chrome overrides + Act 5 reveal + Act 6
   platform/footer + a11y + responsive.
   The scrub engine (landing.js) injects its own CSS inside `@layer sw`, so every
   rule here is unlayered and therefore always wins over the engine defaults.
   Brand tokens are extracted from apps/web ("Clean, Alive & True"); they are law.
   ========================================================================== */

:root, .sw-root {
  /* --- brand palette --- */
  --page:#F0EDE4; --card:#FBFAF6; --ink:#211F1A; --ink-2:#57544A; --hairline:#E4E0D3;
  --clay:#CC785C; --clay-ink:#9C4E33; --saddle:#5C3A1E; --gold:#C9922A; --sage:#4F7A4E;
  --dusk-a:#21140A; --dusk-b:#4A3018; --dusk-ink:#F7EFDD; --dusk-ink-2:#D7C4A2; --dusk-gold:#E0AE4A;
  --cream:#FBEFE7;
  --font-display:'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- engine token bindings (the scrub engine reads these) --- */
  --sw-bg:var(--page);
  --sw-ink:var(--ink);
  --sw-ink-soft:var(--ink-2);
  --sw-accent:var(--clay);
  --sw-font-display:var(--font-display);
  --sw-font-body:var(--font-body);
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }
body {
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--font-body); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img { max-width:100%; }

/* focus: dark ring on light surfaces, warm ring on dark surfaces */
:focus-visible { outline:3px solid var(--clay-ink); outline-offset:2px; border-radius:4px; }
.hero :focus-visible, .platform :focus-visible, .foot :focus-visible { outline-color:var(--dusk-gold); }

/* ---------------------------------------------------------------- Act 0 hero */
.hero {
  position:relative; z-index:70;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(28px,7vh,90px) 24px;
  color:var(--cream);
  /* near-black radial, fading to the ivory film world across the bottom edge */
  background:
    linear-gradient(to bottom, rgba(240,237,228,0) 82%, var(--page) 100%),
    radial-gradient(125% 90% at 50% 34%, #21140A 0%, #171310 100%);
}
/* Skip sits top-LEFT: the top-right corner belongs to the persistent sign-in below, and the two
   would otherwise overlap. Secondary action left, primary action right. */
.hero__skip {
  position:absolute; top:clamp(16px,3vh,28px); left:clamp(16px,4vw,44px); z-index:3;
  font-size:.82rem; font-weight:600; letter-spacing:.01em;
  color:var(--cream); text-decoration:none;
  padding:9px 16px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--cream) 42%, transparent);
  background:color-mix(in srgb, #000 22%, transparent);
  transition:background .2s ease;
}
.hero__skip:hover { background:color-mix(in srgb, #000 38%, transparent); }

/* Persistent sign-in — FIXED, so it rides every act of the scroll-world (the hero is z-index:70,
   hence 100 here). A frosted dark pill stays legible over every seasonal backdrop — snow glare,
   summer sun, dusk — where a flat colour would vanish against one of them. min-height 44px keeps
   the touch target honest on a phone. */
.landing-login {
  position:fixed; top:clamp(16px,3vh,28px); right:clamp(16px,4vw,44px); z-index:100;
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--font-body); font-size:.86rem; font-weight:650; letter-spacing:.01em;
  color:var(--cream); text-decoration:none;
  padding:10px 22px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--cream) 55%, transparent);
  background:color-mix(in srgb, #000 46%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.landing-login:hover {
  background:color-mix(in srgb, #000 62%, transparent);
  border-color:var(--dusk-gold); color:var(--dusk-gold);
}
.landing-login:focus-visible { outline:3px solid var(--dusk-gold); outline-offset:2px; }
@media (prefers-reduced-motion: no-preference) {
  .landing-login:hover { transform:translateY(-1px); }
}
.hero__inner { display:flex; flex-direction:column; align-items:center; max-width:min(92vw,760px); }
.hero-mark { width:clamp(64px,10vh,96px); }
.hero-mark__svg { display:block; width:100%; height:auto; transform-origin:50% 62%;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.5)); }
.hero__wordmark {
  font-family:var(--font-display); font-weight:600; letter-spacing:.005em;
  font-size:clamp(1.3rem,3.4vw,1.85rem); color:var(--cream);
  margin:clamp(18px,3vh,30px) 0 0;
}
.hero__title {
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(2.4rem,6.4vw,4.6rem); line-height:1.02; letter-spacing:-.015em;
  color:var(--cream); margin:clamp(12px,2vh,20px) 0 0; max-width:15ch;
}
.hero__sub {
  font-size:clamp(1rem,1.6vw,1.18rem); line-height:1.5;
  color:color-mix(in srgb, var(--cream) 84%, #7d6f5a);
  margin:clamp(14px,2vh,22px) 0 0;
}
.hero__cue {
  display:flex; flex-direction:column; align-items:center; gap:9px;
  margin-top:clamp(30px,6vh,64px);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in srgb, var(--cream) 74%, #7d6f5a);
}
.hero__chevron { width:22px; height:13px; color:inherit; }

/* clip-in choreography — only when motion is welcome; otherwise everything rests visible */
@media (prefers-reduced-motion: no-preference) {
  .hero-mark { animation:gx-tag-drop .72s cubic-bezier(.16,1,.3,1) both; }
  .hero-mark__svg { animation:gx-tag-click .5s ease .74s both; }
  .hero__wordmark { animation:gx-fade-up .6s ease .92s both; }
  .hero__title { animation:gx-fade-up .7s ease 1.04s both; }
  .hero__sub { animation:gx-fade-up .7s ease 1.18s both; }
  .hero__cue { animation:gx-fade-up .7s ease 1.42s both; }
  .hero__chevron { animation:gx-cue-bounce 1.8s ease-in-out 2.3s infinite; }
}
@keyframes gx-tag-drop { from { opacity:0; transform:translateY(-64px) rotate(-9deg); } to { opacity:1; transform:translateY(0) rotate(0); } }
@keyframes gx-tag-click { 0% { transform:scale(1); } 45% { transform:scale(1.04); } 100% { transform:scale(1); } }
@keyframes gx-fade-up { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes gx-cue-bounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(5px); } }

/* ------------------------------------------------ engine chrome (Acts 1-5) */
/* The hero owns the intro and the season rail owns progress, so the engine's own
   hint / top scrollbar / (empty) topbar are removed. */
.sw-hint, .sw-scrollbar, .sw-topbar { display:none !important; }

/* the season rail only appears while the film band is on screen (toggled in JS) */
.sw-route { opacity:0; pointer-events:none; transition:opacity .5s ease; gap:clamp(18px,3.2vh,30px); }
.world.sw-live .sw-route { opacity:1; pointer-events:auto; }
.sw-route::before { background:var(--ink); opacity:.16; }

/* ear-tag season markers: a clip-path tag silhouette (rounded shield, narrow neck) */
.sw-route__dot { display:flex; flex-direction:column; align-items:center; width:26px; height:auto; }
.sw-route__dot i {
  order:1; width:16px; height:20px; border-radius:0; box-shadow:none;
  background:color-mix(in srgb, var(--ink) 24%, transparent);
  clip-path:polygon(38% 0%, 62% 0%, 66% 20%, 100% 46%, 85% 100%, 15% 100%, 0% 46%, 34% 20%);
  transition:background .3s ease, transform .3s ease;
}
.sw-route__dot:hover i { background:color-mix(in srgb, var(--clay) 62%, var(--ink)); transform:scale(1.08); }
.sw-route__dot.is-active i { background:var(--clay); transform:scale(1.12); }
/* always-on 2-letter season caption below each marker (legible over media) */
.sw-route__label {
  order:2; position:static; transform:none; opacity:1; pointer-events:none;
  display:block; margin:6px 0 0; padding:1px 5px; border:0; border-radius:5px; backdrop-filter:none;
  font-family:var(--font-body); font-size:.62rem; font-weight:700; letter-spacing:.04em; text-align:center;
  color:var(--ink-2); background:color-mix(in srgb, var(--card) 80%, transparent);
}
.sw-route__dot.is-active .sw-route__label { color:var(--clay-ink); background:color-mix(in srgb, var(--clay) 16%, var(--card)); }

/* film copy — kept AA-safe on ivory (accent hues are decorative, never load-bearing text) */
.sw-copy__num { color:var(--ink-2); }
.sw-copy__eyebrow { color:var(--ink); display:flex; align-items:center; gap:10px; }
.sw-copy__eyebrow::before { content:""; flex:none; width:22px; height:3px; border-radius:2px; background:var(--sw-accent); }
.sw-copy__title { font-weight:500; text-shadow:0 2px 22px color-mix(in srgb, var(--page) 80%, transparent); }
.sw-copy__body { color:color-mix(in srgb, var(--ink) 88%, var(--ink-2)); }
.sw-copy__tags li {
  color:var(--ink); background:var(--card);
  border:1px solid color-mix(in srgb, var(--sw-accent) 45%, var(--hairline));
}

/* Act-3 USDM legend (injected into the drought copy card) — real D0-D4 hexes */
.usdm-legend { display:flex; flex-wrap:wrap; align-items:center; gap:9px 14px; margin-top:20px; }
.usdm-legend__item { display:inline-flex; align-items:center; gap:6px; }
.usdm-legend__sw { width:16px; height:16px; border-radius:4px; flex:none;
  border:1px solid color-mix(in srgb, var(--ink) 32%, transparent); }
.usdm-legend__lab { font-family:var(--font-body); font-size:.74rem; font-weight:700; letter-spacing:.02em; color:var(--ink); }

/* ------------------------------------------------ Act 5 — into-the-screen reveal */
.landing-reveal {
  position:fixed; inset:0; z-index:45; opacity:0; pointer-events:none;
  display:grid; place-items:center; transform:scale(.92); transform-origin:50% 46%;
  /* warm "screen glow" that stands in gracefully until the cockpit still lands */
  background:radial-gradient(120% 92% at 50% 42%, #2C1C0E 0%, #171310 74%);
  will-change:opacity, transform;
}
.landing-reveal__img { width:100%; height:100%; object-fit:cover; object-position:center 40%; }

/* ------------------------------------------------ Act 6 — platform (dusk band) */
.platform {
  position:relative; z-index:70;
  background:linear-gradient(158deg, var(--dusk-a) 0%, var(--dusk-b) 100%);
  color:var(--dusk-ink);
  padding:clamp(64px,13vh,150px) clamp(20px,6vw,80px) clamp(28px,5vh,52px);
}
.platform__inner { max-width:820px; margin:0 auto; }
.platform__kicker {
  margin:0; font-family:var(--font-body); font-weight:700; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dusk-gold);
}
.platform__h {
  margin:14px 0 0; font-family:var(--font-display); font-weight:500;
  font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.05; letter-spacing:-.01em;
  color:var(--dusk-ink); max-width:18ch;
}
.trust { list-style:none; margin:clamp(34px,6vh,60px) 0 0; padding:0; display:grid; gap:clamp(20px,3vh,32px); }
.trust__row { padding-top:clamp(18px,3vh,26px); border-top:1px solid color-mix(in srgb, var(--dusk-ink) 18%, transparent); }
.trust__row h3 { margin:0 0 6px; font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.2rem,2.2vw,1.5rem); color:var(--dusk-ink); }
.trust__row p { margin:0; font-size:clamp(1rem,1.4vw,1.1rem); line-height:1.55; color:var(--dusk-ink-2); max-width:58ch; }

.platform__cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(38px,6vh,60px); }
.btn { font-family:var(--font-body); font-weight:600; font-size:1rem; text-decoration:none;
  padding:14px 26px; border-radius:12px; transition:transform .2s ease, background .2s ease, border-color .2s ease; }
.btn--gold { background:var(--dusk-gold); color:var(--ink); }
.btn--gold:hover { transform:translateY(-2px); background:color-mix(in srgb, var(--dusk-gold) 88%, #fff); }
.btn--ghost { color:var(--dusk-ink); border:1.5px solid color-mix(in srgb, var(--dusk-ink) 42%, transparent); }
.btn--ghost:hover { transform:translateY(-2px); border-color:var(--dusk-ink); }
.platform__subline { margin:16px 0 0; font-size:.9rem; color:var(--dusk-ink-2); }

/* footer */
.foot {
  max-width:820px; margin:clamp(56px,10vh,110px) auto 0; padding-top:clamp(22px,4vh,32px);
  border-top:1px solid color-mix(in srgb, var(--dusk-ink) 16%, transparent);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px;
}
.foot__brand { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; color:var(--dusk-ink); }
.foot__mark { width:20px; height:auto; display:block; }
.foot__links { display:inline-flex; gap:18px; }
.foot__links a { color:var(--dusk-ink-2); text-decoration:none; font-size:.9rem; }
.foot__links a:hover { color:var(--dusk-ink); text-decoration:underline; }
.foot__note { flex-basis:100%; margin:6px 0 0; font-size:.82rem; color:color-mix(in srgb, var(--dusk-ink-2) 82%, transparent); }

/* ---------------------------------------------------------------- responsive */
@media (max-width:860px) {
  .sw-route__label { display:none; }              /* markers only on phones */
  .hero__title { font-size:clamp(2.1rem,8.5vw,3rem); max-width:18ch; }
  .platform { padding-left:clamp(18px,6vw,44px); padding-right:clamp(18px,6vw,44px); }
  /* Drop the backdrop blur on phones: a fixed blurred element forces the compositor to re-sample
     and re-blur its backdrop on every scrolled frame, which is exactly the budget we're trying to
     give back. A denser flat scrim reads the same and costs nothing. */
  .landing-login { -webkit-backdrop-filter:none; backdrop-filter:none;
    background:color-mix(in srgb, #000 68%, transparent); }
}