/* The Map of Being Found. Night page, one film behind everything, one line
   of words at a time. Palette borrowed from the film itself: deep blue black
   and the warm gold of the light. */

:root{
  --night:#050912;
  --ink:#f2efe6;
  --ink-2:#a6adc0;
  --gold:#e7c07a;
  --gold-deep:#c9a15a;
  --display:"Cormorant Garamond",Georgia,serif;
  --body:"Instrument Sans",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--night);scroll-behavior:auto}
body{
  background:var(--night); color:var(--ink); font-family:var(--body);
  font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}

/* ---- the film behind everything ---- */
.veil{ position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--night) }
.veil__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block }
.veil video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.veil::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 50%, rgba(5,9,18,0) 30%, rgba(5,9,18,.55) 100%);
  pointer-events:none;
}

main{ position:relative; z-index:1 }

/* ---- the opening ---- */

.open__brand{
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.6rem;
}
.open__line{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.9rem,4.6vw,3.4rem); line-height:1.2; max-width:20ch;
  margin:0 auto; text-shadow:0 2px 30px rgba(5,9,18,.8);
}
.open__hint{
  margin-top:3.4rem; font-size:.68rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-2);
}

/* ---- the chapters: one stage, the lines take turns ---- */
/* a stage is as tall as the number of lines it holds; one line is about a
   screen and a half of scroll */
.chapters{ position:relative; height:250vh }
.chapters--4{ height:640vh }
.chapters__hold{
  position:sticky; top:0; height:100svh;
  display:grid; place-items:center; text-align:center; padding:0 1.6rem;
  perspective:900px; perspective-origin:50% 50%;
}
/* the words carry their own darkness or the bright scenes swallow them */
.chapters__hold::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(64% 44% at 50% 50%, rgba(3,6,14,.90) 0%, rgba(3,6,14,.66) 46%, rgba(3,6,14,0) 80%);
  opacity:0; transition:opacity .5s ease;
}
.chapters.is-lit .chapters__hold::before{ opacity:1 }
.ch__line{
  grid-area:1/1; max-width:26ch; margin:0 auto;
  transform-style:preserve-3d; backface-visibility:hidden;
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.6rem,3.2vw,2.7rem); line-height:1.3;
  opacity:0; will-change:opacity,transform; pointer-events:none;
  text-shadow:0 2px 30px rgba(5,9,18,.92), 0 0 58px rgba(3,6,14,.7);
}
.ch__line b{ color:var(--gold); font-weight:500 }
.ch__kick{
  display:block; font-family:var(--body); font-weight:500;
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); opacity:.85; margin-bottom:1.5rem;
}

/* ---- the ask ---- */
.ask{
  min-height:100svh; display:grid; place-content:center; text-align:center;
  padding:6rem 1.5rem;
}
.ask h2{
  font-family:var(--display); font-weight:500;
  font-size:clamp(2rem,5vw,3.6rem); line-height:1.15; max-width:18ch;
  margin:0 auto 1.6rem;
}
.ask p{ color:var(--ink-2); max-width:34ch; margin:0 auto 2.6rem }
.btn{
  display:inline-block; padding:1.05rem 2.2rem; border-radius:999px;
  background:var(--gold); color:#1a1407; font-weight:600; font-size:.98rem;
  text-decoration:none; border:1px solid var(--gold-deep);
  box-shadow:0 14px 44px -16px rgba(231,192,122,.7);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 20px 54px -16px rgba(231,192,122,.85) }
.ask__note{ margin-top:1.6rem; font-size:.84rem; color:var(--ink-2) }

/* ---- the sign ---- */
footer{
  position:relative; z-index:1; text-align:center;
  padding:3.4rem 1.5rem 4rem; color:var(--ink-2); font-size:.82rem;
  background:linear-gradient(180deg, rgba(5,9,18,0), rgba(5,9,18,.92) 40%);
}
footer a{ color:var(--gold-deep); text-decoration:none }
footer a:hover{ color:var(--gold) }

@media (max-width:860px){
  .chapters{ height:220vh }
  .chapters--4{ height:560vh }
  .veil::after{ background:radial-gradient(130% 90% at 50% 50%, rgba(5,9,18,0) 20%, rgba(5,9,18,.65) 100%) }
}
@media (prefers-reduced-motion:reduce){
  .ch__line{ transition:none }
}

/* the language switch, quiet in the corner */
.lang{
  position:fixed; top:1rem; right:1.2rem; z-index:5;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
}
.lang a{ color:var(--ink-2); text-decoration:none; padding:.4rem .7rem;
  border:1px solid rgba(231,192,122,.28); border-radius:999px;
  background:rgba(5,9,18,.45); backdrop-filter:blur(6px); }
.lang a:hover{ color:var(--gold) }

/* ---- the finale: the metaphor becomes a real town ---- */
.finale{ position:relative; height:380vh; opacity:0 }
.finale__hold{
  position:sticky; top:0; height:100svh; overflow:hidden;
  perspective:900px; perspective-origin:50% 50%;
  /* the flight's own first frame sits underneath, so nothing behind the canvas
     is ever black, it is simply the same picture */
  background:var(--night) url("../img/poster.webp?v=2") center/cover no-repeat;
  -webkit-transform:translateZ(0);  /* keeps the sticky layer honest on iOS */
  transform:translateZ(0);
}
.finale__film{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; background:var(--night);
}
.finale__word{
  position:absolute; inset:0; text-align:center;
  padding:0 1.6rem; display:grid; place-items:center;
  transform-style:preserve-3d; pointer-events:none;
}
.finale__word p{
  grid-area:1/1; margin:0 auto; max-width:22ch; opacity:0;
  font-size:clamp(1.9rem,3.6vw,3.1rem); line-height:1.24;
  color:#fff;
  text-shadow:0 2px 26px rgba(3,6,14,.95), 0 0 60px rgba(3,6,14,.75);
  will-change:opacity,transform,filter; backface-visibility:hidden;
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.3rem,2.6vw,2.1rem); line-height:1.35;
  text-shadow:0 2px 30px rgba(5,9,18,.9);
  background:radial-gradient(70% 120% at 50% 50%, rgba(3,6,14,.72), rgba(3,6,14,0));
  padding:1.2rem 1.6rem;
}
.finale__word b{ color:var(--gold); font-weight:500 }
/* the light the town is born inside */
.bloom{
  position:fixed; inset:0; z-index:3; pointer-events:none; opacity:0;
  background:radial-gradient(38% 38% at 50% 52%, rgba(255,244,220,.95) 0%, rgba(231,192,122,.55) 35%, rgba(231,192,122,0) 72%);
  will-change:opacity,transform;
}
@media (max-width:860px){
  .finale{ height:320vh }
  .bloom{ display:none }
}

/* the headline rides the first beat of the flight, then gets out of the way */
.flight__intro{
  position:absolute; inset:0; z-index:2;
  display:grid; place-content:center; text-align:center; padding:0 1.5rem;
  will-change:opacity,transform;
  background:radial-gradient(60% 45% at 50% 50%, rgba(3,6,14,.72), rgba(3,6,14,0) 75%);
}
.flight__intro .open__line{ text-shadow:0 2px 34px rgba(3,6,14,.9) }

/* ---- the aero treatment, measured off Zera's flythrough ---- */
:root{ --display-2:"Cormorant Garamond",Georgia,serif }
.flight__intro .open__brand{
  font-family:var(--body); font-size:.68rem; letter-spacing:.34em;
  text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:2.2rem;
}
.flight__intro .open__line{
  font-family:var(--display-2); font-weight:500;
  font-size:clamp(2.6rem,7.4vw,7rem); line-height:1.04; letter-spacing:.055em;
  color:#fff; max-width:16ch; margin:0 auto;
  text-shadow:0 4px 60px rgba(3,6,14,.75);
}
.flight__intro .open__hint{
  margin-top:2.6rem; font-family:var(--body); font-size:.72rem;
  letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.62);
}
/* their grain, over everything, so the film never looks like clean stock */
body::after{
  content:""; position:fixed; inset:0; z-index:40; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* the flight words in the same voice as the headline */
.finale__word p{ font-family:var(--display-2); font-weight:400; letter-spacing:.03em }

/* quiet mode: the chapters sit in the dark, the only film is the flight */
.veil.is-quiet video, .veil.is-quiet .veil__canvas{ display:none }
.veil.is-quiet{
  background:
    radial-gradient(120% 80% at 50% 0%, #0b1226 0%, #070b18 45%, #05070f 100%);
}
.veil.is-quiet::after{
  background:radial-gradient(80% 60% at 50% 40%, rgba(231,192,122,.05), rgba(5,9,18,0) 70%);
}

/* ---- the pill nav, so the tours and the guides are one tap away ---- */
.pill{
  position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:50;
  display:flex; align-items:center; gap:1.6rem;
  padding:.6rem .7rem .6rem 1.3rem; border-radius:999px;
  background:rgba(5,9,18,.42); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14);
}
.pill__brand{ font-family:var(--display); font-size:1rem; letter-spacing:.01em; color:#fff }
.pill__links{ display:flex; gap:1.4rem; font-size:.82rem; color:rgba(255,255,255,.72) }
.pill__links a{ text-decoration:none; transition:color .2s ease }
.pill__links a:hover{ color:#fff }
.pill__cta{
  background:#fff; color:#15100a; padding:.5rem 1.1rem; border-radius:999px;
  font-size:.78rem; font-weight:500; text-decoration:none; white-space:nowrap;
  transition:background .2s ease;
}
.pill__cta:hover{ background:rgba(255,255,255,.88) }
/* the nav steps aside once the visitor is reading: it shrinks and softens
   instead of covering a card */
.pill.is-away{ opacity:.42; transform:translateX(-50%) scale(.92) }
.pill:hover{ opacity:1 !important; transform:translateX(-50%) scale(1) }
.pill{ transition:opacity .4s ease, transform .4s ease }
@media (max-width:860px){
  /* the phone keeps the menu: brand and audit on top, the sections underneath */
  .pill{
    flex-wrap:wrap; justify-content:center; gap:.5rem .9rem;
    padding:.55rem .8rem .6rem; width:calc(100vw - 1.4rem); border-radius:22px;
  }
  .pill__brand{ font-size:.88rem; order:1 }
  .pill__cta{ order:2; font-size:.72rem; padding:.42rem .9rem }
  .pill__links{
    order:3; flex-basis:100%; display:flex; justify-content:center; gap:1rem;
    font-size:.72rem; padding-top:.15rem;
  }
}
.lang{ top:auto; bottom:1.1rem; right:1.2rem }
[id]{ scroll-margin-top:90px }

/* the flight painted from 4K stills */
.flight__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block;
  background:var(--night); object-fit:cover; -webkit-backface-visibility:hidden }
/* the words carry their own soft darkness, scaled with them in 3D */
.finale__word p{
  padding:1.4rem 2rem;
  background:radial-gradient(58% 130% at 50% 50%, rgba(3,6,14,.86), rgba(3,6,14,.45) 55%, rgba(3,6,14,0) 78%);
}

/* the veil film: one continuous background, scrubbed like the hero. The poster
   behind the canvas covers the moment before the first frames land. */
.vfilm{
  position:absolute; inset:0; overflow:hidden; opacity:0;
  background-size:cover; background-position:center;
  transition:opacity .35s ease;
}
.vfilm__canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  transform-origin:50% 50%; will-change:transform;
}
.veil.is-quiet .vfilm{ z-index:0 }
.veil.is-quiet::after{
  background:linear-gradient(180deg, rgba(5,9,18,.55), rgba(5,9,18,.35) 40%, rgba(5,9,18,.72));
}

/* ---- the mixed reality: an example on a screen, not a second hero ---- */
.mix{ position:relative; height:420vh }
.mix__hold{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr; align-content:center; gap:1.6rem;
  padding:12vh clamp(1.2rem,5vw,4rem) 8vh;
}
.mix__head{ text-align:center; max-width:52rem; margin:0 auto }
.mix__head .proof__kick{ color:var(--gold) }
.mix__head .proof__note{ margin:0 auto; max-width:52ch }
.mix__screen{
  position:relative; width:min(1180px,100%); margin:0 auto; align-self:center;
  aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#05070f;
  border:1px solid rgba(231,192,122,.4);
  box-shadow:0 0 50px rgba(231,192,122,.16), 0 40px 110px -50px #000;
}
.mix__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block }
@media (max-width:860px){
  .mix{ height:360vh }
  .mix__hold{ padding:14vh 1.1rem 6vh; gap:1.1rem }
}

/* iOS: a pinch changes the visual viewport, and a sticky stage can tear away
   from it. Holding the stage at the real viewport height and keeping its own
   background means the worst case is a black edge, never someone else's photo. */
@media (max-width:860px){
  /* only the hero needs an opaque stage (the pinch fix). The story stages must
     stay transparent or they cover the photographs behind them. */
  .finale__hold{ background:var(--night) url("../img/poster.webp?v=2") center/cover no-repeat }
  .chapters__hold{ background:transparent }
  .veil{ background:var(--night) }
}
/* the page scrolls, it does not zoom */
html, body{ touch-action:pan-y; -ms-touch-action:pan-y }