/* ─── gogee gogee — design system & base ──────────────────────────────────────
   Pan Am visual system, enriched: cream + cobalt + saffron, Fraunces display,
   JetBrains Mono kickers. Added depth (layered light, paper texture, multi-layer
   shadows), a custom cursor, an intro curtain, and a cinematic motion layer.
   Motion lives in main.js (GSAP + Lenis); initial hidden states live under `.js`
   so a no-JS visitor still sees everything. */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

:root{
  /* core palette (unchanged brand) */
  --cream:#F4EFDD; --paper:#FAF6E8; --shade:#E8E0C4;
  --cobalt:#0B3A6F; --cobalt-2:#0A3162; --cobalt-deep:#072649;
  --ink:#0A1A2F; --sky:#5BA0D0; --saffron:#F2A93B; --gold:#E8B04B; --red:#C8323C;

  /* type */
  --serif:'Fraunces', Georgia, serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;

  /* layout + motion */
  --maxw:1240px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-soft:cubic-bezier(0.33,1,0.68,1);

  /* depth — cobalt-tinted, layered shadows */
  --sh-sm:0 1px 2px rgba(11,58,111,.08), 0 4px 10px -4px rgba(11,58,111,.16);
  --sh-md:0 6px 14px -8px rgba(11,58,111,.28), 0 18px 38px -22px rgba(11,58,111,.4);
  --sh-lg:0 14px 30px -16px rgba(11,58,111,.34), 0 40px 80px -40px rgba(11,58,111,.55);
  --glow-gold:0 0 0 1px rgba(242,169,59,.35), 0 16px 40px -14px rgba(242,169,59,.5);
}

html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; overflow-x:hidden; width:100%; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html.js{ scroll-behavior:auto; }

body{
  font-family:var(--serif); background:var(--cream); color:var(--ink);
  overflow-x:hidden; line-height:1.5; font-optical-sizing:auto;
  width:100%; max-width:100%; position:relative;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; }
::selection{ background:var(--saffron); color:var(--cobalt-deep); }

/* hide the native cursor only when our custom one is active */
body.has-cursor, body.has-cursor a, body.has-cursor button, body.has-cursor input{ cursor:none; }

/* ─── film grain + ambient light ──────────────────────────────────────────── */
.grain{
  position:fixed; inset:-50%; z-index:9998; pointer-events:none; opacity:0.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 12% -6%, rgba(91,160,208,.16), transparent 60%),
    radial-gradient(48vw 48vw at 96% 8%, rgba(242,169,59,.12), transparent 62%);
  opacity:.9;
}

/* ─── Beacon peeking from the side (user Rive), glides with scroll ─────────── */
.peeker{
  position:fixed; right:0; top:12vh; z-index:35;
  width:clamp(240px,24vw,420px); aspect-ratio:1;
  transform:translateX(42%); transform-origin:right center; pointer-events:none;
  filter:drop-shadow(0 26px 44px rgba(7,38,73,.42)); will-change:top, transform;
  transition:transform .65s var(--ease), filter .65s ease;
}
.peeker.is-pop{ transform:translateX(8%) scale(1.16); filter:drop-shadow(0 0 32px rgba(242,169,59,.4)) drop-shadow(0 26px 44px rgba(7,38,73,.42)); }
.peeker canvas{ width:100%; height:100%; display:block; }
@media (max-width:980px){ .peeker{ display:none; } }

/* ─── intro curtain ───────────────────────────────────────────────────────── */
.intro{
  position:fixed; inset:0; z-index:10000; background:var(--cobalt-deep); color:var(--cream);
  display:grid; place-items:center; gap:0;
}
.intro__inner{ text-align:center; display:grid; gap:.5rem; }
.intro__mark{ font-family:var(--serif); font-weight:900; font-size:clamp(2rem,6vw,3.4rem); letter-spacing:-.02em;
  opacity:0; transform:translateY(14px); }
.intro__dot{ color:var(--saffron); }
.intro__sub{ font-family:var(--mono); font-size:.74rem; letter-spacing:.32em; text-transform:uppercase; color:rgba(244,239,221,.6);
  opacity:0; transform:translateY(10px); }
.intro__bar{ position:absolute; left:50%; bottom:18%; transform:translateX(-50%); width:min(220px,40vw); height:2px; background:rgba(244,239,221,.16); border-radius:2px; overflow:hidden; }
.intro__bar span{ display:block; width:0%; height:100%; background:var(--saffron); }
.intro.is-done{ pointer-events:none; }

/* ─── custom cursor ───────────────────────────────────────────────────────── */
.cursor{ position:fixed; left:0; top:0; z-index:10001; pointer-events:none; mix-blend-mode:normal; opacity:0;
  transform:translate(-50%,-50%); will-change:transform; }
.cursor__dot{ position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%; background:var(--cobalt);
  transform:translate(-50%,-50%); transition:width .25s var(--ease), height .25s var(--ease), background .25s; }
.cursor__ring{ position:absolute; left:50%; top:50%; width:30px; height:30px; border-radius:50%;
  border:1.5px solid rgba(11,58,111,.5); transform:translate(-50%,-50%) scale(1);
  transition:width .3s var(--ease), height .3s var(--ease), border-color .3s, transform .3s var(--ease), background .3s; }
.cursor.is-hover .cursor__ring{ width:52px; height:52px; border-color:var(--saffron); background:rgba(242,169,59,.1); }
.cursor.is-hover .cursor__dot{ width:0; height:0; }
.cursor.is-down .cursor__ring{ transform:translate(-50%,-50%) scale(.82); }
.cursor.on-dark .cursor__dot{ background:var(--cream); }
.cursor.on-dark .cursor__ring{ border-color:rgba(244,239,221,.6); }

/* ─── scroll progress ─────────────────────────────────────────────────────── */
.progress{ position:fixed; top:0; left:0; height:3px; width:0%; z-index:9999;
  background:linear-gradient(90deg, var(--sky), var(--saffron)); box-shadow:0 0 12px rgba(242,169,59,.5); }

/* ─── shared bits ─────────────────────────────────────────────────────────── */
.kicker{
  font-family:var(--mono); font-weight:800; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cobalt); opacity:.85;
}
.kicker--gold{ color:var(--saffron); opacity:1; }
.kicker--anim{ display:block; }
.kicker__star{ color:var(--saffron); display:inline-block; margin-right:.45em; animation:spin 9s linear infinite; }
.kicker__sep{ opacity:.5; margin:0 .3em; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.btn{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono);
  font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.95em 1.5em; border-radius:999px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .3s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
  will-change:transform; position:relative; overflow:hidden;
}
.btn span{ transition:transform .3s var(--ease); position:relative; z-index:2; }
.btn:hover span{ transform:translateX(4px); }
.btn--primary{ background:var(--cobalt); color:var(--cream); box-shadow:var(--sh-md); }
.btn--primary:hover{ background:var(--ink); box-shadow:var(--sh-lg); }
.btn--primary::after{ content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(244,239,221,.22) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .6s var(--ease); }
.btn--primary:hover::after{ transform:translateX(120%); }
.btn--ghost{ background:transparent; color:var(--cobalt); border-color:rgba(11,58,111,.3); }
.btn--ghost:hover{ border-color:var(--cobalt); background:rgba(11,58,111,.05); }
.btn--mini{ padding:.7em 1.1em; font-size:.72rem; background:var(--saffron); color:var(--cobalt); box-shadow:0 8px 20px -10px rgba(242,169,59,.7); }
.btn--mini:hover{ background:var(--ink); color:var(--cream); }

/* ─── Nav ─────────────────────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.1rem clamp(1.1rem,4vw,2.6rem);
  transition:background .4s, backdrop-filter .4s, padding .4s, box-shadow .4s;
}
.nav.is-stuck{
  background:rgba(244,239,221,.78); backdrop-filter:blur(16px) saturate(1.3);
  padding-top:.7rem; padding-bottom:.7rem; box-shadow:0 1px 0 rgba(11,58,111,.1), 0 10px 30px -22px rgba(11,58,111,.5);
}
.nav__brand{ font-family:var(--serif); font-weight:900; font-size:1.4rem; letter-spacing:-.02em; color:var(--cobalt); }
.nav__dot{ color:var(--saffron); }
.nav__links{ display:flex; gap:1.8rem; }
.nav__links a{
  font-family:var(--mono); font-size:.78rem; font-weight:500; letter-spacing:.04em;
  color:var(--cobalt); opacity:.75; transition:opacity .2s; position:relative;
}
.nav__links a:hover{ opacity:1; }
.nav__links a::after{ content:''; position:absolute; left:0; bottom:-5px; height:1.5px; width:0; background:var(--saffron); transition:width .3s var(--ease); }
.nav__links a:hover::after{ width:100%; }

/* ─── Hero ────────────────────────────────────────────────────────────────── */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:7rem clamp(1.1rem,4vw,2.6rem) 4rem; overflow:hidden; z-index:1; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.orb{ position:absolute; border-radius:50%; filter:blur(64px); opacity:.5; }
.orb--1{ width:46vw; height:46vw; left:-12vw; top:-10vw; background:radial-gradient(circle at 30% 30%, var(--sky), transparent 70%); }
.orb--2{ width:38vw; height:38vw; right:-8vw; bottom:-12vw; background:radial-gradient(circle at 60% 40%, var(--saffron), transparent 68%); opacity:.4; }
.orb--3{ width:26vw; height:26vw; right:24vw; top:-6vw; background:radial-gradient(circle at 50% 50%, rgba(242,169,59,.5), transparent 70%); opacity:.3; }
.hero__rule{ position:absolute; left:0; right:0; top:62%; height:1px; background:repeating-linear-gradient(90deg, rgba(11,58,111,.22) 0 8px, transparent 8px 18px); }
.hero__grid-lines{ position:absolute; inset:0; opacity:.4;
  background-image:linear-gradient(rgba(11,58,111,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(11,58,111,.04) 1px, transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent); }

.hero__grid{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; align-items:center; }
.hero__copy{ max-width:none; }
.hero__title{ font-weight:900; letter-spacing:-.035em; line-height:.96; font-size:clamp(2.9rem,6.8vw,5.5rem); margin:1.1rem 0 1.4rem; }
.hero__title .line{ display:block; overflow:hidden; padding:0 .16em .08em; margin:0 -.16em; }
.hero__title .line__in{ display:block; }
.hero__title em{ color:var(--saffron); position:relative; }
.hero__sub{ font-size:clamp(1rem,1.5vw,1.18rem); color:var(--cobalt); max-width:42ch; line-height:1.55; }
.hero__sub strong{ font-weight:700; color:var(--ink); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin:1.9rem 0 1.3rem; }
.hero__meta{ display:flex; align-items:center; gap:.7rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--cobalt); opacity:.72; }
.hero__meta strong{ color:var(--ink); }
.hero__dots{ display:inline-flex; gap:3px; }
.hero__dots i{ width:6px; height:6px; border-radius:50%; background:var(--saffron); display:block; opacity:.8; }
.hero__dots i:nth-child(2){ background:var(--sky); }
.hero__dots i:nth-child(3){ background:var(--cobalt); }

.hero__art{ position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.hero__spot{ position:absolute; width:120%; height:120%; left:50%; top:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle at var(--mx,50%) var(--my,42%), rgba(255,255,255,.6), rgba(255,255,255,0) 42%); pointer-events:none; z-index:0; }

/* passport composition */
.passport{ position:relative; width:min(94%,420px); aspect-ratio:.78; z-index:2; transform-style:preserve-3d;
  transition:transform .25s var(--ease); }
.passport__page{
  position:absolute; inset:0; border-radius:14px; background:
    linear-gradient(135deg, #FBF4DE, #F1E7C8);
  border:1px solid rgba(11,58,111,.14); box-shadow:var(--sh-lg); overflow:hidden;
  padding:1.4rem 1.4rem 1.2rem;
}
.passport__sheen{ position:absolute; inset:0; border-radius:14px; z-index:5; pointer-events:none;
  background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);
  opacity:.6; mix-blend-mode:screen; }
.passport__guilloche{ position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    repeating-radial-gradient(circle at 78% 84%, rgba(11,58,111,.07) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(45deg, rgba(11,58,111,.04) 0 2px, transparent 2px 9px); }
.passport__head{ display:flex; align-items:center; gap:.7rem; position:relative; z-index:2; }
.passport__crest{ width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--cobalt); color:var(--saffron); font-size:1rem; box-shadow:inset 0 0 0 2px rgba(242,169,59,.4); }
.passport__id strong{ display:block; font-weight:900; font-size:1.06rem; letter-spacing:-.01em; color:var(--cobalt-deep); }
.passport__id em{ font-family:var(--mono); font-style:normal; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cobalt); opacity:.7; }
.passport__field{ position:relative; z-index:2; margin-top:1rem; padding-bottom:.5rem; border-bottom:1px dashed rgba(11,58,111,.22); }
.passport__lbl{ display:block; font-family:var(--mono); font-size:.54rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cobalt); opacity:.6; }
.passport__val{ display:block; font-weight:600; font-size:.92rem; color:var(--ink); margin-top:.15rem; }
.passport__pressed{ position:absolute; width:39%; z-index:3; filter:drop-shadow(0 10px 16px rgba(11,58,111,.3)); }
.passport__pressed--1{ right:5%; top:30%; transform:rotate(9deg); }
.passport__pressed--2{ right:30%; bottom:6%; transform:rotate(-7deg); }
.entry-stamp{ position:absolute; left:7%; bottom:9%; z-index:4; width:108px; height:108px; border-radius:50%;
  border:2px solid rgba(200,50,60,.6); color:rgba(200,50,60,.78); display:grid; place-content:center; text-align:center; gap:.15rem;
  transform:rotate(-13deg); font-family:var(--mono); mix-blend-mode:multiply; }
.entry-stamp::before{ content:''; position:absolute; inset:7px; border-radius:50%; border:1px solid rgba(200,50,60,.45); }
.entry-stamp__top{ font-size:.5rem; font-weight:800; letter-spacing:.14em; }
.entry-stamp__mid{ font-family:var(--serif); font-weight:900; font-size:.92rem; letter-spacing:.02em; }
.entry-stamp__bot{ font-size:.46rem; font-weight:700; letter-spacing:.18em; }

.float-stamp{ position:absolute; width:clamp(82px,12vw,128px); filter:drop-shadow(0 16px 28px rgba(11,58,111,.32)); z-index:4; }
.float-stamp--a{ top:-2%; right:-1%; }
.float-stamp--b{ bottom:1%; left:-3%; }

.boarding-pass{ position:absolute; right:-2%; bottom:14%; z-index:1; width:150px; background:var(--cobalt); color:var(--cream);
  border-radius:12px; padding:.7rem .85rem .9rem; box-shadow:var(--sh-md); transform:rotate(6deg); }
.boarding-pass__seg{ display:flex; align-items:center; justify-content:space-between; font-family:var(--serif); font-weight:900; font-size:1.2rem; }
.boarding-pass__plane{ font-size:.7rem; opacity:.9; }
.boarding-pass__meta{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.5rem; letter-spacing:.1em; opacity:.7; margin-top:.3rem; }
.boarding-pass__perf{ margin-top:.5rem; border-top:1.5px dashed rgba(244,239,221,.4); }

.scroll-cue{ position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); z-index:3;
  width:26px; height:42px; border:1.5px solid rgba(11,58,111,.4); border-radius:14px; display:flex; justify-content:center; padding-top:7px; }
.scroll-cue span{ width:4px; height:8px; border-radius:2px; background:var(--cobalt); animation:cue 1.5s var(--ease) infinite; }
@keyframes cue{ 0%{opacity:0;transform:translateY(-3px)} 40%{opacity:1} 80%{opacity:0;transform:translateY(10px)} 100%{opacity:0} }

/* ─── Marquee ─────────────────────────────────────────────────────────────── */
.marquee{ position:relative; background:var(--cobalt); color:var(--cream); padding:1.05rem 0; overflow:hidden; border-top:1px solid rgba(244,239,221,.12); border-bottom:1px solid rgba(244,239,221,.12); z-index:1; }
.marquee__track{ display:flex; white-space:nowrap; width:max-content; will-change:transform; }
.marquee__track span{ font-family:var(--mono); font-weight:500; font-size:1rem; letter-spacing:.16em; padding-right:1rem; opacity:.92; }
.marquee__fade{ position:absolute; top:0; bottom:0; width:14%; z-index:2; pointer-events:none; }
.marquee__fade--l{ left:0; background:linear-gradient(90deg, var(--cobalt), transparent); }
.marquee__fade--r{ right:0; background:linear-gradient(270deg, var(--cobalt), transparent); }

/* ─── Statement ───────────────────────────────────────────────────────────── */
.statement{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:clamp(6rem,12vw,11rem) clamp(1.1rem,5vw,3rem); }
.statement .kicker{ display:block; margin-bottom:1.5rem; }
.statement__big{ font-weight:600; font-size:clamp(1.7rem,4vw,3.3rem); line-height:1.18; letter-spacing:-.02em; }
.statement__big em{ color:var(--saffron); font-weight:900; }

/* ─── reveal initial states (only when JS is active) ──────────────────────── */
.js [data-reveal]{ opacity:0; transform:translateY(22px); }
.js [data-reveal-line]{ transform:translateY(105%); }
.js [data-reveal-art]{ opacity:0; transform:translateY(40px) scale(.96); }
.js [data-reveal-words]{ opacity:0; }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:880px){
  .nav__links{ display:none; }
  .hero{ min-height:auto; padding-top:6.5rem; }
  .hero__grid{ grid-template-columns:1fr; gap:1.5rem; text-align:left; }
  .hero__art{ order:-1; max-width:380px; margin:0 auto; }
  .hero__copy{ max-width:none; }
}
@media (max-width:520px){
  .hero__title{ font-size:clamp(2.6rem,12vw,3.4rem); }
  .float-stamp{ width:74px; }
  .boarding-pass{ display:none; }
}

/* ─── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .js [data-reveal],.js [data-reveal-line],.js [data-reveal-art],.js [data-reveal-words]{ opacity:1 !important; transform:none !important; }
  .intro{ display:none !important; }
  .cursor{ display:none !important; }
}