/* ============================================================
   Nav City Surf — Home cinematic heroes + motion layer
   Three switchable hero directions + parallax / scroll motion.
   ============================================================ */

/* ---- variant visibility (driven by body[data-hero]) ---- */
.hero-v{display:none;}
body[data-hero="immersive"]   .hero-immersive   {display:block;}
body[data-hero="typographic"] .hero-typographic {display:block;}
body[data-hero="split"]       .hero-split       {display:block;}

/* shared: line-mask reveal for headlines.
   Base state is VISIBLE; the reveal is a keyframe animation (forwards-filled)
   so content is never stuck hidden if motion can't run. */
.lines{display:block;}
.line{display:block;overflow:hidden;}
.line > i{display:block;font-style:normal;}
@keyframes lineRise{from{transform:translateY(112%);}to{transform:translateY(0);}}
body.hero-ready .playing .line > i{animation:lineRise .95s cubic-bezier(.16,.84,.34,1) both;}
body.hero-ready .playing .line:nth-child(1) > i{animation-delay:.05s;}
body.hero-ready .playing .line:nth-child(2) > i{animation-delay:.16s;}
body.hero-ready .playing .line:nth-child(3) > i{animation-delay:.27s;}
body.hero-ready .playing .line:nth-child(4) > i{animation-delay:.38s;}

/* shared fade-rise atoms inside heroes (same robust pattern) */
.h-rise{opacity:1;transform:none;}
@keyframes hRise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
body.hero-ready .playing .h-rise{animation:hRise .8s cubic-bezier(.16,.84,.34,1) both;}
body.hero-ready .playing .h-rise.d1{animation-delay:.34s;}
body.hero-ready .playing .h-rise.d2{animation-delay:.46s;}
body.hero-ready .playing .h-rise.d3{animation-delay:.58s;}

/* scroll cue */
.scroll-cue{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);}
.scroll-cue .bar{position:relative;width:1px;height:46px;background:var(--line);overflow:hidden;}
.scroll-cue .bar::after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(-100%);animation:cueRun 2.1s cubic-bezier(.7,0,.3,1) infinite;}
@keyframes cueRun{0%{transform:translateY(-100%);}45%{transform:translateY(0);}100%{transform:translateY(100%);}}

/* ============================================================
   A · IMMERSIVE — full-bleed photo, type overlaid, deep parallax
   ============================================================ */
.hero-immersive{position:relative;height:calc(100vh - 74px);min-height:600px;max-height:920px;overflow:hidden;background:#101010;}
.hero-immersive .px-wrap{position:absolute;inset:-12% 0;will-change:transform;}
.hero-immersive image-slot{--is-bg:#1a1a1a;--is-fg:#5a5a5a;width:100%;height:100%;filter:grayscale(1) contrast(1.04) brightness(.9);}
.hero-immersive .scrim{position:absolute;inset:0;background:
   linear-gradient(180deg,rgba(8,8,8,.46) 0%,rgba(8,8,8,0) 26%,rgba(8,8,8,0) 44%,rgba(8,8,8,.82) 100%);
   z-index:2;pointer-events:none;}
.hero-immersive .vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
   box-shadow:inset 0 0 200px 40px rgba(0,0,0,.45);}
.hero-immersive .im-inner{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;}
.hero-immersive .im-inner .wrap{width:100%;padding-bottom:64px;}
.hero-immersive .eyebrow{color:rgba(255,255,255,.78);}
.hero-immersive h1{font-family:var(--display);font-weight:800;color:#fff;
   font-size:clamp(52px,8.4vw,128px);line-height:.9;letter-spacing:-.025em;margin:18px 0 0;text-wrap:balance;}
.hero-immersive .lede{max-width:520px;font-size:19px;color:rgba(255,255,255,.82);margin-top:22px;}
.hero-immersive .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.hero-immersive .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff;}
.hero-immersive .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;}
.hero-immersive .im-top{position:absolute;top:0;left:0;right:0;z-index:3;}
.hero-immersive .im-top .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:30px;color:rgba(255,255,255,.7);font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;}
/* Issue #2 — company name more prominent than the "Est." tag beside it. */
.hero-immersive .im-top .wrap span:first-child{font-size:30px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.96);}
.hero-immersive .scroll-cue{color:rgba(255,255,255,.72);}
.hero-immersive .scroll-cue .bar{background:rgba(255,255,255,.28);}
.hero-immersive .scroll-cue .bar::after{background:#fff;}

/* ============================================================
   B · TYPOGRAPHIC — oversized kinetic statement, drifting word
   ============================================================ */
.hero-typographic{position:relative;overflow:hidden;padding:118px 0 84px;background:var(--paper);}
.hero-typographic .ghost{position:absolute;top:-2%;right:-4%;z-index:0;font-family:var(--display);font-weight:800;
   font-size:min(40vw,560px);line-height:.7;letter-spacing:-.04em;color:transparent;
   -webkit-text-stroke:1.5px var(--line);text-stroke:1.5px var(--line);pointer-events:none;user-select:none;white-space:nowrap;will-change:transform;}
.hero-typographic .ty-inner{position:relative;z-index:2;}
.hero-typographic .eyebrow{margin-bottom:24px;}
.hero-typographic h1{font-family:var(--display);font-weight:800;font-size:clamp(56px,12.6vw,196px);
   line-height:.82;letter-spacing:-.035em;text-transform:none;}
.hero-typographic h1 .accent{color:var(--accent);}
.hero-typographic .ty-foot{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;margin-top:44px;}
.hero-typographic .lede{max-width:430px;font-size:19px;color:var(--ink-2);}
.hero-typographic .ty-media{position:relative;}
.hero-typographic .ty-media image-slot{width:100%;height:230px;}
.hero-typographic .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.hero-typographic .ty-cue{margin-top:54px;}

/* ============================================================
   C · SPLIT EDITORIAL — type left, tall board photo right
   ============================================================ */
.hero-split{padding:72px 0 40px;}
.hero-split .sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.hero-split .eyebrow{margin-bottom:18px;}
.hero-split h1{font-family:var(--display);font-weight:800;font-size:clamp(44px,5.6vw,92px);
   line-height:.92;letter-spacing:-.025em;text-wrap:balance;}
.hero-split .lede{max-width:480px;font-size:19px;color:var(--ink-2);margin-top:24px;}
.hero-split .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.hero-split .sp-meta{display:flex;gap:40px;margin-top:46px;border-top:1px solid var(--line);padding-top:26px;}
.hero-split .sp-meta .mk{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.01em;line-height:1;}
.hero-split .sp-meta .ml{font-size:13px;color:var(--ink-2);margin-top:8px;max-width:16ch;}
.hero-split .sp-media{position:relative;height:min(86vh,760px);border-radius:20px;overflow:hidden;background:var(--paper-2);}
.hero-split .sp-media .px-wrap{position:absolute;inset:-12% 0;will-change:transform;}
.hero-split .sp-media image-slot{width:100%;height:100%;filter:grayscale(1) contrast(1.03);}
.hero-split .sp-tag{position:absolute;left:20px;bottom:20px;z-index:3;background:rgba(246,245,241,.92);
   backdrop-filter:blur(6px);padding:11px 18px;border-radius:999px;font-family:var(--display);font-weight:600;
   font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);}

/* ============================================================
   MOTION LAYER — page-wide parallax + depth on imagery
   ============================================================ */
body[data-parallax="off"] [data-px]{transform:none !important;}

/* feature / gallery / cta images get an inner parallax wrapper */
.px-frame{position:relative;overflow:hidden;}
.px-frame .px-wrap{position:absolute;inset:-10% 0;will-change:transform;}
.px-frame image-slot{width:100%;height:100%;}
.cta.px-frame{height:540px;}
@media(max-width:560px){.cta.px-frame{height:420px;}}

/* marquee speed hook */
body[data-marquee="off"] .strip-track{animation:none;}

/* photo treatment: color vs editorial mono */
body[data-photo="color"] image-slot{filter:none !important;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  /* immersive hero is a navy panel (no bg photo element) — stack it cleanly,
     no negative-margin overlay hack that collides with the nav */
  .hero-immersive{height:auto;min-height:0;max-height:none;padding:0;}
  .hero-immersive .im-top{position:static;}
  .hero-immersive .im-top .wrap{padding-top:24px;padding-bottom:4px;}
  .hero-immersive .im-inner{position:static;}
  .hero-immersive .im-inner .wrap{padding:18px 0 52px;}
  .hero-typographic{padding:84px 0 64px;}
  .hero-typographic .ty-foot{grid-template-columns:1fr;gap:30px;}
  .hero-typographic .ghost{display:none;}
  .hero-split .sp-grid{grid-template-columns:1fr;gap:34px;}
  .hero-split .sp-media{height:64vh;}
}
@media(prefers-reduced-motion:reduce){
  .line > i{transform:none;transition:none;}
  .h-rise{opacity:1;transform:none;transition:none;}
  .scroll-cue .bar::after{animation:none;}
  [data-px]{transform:none !important;}
}

/* ============================================================
   BLUE LAYER — Gulf-blue accent + deep ocean-navy surfaces.
   Home-scoped so other pages keep the pure mono treatment.
   --accent is also driven live by the Tweaks "Accent" control.
   ============================================================ */
body{
  --accent:#1f6fb2;     /* Gulf blue — also live-driven by Tweaks */
  --navy:#0e2b41;       /* deep ocean — dark surfaces */
  --navy-2:#16415f;     /* lifted navy — gradients / borders */
  --blue-soft:#e7eef5;  /* pale wash for tint chips */
}

/* --- Primary actions go blue --- */
body .btn-dark{background:var(--accent);color:#fff;}
body .btn-dark:hover{background:var(--navy-2);opacity:1;}
body .shop-btn{background:var(--accent);}
body .shop-btn:hover{background:var(--navy-2);opacity:1;}

/* --- Accent details --- */
body .sec-head .num{color:var(--accent);}
body .feature .f-label{color:var(--accent);}
body .arrow{border-color:var(--accent);}
body .arrow:hover{color:var(--accent);}
body nav.links a.active{color:var(--accent);}
body nav.links a.active::after{background:var(--accent);}
.hero-split .sp-meta .mk{color:var(--accent);}
.hero-split .sp-tag{color:var(--accent);}
.stats .sv{color:var(--navy);}
.wave svg path{stroke:var(--accent) !important;}

/* manifesto: tint the lead statement toward navy ink */
.manifesto p.big{color:var(--navy);}

/* --- Dark surfaces become deep ocean navy instead of near-black --- */
.hero-immersive{background:var(--navy);}
.hero-immersive .scrim{background:
   linear-gradient(180deg,rgba(8,22,34,.5) 0%,rgba(8,22,34,0) 26%,rgba(8,22,34,0) 44%,rgba(8,22,34,.86) 100%);}
.story{background:var(--navy);}
.story .eyebrow{color:#8fb3cc;}
.story p{color:#cbdcea;}
.cta .overlay{background:linear-gradient(180deg,rgba(10,30,46,.18),rgba(8,24,38,.8));}

/* split-hero media gets a soft blue ground behind the photo slot */
.hero-split .sp-media{background:var(--blue-soft);}

/* immersive primary button: blue on the dark hero */
.hero-immersive .btn-light{background:#fff;color:var(--navy);}
.hero-immersive .btn-light:hover{background:var(--accent);color:#fff;opacity:1;}

@media(prefers-reduced-motion:no-preference){}