/* =================================================================
   LANTYRN — production stylesheet
   Consolidated from the prototype's many iterative passes into one
   clean cascade. Design tokens up top; sections in document order.
   ================================================================= */

:root {
  --black: #020302;
  --black-2: #060403;
  --panel: #0a0705;
  --ink: #fff3e2;
  --muted: #c9baa3;
  --muted-2: rgba(255, 243, 226, 0.72);
  --gold: #e4a34b;
  --gold-2: #ffd98e;
  --moss: #b9c99f;
  --line: rgba(255, 217, 142, 0.10);
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* pointer position (updated by JS; safe default centered) */
  --mx: 50%;
  --my: 50%;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;

  color-scheme: dark;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "cv01", "ss03";
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); }

/* Film-grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .28;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* Accessibility helpers */
.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 200;
  background: var(--gold-2);
  color: #201608;
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 10px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

:where(a, button):focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
  border-radius: 8px;
}

.wrap {
  width: min(1220px, calc(100% - 44px));
  margin-inline: auto;
}

/* Ambient pointer radiance (desktop only) */
.cursor-glass {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s var(--ease);
  background: radial-gradient(640px 460px at var(--mx) var(--my),
    rgba(255, 190, 83, .07), rgba(229, 92, 24, .024) 40%, transparent 80%);
  mix-blend-mode: screen;
}
body.has-pointer .cursor-glass { opacity: .8; }

/* ---- Custom cursor: small dark arrow with a soft cream halo ---- */
:root {
  --lantyrn-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 25 25'%3E%3Cdefs%3E%3Cfilter id='soft' x='-60%25' y='-60%25' width='220%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='0.35' result='b'/%3E%3CfeColorMatrix in='b' type='matrix' values='1 0 0 0 .88  0 1 0 0 .82  0 0 1 0 .68  0 0 0 .32 0' result='halo'/%3E%3CfeMerge%3E%3CfeMergeNode in='halo'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M4.5 3.4 18.5 13.6l-6.25 1 3.85 6.65-2.65 1.48-3.72-6.62-4.68 4.28Z' fill='%23060504' stroke='%23fff2dd' stroke-opacity='.56' stroke-width='.78' stroke-linejoin='round' filter='url(%23soft)'/%3E%3Cpath d='M5.9 6.1 15.5 13.1l-4.6.7 3 5.25-.72.4-3.02-5.35-3.55 3.2Z' fill='%230b0704' opacity='.98'/%3E%3C/svg%3E") 3 3, auto;
}
body.has-pointer,
body.has-pointer a,
body.has-pointer button { cursor: var(--lantyrn-cursor); }

/* ---- Pointer embers: slow, irregular, crackling lantern residue ---- */
.pointer-sparks {
  position: fixed;
  left: var(--cursor-x, 50%);
  top: var(--cursor-y, 50%);
  z-index: 3;
  width: 1px;
  height: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 10px rgba(255, 178, 66, .22));
}
body.has-pointer .pointer-sparks { opacity: .82; }

.pointer-sparks i {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    #ffe0a2 0 10%, rgba(238, 126, 42, .82) 34%, rgba(162, 55, 17, .44) 64%, transparent 76%);
  box-shadow: 0 0 10px rgba(255, 174, 66, .38), 0 0 24px rgba(220, 78, 18, .18);
  filter: blur(.16px);
  animation: emberLift 5.15s cubic-bezier(.18, .72, .22, 1) infinite;
}
/* irregular variety in colour/blur */
.pointer-sparks i:nth-child(3n) {
  background: radial-gradient(circle,
    rgba(255, 222, 150, .95) 0 9%, rgba(214, 91, 28, .68) 38%, transparent 74%);
  filter: blur(.55px);
}
.pointer-sparks i:nth-child(4n) { filter: blur(.35px); }

/* per-ember size, path (start / mid / end offsets) and tempo */
.pointer-sparks i:nth-child(1) { width: 3.25px; height: 3.25px; --sx: -14px; --sy: -9px;  --dx: -28px; --dy: -48px; --ex: -46px; --ey: -92px;  animation-duration: 5.25s; }
.pointer-sparks i:nth-child(2) { width: 2.4px;  height: 2.4px;  --sx: 16px;  --sy: -16px; --dx: 30px;  --dy: -56px; --ex: 49px;  --ey: -102px; animation-duration: 4.85s; }
.pointer-sparks i:nth-child(3) { width: 3.75px; height: 3.75px; --sx: -8px;  --sy: 10px;  --dx: -22px; --dy: -30px; --ex: -36px; --ey: -78px;  animation-duration: 5.9s;  }
.pointer-sparks i:nth-child(4) { width: 2.1px;  height: 2.1px;  --sx: 22px;  --sy: 5px;   --dx: 40px;  --dy: -36px; --ex: 62px;  --ey: -82px;  animation-duration: 5.05s; }
.pointer-sparks i:nth-child(5) { width: 2.75px; height: 2.75px; --sx: 1px;   --sy: -22px; --dx: 7px;   --dy: -64px; --ex: 12px;  --ey: -118px; animation-duration: 6.05s; }
.pointer-sparks i:nth-child(6) { width: 2px;    height: 2px;    --sx: -24px; --sy: 0px;   --dx: -42px; --dy: -36px; --ex: -66px; --ey: -86px;  animation-duration: 5.45s; }
.pointer-sparks i:nth-child(7) { width: 2.8px;  height: 2.8px;  --sx: 13px;  --sy: 18px;  --dx: 27px;  --dy: -17px; --ex: 42px;  --ey: -62px;  animation-duration: 5.75s; }
.pointer-sparks i:nth-child(8) { width: 3.5px;  height: 3.5px;  --sx: -16px; --sy: -24px; --dx: -28px; --dy: -70px; --ex: -40px; --ey: -130px; animation-duration: 6.35s; }

@keyframes emberLift {
  0%   { opacity: 0;   transform: translate(var(--sx), var(--sy)) scale(.20); }
  13%  { opacity: .62; transform: translate(calc(var(--sx) * .86), calc(var(--sy) * .9)) scale(.88); }
  34%  { opacity: .36; transform: translate(var(--dx), var(--dy)) scale(.62); }
  58%  { opacity: .58; transform: translate(calc(var(--dx) * 1.04), calc(var(--dy) * 1.02)) scale(.78); }
  100% { opacity: 0;   transform: translate(var(--ex), var(--ey)) scale(.10); }
}

/* =================================================================
   HERO
   ================================================================= */

/* Pre-paint hide states for the cinematic intro (set via html.intro before
   first paint, so hero copy/nav never flash visible before the sequence).
   The failsafe animation is a safety net: if main.js never runs (so .is-playing
   is never added), content reveals anyway by ~7s. The intro animations
   (html.intro .hero.is-playing …) have higher specificity and override it. */
html.intro .site-header,
html.intro .hero .eyebrow,
html.intro .hero .lead,
html.intro .hero .actions,
html.intro .hero .support,
html.intro .hero .lantern-note,
html.intro .hero .scroll-cue {
  opacity: 0;
  animation: failsafeReveal .6s linear 7s forwards;
}
html.intro .hero .word > span {
  transform: translateY(112%) rotate(2deg);
  animation: failsafeWordup .6s linear 7s forwards;
}
@keyframes failsafeReveal { to { opacity: 1; } }
@keyframes failsafeWordup { to { transform: none; } }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: -7;
  overflow: hidden;
}
.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* FINAL resting state: lantern composed right-of-centre. */
  object-position: 72% center;
  opacity: .92;
  filter: saturate(1.04) contrast(1.12) brightness(.98);
  /* parallax nudge from the pointer (kept subtle) */
  transform: scale(1.035)
    translate3d(calc((var(--mx) - 50%) * -.014), calc((var(--my) - 50%) * -.01), 0);
  transition: transform .7s var(--ease);
}

/*
   CINEMATIC INTRO
   When JS confirms motion is allowed it adds `.is-playing` to .hero. The intro
   runs on a wrapper transform (.hero-video) so the video's own transform stays
   free for pointer parallax once the sequence finishes. Final/reduced-motion
   state is the plain rule above, so if JS never runs the page loads composed.
*/
html.intro .hero.is-playing .hero-video { animation: lanternScale 6.4s var(--ease) forwards; }
html.intro .hero.is-playing .hero-video video { animation: lanternRise 6.4s var(--ease) forwards; }
html.intro .hero.is-playing .final-warmth { animation: warmthRise 6.4s var(--ease) forwards; }
html.intro .hero.is-playing::before { animation: vignetteRise 6.4s var(--ease) forwards; }

@keyframes lanternScale {
  0%   { transform: scale(1.10); }
  46%  { transform: scale(1.06); }
  100% { transform: scale(1.035); }
}
@keyframes lanternRise {
  /* near-black, lantern centred and dim */
  0%   { object-position: 50% center; opacity: 0;   filter: saturate(1.05) contrast(1.18) brightness(.06); }
  10%  { object-position: 50% center; opacity: .12; filter: saturate(1.05) contrast(1.18) brightness(.12); }
  /* flicker buildup */
  20%  { object-position: 50% center; opacity: .55; filter: saturate(1.12) contrast(1.16) brightness(.62); }
  26%  { object-position: 50% center; opacity: .30; filter: brightness(.34); }
  34%  { object-position: 50% center; opacity: .82; filter: saturate(1.18) contrast(1.16) brightness(.92); }
  /* lantern establishes, holds centre to set the mood */
  46%  { object-position: 50% center; opacity: .95; filter: saturate(1.16) contrast(1.14) brightness(1.06); }
  56%  { object-position: 50% center; opacity: .96; filter: saturate(1.14) contrast(1.13) brightness(1.05); }
  /* glides into the right-side composition */
  82%  { object-position: 70% center; opacity: .93; filter: saturate(1.06) contrast(1.12) brightness(1.0); }
  100% { object-position: 72% center; opacity: .92; filter: saturate(1.04) contrast(1.12) brightness(.98); }
}
@keyframes warmthRise {
  0%, 12% { opacity: 0; }
  46%     { opacity: .5; background: radial-gradient(circle at 50% 50%, rgba(255, 195, 92, .22), rgba(180, 83, 24, .08) 31%, transparent 68%); }
  100%    { opacity: .32; background: radial-gradient(circle at 72% 48%, rgba(255, 195, 92, .18), rgba(180, 83, 24, .07) 31%, transparent 68%); }
}
@keyframes vignetteRise {
  0%, 8% {
    background:
      radial-gradient(820px 560px at 50% 50%, rgba(255, 186, 82, 0), transparent 70%),
      linear-gradient(90deg, rgba(2, 3, 2, 1) 0%, rgba(2, 3, 2, 1) 100%),
      linear-gradient(180deg, rgba(2, 3, 2, .8) 0%, rgba(2, 3, 2, .9) 100%);
  }
  46% {
    background:
      radial-gradient(820px 560px at 50% 50%, rgba(255, 186, 82, .18), rgba(168, 76, 22, .05) 35%, transparent 70%),
      linear-gradient(90deg, rgba(2, 3, 2, .7) 0%, rgba(2, 3, 2, .4) 50%, rgba(2, 3, 2, .7) 100%),
      linear-gradient(180deg, rgba(2, 3, 2, .55) 0%, transparent 32%, rgba(2, 3, 2, .88) 100%);
  }
  100% {
    background:
      radial-gradient(820px 560px at 73% 48%, rgba(255, 186, 82, .15), rgba(168, 76, 22, .05) 35%, transparent 70%),
      linear-gradient(90deg, rgba(2, 3, 2, .98) 0%, rgba(2, 3, 2, .9) 30%, rgba(2, 3, 2, .56) 50%, rgba(2, 3, 2, .14) 66%, rgba(2, 3, 2, .6) 100%),
      linear-gradient(180deg, rgba(2, 3, 2, .55) 0%, transparent 32%, rgba(2, 3, 2, .88) 100%);
  }
}

/* Cinematic vignette + readability scrim over the video */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -5;
  pointer-events: none;
  background:
    radial-gradient(820px 560px at 73% 48%, rgba(255, 186, 82, .15), rgba(168, 76, 22, .05) 35%, transparent 70%),
    linear-gradient(90deg, rgba(2, 3, 2, .98) 0%, rgba(2, 3, 2, .9) 30%, rgba(2, 3, 2, .56) 50%, rgba(2, 3, 2, .14) 66%, rgba(2, 3, 2, .6) 100%),
    linear-gradient(180deg, rgba(2, 3, 2, .55) 0%, transparent 32%, rgba(2, 3, 2, .88) 100%);
}
/* faint engineering grid, masked to the lantern */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 217, 142, .038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 217, 142, .028) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(circle at 70% 50%, black 0 22%, transparent 56%);
  opacity: .3;
}

.final-warmth {
  position: absolute;
  inset: -10%;
  z-index: -3;
  pointer-events: none;
  opacity: .32;
  background: radial-gradient(circle at 72% 48%,
    rgba(255, 195, 92, .18), rgba(180, 83, 24, .07) 31%, transparent 68%);
  filter: blur(1px);
}

/* Final-frame hold: the camera/character are still, but the light breathes. */
.hero.video-held .final-warmth {
  animation: heldWarmthBreath 7.5s ease-in-out infinite alternate;
}
.hero.video-held::after {
  animation: heldGridShimmer 11s ease-in-out infinite alternate;
}
.hero.video-held .spark-field i {
  animation-duration: 7.5s;
}

@keyframes heldWarmthBreath {
  0% {
    opacity: .26;
    filter: blur(1px) saturate(104%);
    transform: scale(1) translate3d(0, 0, 0);
  }
  100% {
    opacity: .40;
    filter: blur(1.8px) saturate(118%);
    transform: scale(1.018) translate3d(.6%, -.5%, 0);
  }
}
@keyframes heldGridShimmer {
  0% { opacity: .22; transform: translate3d(0, 0, 0); }
  100% { opacity: .36; transform: translate3d(-.4%, .3%, 0); }
}

/* Intro sparks */
.spark-field {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.spark-field i {
  position: absolute;
  left: 70%;
  top: 52%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 130, .95), rgba(255, 150, 50, 0));
  opacity: 0;
  animation: sparkLift 6s ease-in-out infinite;
}
.spark-field i:nth-child(1) { left: 64%; animation-delay: .2s; }
.spark-field i:nth-child(2) { left: 68%; animation-delay: 1.1s; }
.spark-field i:nth-child(3) { left: 73%; animation-delay: 2.0s; }
.spark-field i:nth-child(4) { left: 77%; animation-delay: 2.8s; }
.spark-field i:nth-child(5) { left: 66%; animation-delay: 3.4s; }
.spark-field i:nth-child(6) { left: 75%; animation-delay: 4.1s; }
.spark-field i:nth-child(7) { left: 70%; animation-delay: 4.9s; }
.spark-field i:nth-child(8) { left: 72%; animation-delay: 5.5s; }
@keyframes sparkLift {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  18% { opacity: .9; }
  60% { opacity: .5; }
  100% { opacity: 0; transform: translateY(-120px) scale(1); }
}

/* Header / nav */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  border-bottom: 1px solid rgba(255, 217, 142, .12);
  background:
    radial-gradient(560px 120px at 72% 0%, rgba(228, 163, 75, .10), transparent 62%),
    linear-gradient(180deg, rgba(2, 3, 2, .92), rgba(2, 3, 2, .70));
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  box-shadow: 0 18px 64px rgba(0, 0, 0, .18);
  transition: background .38s var(--ease), border-color .38s var(--ease), box-shadow .38s var(--ease);
}
body.is-scrolled .site-header,
.site-header:focus-within,
.site-header:hover {
  border-bottom-color: rgba(255, 217, 142, .16);
  background:
    radial-gradient(560px 120px at 72% 0%, rgba(228, 163, 75, .11), transparent 62%),
    linear-gradient(180deg, rgba(2, 3, 2, .94), rgba(2, 3, 2, .76));
  box-shadow: 0 20px 74px rgba(0, 0, 0, .34);
}
.nav {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 18px;
}
.brand img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 217, 142, .24), 0 0 36px rgba(228, 163, 75, .22);
}
.links {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--muted-2);
  font-size: 14.5px;
  font-weight: 500;
}
.links a:not(.nav-cta):not(.nav-login) { position: relative; padding: 10px 0; }
.links a:not(.nav-cta):not(.nav-login)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
  scale: 0 1;
  transition: scale .32s var(--ease);
}
.links a:not(.nav-cta):not(.nav-login):hover { color: var(--ink); }
.links a:not(.nav-cta):not(.nav-login):hover::after { scale: 1 1; }

.nav-cta, .nav-login, .primary, .secondary {
  min-height: 46px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
    background .28s var(--ease), border-color .28s var(--ease);
}
.nav-cta {
  padding: 0 18px;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: #201608;
  font-weight: 800;
  box-shadow: 0 16px 48px rgba(228, 163, 75, .16);
}
.nav-login {
  min-height: 42px;
  padding: 0 15px;
  color: rgba(255, 239, 210, .86);
  border: 1px solid rgba(255, 217, 142, .22);
  background: rgba(255, 217, 142, .055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.nav-login:hover {
  color: var(--ink);
  border-color: rgba(255, 217, 142, .36);
  background: rgba(255, 217, 142, .095);
}
.nav-cta:hover, .nav-login:hover, .primary:hover, .secondary:hover { transform: translateY(-2px); }

/* Cinematic intro: nav and eyebrow arrive just before the copy */
html.intro .site-header {
  opacity: 0;
  transform: translateY(-8px);
  animation: reveal .9s var(--ease) 4.85s forwards;
}
html.intro .hero.is-playing .eyebrow {
  opacity: 0;
  transform: translateY(10px);
  animation: reveal .8s var(--ease) 4.95s forwards;
}
html.intro .hero.is-playing .scroll-cue {
  opacity: 0;
  animation: reveal 1s var(--ease) 6.1s forwards;
}

/* Hero content */
.content {
  position: relative;
  z-index: 10;
  min-height: calc(100svh - 76px);
  display: grid;
  grid-template-columns: minmax(0, 735px) 1fr;
  align-items: center;
  gap: 48px;
  padding: clamp(104px, 11vw, 136px) 0 78px;
}
.copy { max-width: 760px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  color: var(--gold-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 800;
  text-shadow: 0 0 30px rgba(228, 163, 75, .3);
}
.eyebrow img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 28px rgba(228, 163, 75, .25);
}

.hero h1 {
  margin: 0;
  font-weight: 600;
  font-size: clamp(46px, 6.6vw, 96px);
  line-height: .96;
  letter-spacing: -.03em;
  text-wrap: balance;
  color: #fff5e6;
  text-shadow: 0 3px 48px rgba(0, 0, 0, .6);
}
.hero h1 .line { display: block; }
.word { display: inline-block; overflow: clip; vertical-align: bottom; }
.word > span { display: inline-block; }
/* Cinematic intro: words rise after the lantern has arrived */
html.intro .hero.is-playing .word > span {
  transform: translateY(112%) rotate(2deg);
  animation: wordup 1s var(--ease) forwards;
}
html.intro .hero.is-playing .w1 > span { animation-delay: 5.00s; }
html.intro .hero.is-playing .w2 > span { animation-delay: 5.07s; }
html.intro .hero.is-playing .w3 > span { animation-delay: 5.14s; }
html.intro .hero.is-playing .w4 > span { animation-delay: 5.24s; }
html.intro .hero.is-playing .w5 > span { animation-delay: 5.31s; }
html.intro .hero.is-playing .w6 > span { animation-delay: 5.38s; }

.lead {
  max-width: 620px;
  margin: 28px 0 0;
  color: var(--muted-2);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  letter-spacing: -.01em;
  text-wrap: pretty;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}
html.intro .hero.is-playing .lead {
  opacity: 0;
  transform: translateY(12px);
  animation: reveal .8s var(--ease) 5.35s forwards;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 32px;
}
.hero .actions {
  opacity: 1;
  transform: none;
}
html.intro .hero.is-playing .actions {
  opacity: 0;
  transform: translateY(12px);
  animation: reveal .8s var(--ease) 5.5s forwards;
}
.primary {
  padding: 0 26px;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: #201608;
  font-weight: 800;
  box-shadow: 0 20px 60px rgba(228, 163, 75, .2), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.secondary {
  padding: 0 22px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 217, 142, .22);
  color: var(--ink);
  backdrop-filter: blur(14px);
}
.secondary:hover { background: rgba(255, 255, 255, .075); border-color: rgba(255, 217, 142, .46); }

.support {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
html.intro .hero.is-playing .support {
  opacity: 0;
  transform: translateY(12px);
  animation: reveal .8s var(--ease) 5.7s forwards;
}
.support li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--muted-2);
  font-size: 14.5px;
}
.check {
  width: 19px; height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--moss);
  color: #101208;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 0 22px rgba(185, 201, 159, .2);
}

.lantern-note {
  align-self: end;
  justify-self: end;
  width: 220px;
  margin: 0 0 48px;
  color: rgba(255, 243, 226, .5);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 800;
}
html.intro .hero.is-playing .lantern-note {
  opacity: 0;
  transform: translateY(10px);
  animation: reveal .8s var(--ease) 5.9s forwards;
}
.lantern-note::before {
  content: "";
  display: block;
  width: 54px; height: 1px;
  margin-bottom: 13px;
  background: linear-gradient(90deg, var(--gold-2), transparent);
  box-shadow: 0 0 18px rgba(255, 217, 142, .45);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  translate: -50% 0;
  z-index: 12;
  color: rgba(255, 243, 226, .46);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.scroll-cue::after {
  content: "";
  width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--gold-2), transparent);
  animation: drop 1.8s ease-in-out infinite;
}

/* =================================================================
   SHARED SECTION FURNITURE
   ================================================================= */
.tag {
  margin: 0;
  color: var(--gold-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 800;
}
.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head .tag { margin-bottom: 16px; }
.section-head h2 {
  margin: 0;
  font-size: clamp(32px, 4.2vw, 60px);
  line-height: 1.0;
  letter-spacing: -.03em;
  text-wrap: balance;
  font-weight: 600;
}
.section-sub {
  margin: 18px 0 0;
  max-width: 640px;
  color: var(--muted);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
}

/* =================================================================
   PROBLEM
   ================================================================= */
.problem {
  position: relative;
  background:
    radial-gradient(1000px 700px at 60% 0%, rgba(150, 72, 20, .1), transparent 60%),
    linear-gradient(180deg, var(--black), #0c0704 50%, var(--black));
  border-top: 1px solid var(--line);
  padding: clamp(76px, 10vw, 140px) 0;
}
.problem-grid {
  display: grid;
  grid-template-columns: .55fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.problem .tag { padding-top: 10px; }
.problem h2 {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 66px);
  line-height: 1.0;
  letter-spacing: -.035em;
  text-wrap: balance;
  font-weight: 600;
}
.problem p {
  margin: 26px 0 0;
  max-width: 640px;
  color: var(--muted);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
}



/* =================================================================
   HIDDEN FIELD — cinematic video hidden-object reveal
   ================================================================= */
.hidden-field {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(1000px 640px at 50% 8%, rgba(228, 163, 75, .045), transparent 62%),
    linear-gradient(180deg, #010201, #030303 48%, #010201);
  border-top: 1px solid var(--line);
  padding: clamp(76px, 10vw, 148px) 0;
  --field-x: 50%;
  --field-y: 52%;
  --field-progress: 0;
}
.hidden-field-inner { position: relative; }
.hidden-field-head { max-width: 820px; }
.field-stage {
  position: relative;
  min-height: clamp(430px, 52vw, 720px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 217, 142, .13);
  border-radius: clamp(24px, 3vw, 38px);
  background: #010201;
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 226, .04),
    0 58px 150px rgba(0, 0, 0, .64),
    0 0 0 1px rgba(255, 217, 142, .025);
  isolation: isolate;
  cursor: default;
}
.field-stage::before,
.field-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.field-stage::before {
  z-index: 4;
  background:
    radial-gradient(720px 420px at 50% 14%, rgba(255, 224, 156, .055), transparent 58%),
    linear-gradient(180deg, rgba(1,2,1,.20), rgba(1,2,1,.60) 66%, rgba(1,2,1,.90));
  mix-blend-mode: multiply;
}
.field-stage::after {
  z-index: 8;
  background:
    radial-gradient(340px 260px at var(--field-x) var(--field-y), rgba(0,0,0,0) 0 21%, rgba(1,2,1,.38) 43%, rgba(1,2,1,.82) 72%, rgba(1,2,1,.93) 100%),
    linear-gradient(180deg, rgba(1,2,1,.50), rgba(1,2,1,.82));
  transition: opacity 4.2s cubic-bezier(.16, 1, .3, 1), background .32s linear;
}
.hidden-field.all-found .field-stage::before {
  opacity: .28;
  transition: opacity 6.2s cubic-bezier(.16, 1, .3, 1);
}
.hidden-field.all-found .field-stage::after {
  opacity: 0;
  animation: fieldPhotoOpen 6.4s cubic-bezier(.16, 1, .3, 1) both;
}
.hidden-field.all-found .field-video {
  filter: brightness(.76) saturate(.82) contrast(1.06);
  transition: filter 6.4s cubic-bezier(.16, 1, .3, 1), transform 6.4s cubic-bezier(.16, 1, .3, 1);
  transform: scale(1.006);
}
.hidden-field.all-found .field-video-grade {
  opacity: .40;
  transition: opacity 6.4s cubic-bezier(.16, 1, .3, 1);
}
.hidden-field.all-found .field-light {
  opacity: 0;
  transition-duration: 3.2s;
}
.hidden-field.all-found .field-embers {
  opacity: .22;
}
.hidden-field.all-found .robot-eyes {
  opacity: .38;
}
@keyframes fieldPhotoOpen {
  0% {
    opacity: 1;
    background:
      radial-gradient(260px 190px at var(--field-x) var(--field-y), rgba(0,0,0,0) 0 16%, rgba(1,2,1,.54) 38%, rgba(1,2,1,.90) 72%, rgba(1,2,1,.96) 100%),
      linear-gradient(180deg, rgba(1,2,1,.80), rgba(1,2,1,.94));
  }
  28% {
    opacity: .94;
    background:
      radial-gradient(380px 280px at var(--field-x) var(--field-y), rgba(0,0,0,0) 0 20%, rgba(1,2,1,.45) 45%, rgba(1,2,1,.84) 78%, rgba(1,2,1,.94) 100%),
      linear-gradient(180deg, rgba(1,2,1,.70), rgba(1,2,1,.90));
  }
  64% {
    opacity: .46;
    background:
      radial-gradient(760px 520px at var(--field-x) var(--field-y), rgba(0,0,0,0) 0 36%, rgba(1,2,1,.28) 62%, rgba(1,2,1,.68) 90%, rgba(1,2,1,.82) 100%),
      linear-gradient(180deg, rgba(1,2,1,.42), rgba(1,2,1,.72));
  }
  100% {
    opacity: 0;
    background:
      radial-gradient(1120px 760px at var(--field-x) var(--field-y), rgba(0,0,0,0) 0 56%, rgba(1,2,1,.16) 78%, rgba(1,2,1,.40) 100%),
      linear-gradient(180deg, rgba(1,2,1,.18), rgba(1,2,1,.42));
  }
}
.hidden-field:not(.field-active):not(.touch-reveal) .field-stage::after {
  background:
    radial-gradient(600px 360px at 54% 38%, rgba(0,0,0,.62), rgba(1,2,1,.88) 58%, rgba(1,2,1,.95)),
    linear-gradient(180deg, rgba(1,2,1,.72), rgba(1,2,1,.92));
}
.field-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.72) saturate(.78) contrast(1.08);
  transform: scale(1.012);
  transition: filter 4.2s cubic-bezier(.16, 1, .3, 1), transform 4.2s cubic-bezier(.16, 1, .3, 1);
}
.field-video-grade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(520px 360px at 68% 26%, rgba(255, 185, 75, .075), transparent 58%),
    radial-gradient(640px 420px at 16% 78%, rgba(255, 217, 142, .045), transparent 62%),
    linear-gradient(90deg, rgba(1,2,1,.32), transparent 22%, transparent 74%, rgba(1,2,1,.36)),
    linear-gradient(180deg, rgba(1,2,1,.08), rgba(1,2,1,.36));
  mix-blend-mode: soft-light;
}
.field-light {
  position: absolute;
  left: var(--field-x);
  top: var(--field-y);
  z-index: 9;
  width: clamp(180px, 24vw, 360px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  opacity: .96;
  background:
    radial-gradient(circle, rgba(255, 232, 174, .28) 0 8%, rgba(255, 190, 82, .15) 30%, rgba(217, 93, 25, .045) 56%, transparent 76%);
  filter: blur(2px) saturate(112%);
  mix-blend-mode: screen;
  transition: left .08s linear, top .08s linear, opacity .45s var(--ease);
}
.field-light::after {
  content: "";
  position: absolute;
  inset: 19%;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 241, 195, .20), transparent 64%);
}
.hidden-field:not(.field-active):not(.touch-reveal) .field-light { opacity: .06; }
.field-embers {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: .62;
}
.field-embers i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 226, 145, .9);
  box-shadow: 0 0 16px rgba(255, 217, 142, .74), 0 0 36px rgba(228, 163, 75, .24);
  opacity: .08;
  animation: fieldEmberDrift 8s ease-in-out infinite alternate;
}
.field-embers i:nth-child(1) { left: 12%; top: 30%; animation-delay: .2s; }
.field-embers i:nth-child(2) { left: 27%; top: 22%; animation-delay: 1.4s; }
.field-embers i:nth-child(3) { left: 45%; top: 34%; animation-delay: 2.3s; }
.field-embers i:nth-child(4) { left: 63%; top: 20%; animation-delay: .8s; }
.field-embers i:nth-child(5) { left: 83%; top: 29%; animation-delay: 1.9s; }
.field-embers i:nth-child(6) { left: 73%; top: 42%; animation-delay: 3.1s; }
.field-embers i:nth-child(7) { left: 21%; top: 62%; animation-delay: 2.7s; }
.field-embers i:nth-child(8) { left: 52%; top: 17%; animation-delay: 4.1s; }
@keyframes fieldEmberDrift {
  0% { transform: translate3d(-8px, 5px, 0); opacity: .06; }
  42% { opacity: .34; }
  100% { transform: translate3d(12px, -12px, 0); opacity: .16; }
}
.robot-hotspot {
  position: absolute;
  left: var(--rx);
  top: var(--ry);
  z-index: 11;
  width: calc(var(--radius, 72px) * 2);
  height: calc(var(--radius, 72px) * 2);
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
}
.robot-eyes {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(255, 225, 58, .90)) drop-shadow(0 0 24px rgba(255, 185, 34, .45));
  transition: opacity .22s var(--ease), transform .26s var(--ease), filter .26s var(--ease);
}
.robot-eyes i {
  position: absolute;
  left: calc(50% + var(--ex, 0px));
  top: calc(50% + var(--ey, 0px));
  width: var(--eye-w, 7px);
  height: var(--eye-h, 5px);
  translate: -50% -50%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 42% 38%, #fff7a8 0 12%, #ffe642 28%, #f3a51f 72%, #b75f13 100%);
  box-shadow:
    0 0 6px rgba(255, 239, 116, .95),
    0 0 16px rgba(255, 191, 37, .66),
    0 0 38px rgba(255, 152, 20, .26);
  animation: fieldEyeBlink 7.4s steps(1, end) infinite, foundEyeBreath 3.6s ease-in-out infinite alternate;
}
.robot-hotspot.single-eye .robot-eyes i:last-child { display: none; }
.robot-hotspot.is-near .robot-eyes,
.robot-hotspot.is-found .robot-eyes {
  opacity: 1;
  transform: scale(1.04);
}
.robot-hotspot.is-found:not(.is-near) .robot-eyes {
  opacity: .92;
  filter: drop-shadow(0 0 8px rgba(255, 225, 58, .88)) drop-shadow(0 0 20px rgba(255, 185, 34, .38));
}
@keyframes fieldEyeBlink {
  0%, 88%, 100% { scale: 1 1; opacity: 1; }
  91%, 93% { scale: 1 .15; opacity: .68; }
}
@keyframes foundEyeBreath {
  from { filter: brightness(.92); }
  to { filter: brightness(1.18); }
}
.debug-robots .robot-hotspot {
  outline: 1px solid rgba(255, 226, 145, .50);
  background: rgba(255, 190, 82, .09);
  pointer-events: none;
}
.debug-robots .robot-hotspot::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  padding: 3px 6px;
  border-radius: 999px;
  color: #ffe9ab;
  background: rgba(0,0,0,.72);
  font-size: 10px;
  white-space: nowrap;
}
.field-close {
  margin: 24px 0 0 auto;
  max-width: 620px;
  color: var(--gold-2);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.45vw, 34px);
  line-height: 1.15;
  text-align: right;
  text-wrap: balance;
}
@media (max-width: 760px) {
  .field-stage {
    min-height: 520px;
    aspect-ratio: auto;
  }
  .field-video { object-position: center; }
  .field-stage::after {
    background:
      radial-gradient(280px 240px at var(--field-x) var(--field-y), rgba(0,0,0,0) 0 20%, rgba(1,2,1,.42) 48%, rgba(1,2,1,.86) 78%, rgba(1,2,1,.94) 100%),
      linear-gradient(180deg, rgba(1,2,1,.55), rgba(1,2,1,.84));
  }
  .field-close { text-align: left; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .field-video { display: none; }
  .field-stage {
    background: url("assets/robot-lightup-poster.jpg") center / cover no-repeat;
  }
  .field-embers i,
  .robot-eyes i { animation: none; }
}

/* =================================================================
   WHAT LANTYRN HELPS WITH
   ================================================================= */
.help {
  background: var(--black);
  border-top: 1px solid var(--line);
  padding: clamp(72px, 9vw, 130px) 0;
}
.feature-stage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.feature-card {
  position: relative;
  overflow: hidden;
  padding: 30px 28px 32px;
  border-radius: 20px;
  border: 1px solid rgba(255, 217, 142, .1);
  background:
    linear-gradient(160deg, rgba(255, 217, 142, .045), rgba(10, 7, 5, .2));
  background-color: var(--panel);
  transition: transform .4s var(--ease), border-color .4s var(--ease),
    box-shadow .4s var(--ease);
}
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease);
  background: radial-gradient(420px 300px at var(--local-x, 50%) var(--local-y, 50%),
    rgba(255, 204, 112, .14), rgba(232, 103, 28, .045) 38%, transparent 72%);
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 217, 142, .28);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4);
}
.feature-card:hover::before { opacity: 1; }
.feature-lines {
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  opacity: .5;
}
.feature-lines span {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 217, 142, .5));
}
.feature-lines span:nth-child(1) { width: 34px; }
.feature-lines span:nth-child(2) { width: 22px; }
.feature-lines span:nth-child(3) { width: 44px; }
.feature-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: var(--gold-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 800;
}
.feature-kicker i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 14px rgba(255, 217, 142, .8);
}
.feature-card h3 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2vw, 27px);
  letter-spacing: -.02em;
  font-weight: 600;
}
.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 32ch;
}

/* =================================================================
   PROCESS
   ================================================================= */
.process {
  background:
    radial-gradient(900px 620px at 30% 0%, rgba(150, 72, 20, .08), transparent 58%),
    linear-gradient(180deg, var(--black), #0b0704 50%, var(--black));
  border-top: 1px solid var(--line);
  padding: clamp(72px, 9vw, 130px) 0;
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.step {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: clamp(18px, 4vw, 48px);
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-body { min-width: 0; }
.step-num {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 500;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 217, 142, .55);
  line-height: 1;
}
.step h3 {
  margin: 0 0 8px;
  font-size: clamp(20px, 2vw, 27px);
  letter-spacing: -.02em;
  font-weight: 600;
}
.step p {
  margin: 0;
  max-width: 640px;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.6;
}

/* =================================================================
   PHILOSOPHY
   ================================================================= */
.philosophy {
  position: relative;
  overflow: hidden;
  background: var(--black);
  border-top: 1px solid var(--line);
  padding: clamp(80px, 11vw, 150px) 0;
}
.philosophy-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(700px 500px at 50% 30%,
    rgba(228, 163, 75, .12), transparent 62%);
}
.philosophy-inner {
  position: relative;
  text-align: center;
  max-width: 880px;
}
.philosophy .tag { margin-bottom: 18px; }
.philosophy h2 {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 600;
}
.philosophy-lead {
  margin: 24px auto 0;
  max-width: 660px;
  color: var(--muted);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.62;
}
.tenets {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  text-align: left;
}
.tenets li {
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}
.tenets strong { color: var(--ink); font-weight: 700; display: block; margin-bottom: 4px; }

/* =================================================================
   FINAL CTA
   ================================================================= */
.final-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(180deg, var(--black), #100904);
  border-top: 1px solid var(--line);
  padding: clamp(90px, 12vw, 170px) 0;
}
.final-cta-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(800px 520px at 50% 60%,
    rgba(255, 186, 82, .16), rgba(168, 76, 22, .05) 40%, transparent 72%);
}
.final-cta-inner { position: relative; max-width: 860px; }
.final-cta h2 {
  margin: 0 0 36px;
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
  font-weight: 600;
}
.final-cta .actions {
  justify-content: center;
  animation: none;
  opacity: 1;
  transform: none;
}
.final-cta .primary { min-height: 54px; padding: 0 34px; font-size: 16px; }

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer {
  background: var(--black);
  border-top: 1px solid var(--line);
  padding: 40px 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-note { margin: 0; color: var(--muted); font-size: 14px; }
.footer-copy { margin: 0; color: rgba(255, 243, 226, .42); font-size: 13px; }

/* =================================================================
   SCROLL REVEAL (JS adds .is-visible)
   ================================================================= */
.reveal {
  opacity: 1;
  transform: none;
}
/* Only hide pre-reveal when JS is present to bring them back */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.feature-stage .reveal.is-visible:nth-child(2) { transition-delay: .06s; }
.feature-stage .reveal.is-visible:nth-child(3) { transition-delay: .12s; }
.feature-stage .reveal.is-visible:nth-child(5) { transition-delay: .06s; }
.feature-stage .reveal.is-visible:nth-child(6) { transition-delay: .12s; }

/* =================================================================
   KEYFRAMES
   ================================================================= */
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
@keyframes wordup { to { transform: translateY(0) rotate(0); } }
@keyframes drop {
  0% { scale: 1 0; transform-origin: top; opacity: 0; }
  30% { scale: 1 1; opacity: 1; }
  100% { scale: 1 0; transform-origin: bottom; opacity: 0; }
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 980px) {
  .links a:not(.nav-cta):not(.nav-login) { display: none; }
  /* keep the primary CTA visible on mobile — it's the conversion action */
  .content {
    grid-template-columns: 1fr;
    align-content: center;
    min-height: calc(100svh - 76px);
  }
  .lantern-note { display: none; }
  .hero-video video { object-position: 78% center; }
  .hero::before {
    background:
      radial-gradient(620px 460px at 64% 46%, rgba(255, 186, 82, .14), transparent 62%),
      linear-gradient(180deg, rgba(2, 3, 2, .5), rgba(2, 3, 2, .2) 30%, rgba(2, 3, 2, .9) 100%),
      linear-gradient(90deg, rgba(2, 3, 2, .9), rgba(2, 3, 2, .55) 60%, rgba(2, 3, 2, .7));
  }
  .problem-grid { grid-template-columns: 1fr; }
  .feature-stage { grid-template-columns: 1fr 1fr; }
  .tenets { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .field-stage { min-height: 620px; }
  .field-light { width: 330px; }
  
.bot-scout .bot-head { border-radius: 34% 34% 30% 30%; }
.bot-round .bot-head { border-radius: 44% 44% 38% 38%; width: 92%; }
.bot-round .bot-body { width: 58%; height: 28%; }
.bot-tall { z-index: 9; }
.bot-tall .bot-head { height: 50%; border-radius: 22% 22% 28% 28%; }
.bot-tall .bot-body { width: 60%; height: 46%; border-radius: 16% 16% 24% 24%; }
.bot-cube { z-index: 4; }
.bot-cube .bot-head { border-radius: 16% 16% 22% 22%; }
.bot-cube .bot-body { width: 86%; border-radius: 10% 10% 22% 22%; }
.bot-peek { z-index: 12; }
.bot-peek .bot-body, .bot-peek .bot-antenna { display: none; }
.bot-peek .bot-head { height: 62%; border-radius: 45% 45% 34% 34%; }
.robot-bot.is-found:not(.is-near) {
  opacity: 1;
}
.robot-bot.is-found:not(.is-near) .bot-head,
.robot-bot.is-found:not(.is-near) .bot-body,
.robot-bot.is-found:not(.is-near) .bot-antenna {
  opacity: .18;
}
.robot-bot.is-found:not(.is-near) .bot-head i {
  opacity: 1;
  background: rgba(255, 224, 50, .96);
  box-shadow: 0 0 12px rgba(255, 226, 64, .95), 0 0 34px rgba(255, 199, 47, .55), 0 0 70px rgba(255, 186, 42, .20);
}

.field-close { text-align: left; margin-left: 0; }
  .feature-stage { grid-template-columns: 1fr; }
  .step { grid-template-columns: 56px minmax(0, 1fr); gap: 18px; }
}

/* Guided-light interaction is desktop-only: never render embers or the custom
   cursor on touch / coarse-pointer devices, regardless of the has-pointer class. */
@media (hover: none), (pointer: coarse) {
  .pointer-sparks { display: none !important; }
  body.has-pointer,
  body.has-pointer a,
  body.has-pointer button { cursor: auto !important; }
}

@media (max-width: 600px) {
  .nav { min-height: 64px; }
  .brand span { display: none; }
  .links { gap: 8px; }
  .nav-login { font-size: 13px; min-height: 40px; padding: 0 12px; }
  .nav-cta { font-size: 13.5px; padding: 0 14px; min-height: 42px; }
  .content { min-height: calc(100svh - 64px); padding: 92px 0 64px; }
  .eyebrow { font-size: 10px; line-height: 1.45; letter-spacing: .12em; }
  .hero h1 { font-size: clamp(40px, 12.5vw, 64px); }
  .lead { font-size: 16.5px; }
  .actions a { width: 100%; }
  .scroll-cue { display: none; }
}

/* =================================================================
   NEW HERO CLIP INTEGRATION — Clip 2 preview
   This override lets the uploaded 10.1s video carry the cinematic arc.
   The old object-position choreography was too subtle for a centered source.
   ================================================================= */
.hero-video {
  inset: -2%;
  background: #020302;
}
.hero-video video {
  object-position: center center;
  opacity: .9;
  filter: saturate(1.08) contrast(1.12) brightness(.86);
  transform: scale(1.045)
    translate3d(calc((var(--mx) - 50%) * -.01), calc((var(--my) - 50%) * -.008), 0);
}
html.intro .hero.is-playing .hero-video {
  animation: newHeroStage 6.2s var(--ease) forwards;
}
html.intro .hero.is-playing .hero-video video {
  animation: newHeroClipReveal 6.2s var(--ease) forwards;
}
@keyframes newHeroStage {
  0% { transform: scale(1.08); }
  54% { transform: scale(1.055); }
  100% { transform: scale(1.02) translateX(1.2vw); }
}
@keyframes newHeroClipReveal {
  0% { opacity: 0; filter: saturate(1.05) contrast(1.2) brightness(.08); }
  14% { opacity: .34; filter: saturate(1.08) contrast(1.18) brightness(.22); }
  34% { opacity: .72; filter: saturate(1.12) contrast(1.16) brightness(.62); }
  58% { opacity: .94; filter: saturate(1.12) contrast(1.14) brightness(.9); }
  100% { opacity: .9; filter: saturate(1.08) contrast(1.12) brightness(.86); }
}
.hero::before {
  background:
    radial-gradient(780px 540px at 74% 50%, rgba(255, 189, 83, .18), rgba(169, 78, 24, .055) 35%, transparent 72%),
    linear-gradient(90deg, rgba(2, 3, 2, .99) 0%, rgba(2, 3, 2, .95) 26%, rgba(2, 3, 2, .72) 43%, rgba(2, 3, 2, .26) 64%, rgba(2, 3, 2, .72) 100%),
    linear-gradient(180deg, rgba(2, 3, 2, .62) 0%, rgba(2, 3, 2, .18) 34%, rgba(2, 3, 2, .9) 100%);
}
.final-warmth {
  opacity: .24;
  background: radial-gradient(circle at 75% 50%, rgba(255, 196, 88, .2), rgba(169, 74, 22, .08) 30%, transparent 68%);
}
.cursor-glass {
  z-index: 30;
  background: radial-gradient(540px 390px at var(--mx) var(--my),
    rgba(255, 205, 118, .12), rgba(229, 94, 24, .045) 38%, transparent 76%);
}
.pointer-sparks { z-index: 31; filter: drop-shadow(0 0 14px rgba(255, 178, 66, .34)); }
body.has-pointer .pointer-sparks { opacity: .95; }

@media (max-width: 900px) {
  .hero-video { inset: 0; }
  .hero-video video {
    object-position: 61% center;
    opacity: .76;
    filter: saturate(1.04) contrast(1.14) brightness(.72);
  }
  .hero::before {
    background:
      radial-gradient(680px 520px at 62% 32%, rgba(255, 189, 83, .14), transparent 62%),
      linear-gradient(180deg, rgba(2, 3, 2, .78) 0%, rgba(2, 3, 2, .52) 34%, rgba(2, 3, 2, .96) 100%),
      linear-gradient(90deg, rgba(2, 3, 2, .92) 0%, rgba(2, 3, 2, .55) 54%, rgba(2, 3, 2, .72) 100%);
  }
}

/* =================================================================
   REDUCED MOTION — calm static version
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .lead, .actions, .support, .lantern-note { opacity: 1; transform: none; }
  .word > span { transform: none; }
  .hero-video video { transform: none; }
  .reveal { opacity: 1; transform: none; }

  .hidden-field { --field-progress: 1 !important; --field-x: 62% !important; --field-y: 52% !important; }
  .robot-bot { opacity: .82; transform: none; }
  .field-light { opacity: .42; }
  .spark-field, .scroll-cue::after, .cursor-glass, .pointer-sparks { display: none; }
  /* native cursor for reduced-motion users */
  body, body a, body button { cursor: auto !important; }
}


/* Next.js embedded intake preservation layer */
.lantyrn-intake-bridge {
  position: relative;
  padding: 110px 0;
  background:
    radial-gradient(720px 420px at 18% 8%, rgba(228, 163, 75, .14), transparent 64%),
    linear-gradient(180deg, rgba(255, 217, 142, .025), rgba(2, 3, 2, .58));
  border-top: 1px solid rgba(255, 217, 142, .09);
  border-bottom: 1px solid rgba(255, 217, 142, .09);
}
.lantyrn-intake-bridge .intake-bridge-grid {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(360px, 1.14fr);
  gap: 42px;
  align-items: start;
}
.lantyrn-intake-bridge .intake-bridge-copy { position: sticky; top: 112px; }
.lantyrn-intake-bridge h2 {
  margin: 0 0 20px;
  font-size: clamp(42px, 5vw, 72px);
  line-height: .96;
  letter-spacing: -.06em;
}
.lantyrn-intake-bridge p, .lantyrn-intake-bridge li { color: var(--muted-2); line-height: 1.72; }
.lantyrn-intake-bridge ul { margin: 26px 0 0; padding: 0; display: grid; gap: 13px; list-style: none; }
.lantyrn-intake-bridge li { display: flex; gap: 10px; }
.lantyrn-intake-bridge li::before { content: "✓"; color: var(--gold-2); font-weight: 900; }
.lantyrn-intake-panel {
  border: 1px solid rgba(255, 217, 142, .15);
  border-radius: 28px;
  padding: clamp(20px, 3vw, 32px);
  background:
    linear-gradient(180deg, rgba(255, 243, 226, .055), rgba(255, 243, 226, .024)),
    rgba(10, 7, 5, .78);
  box-shadow: 0 28px 90px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.lantyrn-intake-panel form input,
.lantyrn-intake-panel form textarea,
.lantyrn-intake-panel form select {
  background: rgba(255, 243, 226, .055) !important;
  border-color: rgba(255, 217, 142, .18) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
}
.lantyrn-intake-panel form label { color: var(--gold-2) !important; }
.lantyrn-intake-panel form button[type="submit"] {
  background: linear-gradient(135deg, var(--gold-2), var(--gold)) !important;
  color: #201608 !important;
  border-radius: 999px !important;
}
.lantyrn-seo-support { padding: 86px 0 40px; }
.lantyrn-seo-support .seo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}
.lantyrn-seo-support article {
  border: 1px solid rgba(255, 217, 142, .12);
  border-radius: 20px;
  padding: 22px;
  background: rgba(255, 243, 226, .035);
}
.lantyrn-seo-support h3 { margin: 0 0 10px; }
.lantyrn-seo-support p { color: var(--muted-2); line-height: 1.68; margin: 0; }
@media (max-width: 900px) {
  .lantyrn-intake-bridge .intake-bridge-grid,
  .lantyrn-seo-support .seo-grid { grid-template-columns: 1fr; }
  .lantyrn-intake-bridge .intake-bridge-copy { position: static; }
}