/* ============================================================
   Bridge & Bow — Homepage 3D/cinematic layer
   Loaded ONLY on index.html, after style.css. Scoped to body.home-3d
   so nothing here can leak into or break the other pages' styling.
   ============================================================ */

:root{
  --h3d-navy:#173769; --h3d-navy-2:#234C82; --h3d-navy-deep:#0B1C36;
  --h3d-brass:#B9862F; --h3d-brass-light:#F3D591; --h3d-brass-dark:#6E4F17;
  --h3d-paper-dim:#E1E9F0; --h3d-glass:rgba(255,255,255,.06); --h3d-glass-line:rgba(243,213,145,.22);
}

body.home-3d{ background:var(--h3d-navy-deep); color:var(--paper); overflow-x:hidden; cursor:default; }
.home-3d a:focus-visible, .home-3d button:focus-visible, .home-3d input:focus-visible{
  outline:2px solid var(--h3d-brass-light); outline-offset:2px; border-radius:2px;
}

/* film grain texture */
body.home-3d::before{
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.home-3d .foil{
  background:linear-gradient(100deg, var(--h3d-brass-dark) 15%, var(--h3d-brass-light) 42%, #fff 48%, var(--h3d-brass-light) 54%, var(--h3d-brass-dark) 85%);
  background-size:240% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:h3d-shimmer 8s linear infinite;
}
@keyframes h3d-shimmer{to{background-position:-240% 0;}}

/* ---- header override: transparent/glass instead of the site's normal
   light sticky header, only on this page ---- */
.home-3d header.site{background:transparent; border-bottom:none; box-shadow:none; top:2px;}
.home-3d header.site.scrolled{background:rgba(11,28,54,.82); backdrop-filter:blur(14px) saturate(140%); box-shadow:0 1px 0 var(--h3d-glass-line);}
.home-3d header.site .brand-word, .home-3d header.site .brand-tag{color:var(--paper);}
.home-3d header.site .brand-tag{color:var(--h3d-brass-light);}
.home-3d nav.primary a{color:var(--h3d-paper-dim);}
.home-3d nav.primary a:hover, .home-3d nav.primary a[aria-current="true"]{color:var(--h3d-brass-light);}
.home-3d nav.primary a[aria-current="true"]::after{background:var(--h3d-brass-light);}
.home-3d .menu-toggle .bar{background:var(--paper);}
@media (max-width:900px){ .home-3d nav.primary{background:var(--h3d-navy-deep); border-color:var(--h3d-glass-line);} }

#loader{
  position:fixed; inset:0; z-index:300; background:var(--h3d-navy-deep);
  display:flex; align-items:center; justify-content:center; transition:opacity .6s ease, visibility .6s;
}
#loader.hide{opacity:0; visibility:hidden;}
#loader svg{width:64px; height:64px; animation:h3d-loaderPulse 1.4s ease-in-out infinite;}
@keyframes h3d-loaderPulse{0%,100%{opacity:.4; transform:scale(.92);} 50%{opacity:1; transform:scale(1);}}

#progress{position:fixed; top:0; left:0; height:2px; background:linear-gradient(90deg,var(--h3d-brass-dark),var(--h3d-brass-light)); z-index:100; width:0%;}

.scene{perspective:1500px;}

/* ---- HERO ---- */
.hero3d{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:130px 20px 90px;
  background:
    radial-gradient(ellipse 1000px 560px at 50% 8%, rgba(185,134,47,.18), transparent 62%),
    radial-gradient(ellipse 900px 1100px at 50% 105%, rgba(35,76,130,.55), transparent 68%);
}
.hero3d .hero-eyebrow{font-family:'Fragment Mono',monospace; font-size:13px; letter-spacing:.26em; color:var(--h3d-brass-light); overflow:hidden;}
.reveal-line{display:inline-block; transform:translateY(110%); animation:h3d-riseIn .9s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes h3d-riseIn{to{transform:translateY(0);}}
.hero3d h1{font-family:'Libre Caslon Display',serif; font-weight:400; font-size:clamp(38px,7.2vw,84px); line-height:1.06; max-width:16ch; margin-top:22px; overflow:hidden; color:var(--paper);}
.hero3d h1 .reveal-line{transform:translateY(115%);}
.hero3d .lede{font-size:clamp(16px,1.8vw,19px); color:var(--h3d-paper-dim); max-width:44ch; margin:28px auto 0; line-height:1.75; opacity:0; animation:h3d-fadeUp 1s ease .9s forwards;}
@keyframes h3d-fadeUp{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:30px; opacity:0; animation:h3d-fadeUp 1s ease 1s forwards;}
.btn-ghost{
  display:inline-flex; align-items:center; font-family:'Fragment Mono',monospace; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; padding:15px 26px; border-radius:999px; border:1.5px solid rgba(255,255,255,.35);
  color:var(--paper); text-decoration:none; transition:background .2s, border-color .2s;
}
.btn-ghost:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.6);}

.scroll-cue{margin-top:56px; display:flex; flex-direction:column; align-items:center; gap:9px; opacity:.7;}
.scroll-cue .line{width:1px; height:38px; background:linear-gradient(var(--h3d-brass-light),transparent); animation:h3d-cue 2.2s ease-in-out infinite;}
@keyframes h3d-cue{0%{opacity:0; transform:scaleY(0); transform-origin:top;} 50%{opacity:1; transform:scaleY(1);} 100%{opacity:0; transform:scaleY(0); transform-origin:bottom;}}
.scroll-cue span{font-family:'Fragment Mono',monospace; font-size:11px; letter-spacing:.22em; color:var(--h3d-brass-light);}

/* ---- VOYAGE ---- */
.voyage{padding:40px 0 60px;}
.voyage-track{position:relative; max-width:900px; margin:0 auto;}
.voyage-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.voyage-path{fill:none; stroke:var(--h3d-glass-line); stroke-width:1.5; stroke-dasharray:2 10; stroke-linecap:round;}
.voyage-ship{position:absolute; width:40px; height:40px; margin:-20px 0 0 -20px; will-change:transform; filter:drop-shadow(0 10px 20px rgba(0,0,0,.5)); z-index:3;}
.stops{position:relative; z-index:2;}
.stop{
  width:min(560px, 78%); margin-left:auto; padding:38px 8px 38px clamp(50px,10vw,90px);
  opacity:0; transform:translateY(36px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.stop.in{opacity:1; transform:translateY(0);}
.stop-eyebrow{font-family:'Fragment Mono',monospace; font-size:12px; letter-spacing:.2em; color:var(--h3d-brass-light);}
.stop h2{font-size:clamp(23px,3.2vw,30px); margin-top:10px; color:var(--paper); font-family:'Newsreader',serif;}
.stop p{color:var(--h3d-paper-dim); font-size:16px; line-height:1.75; margin-top:12px;}

/* ---- STATS ---- */
.stats-band{padding:60px 0 40px;}
.stat-grid3d{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--h3d-glass-line); border:1px solid var(--h3d-glass-line); border-radius:18px; overflow:hidden;}
@media (max-width:760px){.stat-grid3d{grid-template-columns:repeat(2,1fr);}}
.stat-cell{
  background:linear-gradient(165deg, rgba(35,76,130,.55), rgba(11,28,54,.9)); padding:34px 24px;
  transform-style:preserve-3d; transition:transform .15s ease-out, opacity .7s ease, translate .7s ease;
  opacity:0; translate:0 24px;
}
.stat-cell.in{opacity:1; translate:0 0;}
.stat-num3d{font-family:'Libre Caslon Display',serif; font-size:clamp(30px,4vw,42px); color:var(--h3d-brass-light);}
.stat-label3d{font-size:14px; color:var(--h3d-paper-dim); margin-top:8px; line-height:1.5;}

/* ---- PILLARS (tilt cards, now real links) ---- */
.plan-pillars{padding:100px 0 40px;}
.pillars-head{text-align:center; margin-bottom:56px;}
.pillars-head .stop-eyebrow{display:block; margin-bottom:10px;}
.pillars-head h2{font-size:clamp(26px,4vw,40px); color:var(--paper); font-family:'Newsreader',serif;}
.pillar-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
@media (max-width:820px){.pillar-grid{grid-template-columns:1fr; max-width:420px; margin:0 auto;}}
.tilt-card{
  display:block; text-decoration:none;
  background:linear-gradient(160deg, var(--h3d-glass), rgba(11,28,54,.75)); backdrop-filter:blur(6px);
  border:1px solid var(--h3d-glass-line); border-radius:18px; padding:36px 30px;
  transform-style:preserve-3d; transition:transform .12s ease-out, box-shadow .3s, border-color .3s, opacity .7s ease, translate .7s ease;
  box-shadow:0 20px 44px rgba(0,0,0,.28); opacity:0; translate:0 24px;
}
.tilt-card.in{opacity:1; translate:0 0;}
.tilt-card:hover{box-shadow:0 34px 70px rgba(0,0,0,.42); border-color:rgba(243,213,145,.45);}
.tilt-card .icon{width:38px; height:38px; margin-bottom:22px; transform:translateZ(26px);}
.tilt-card h3{font-size:19px; transform:translateZ(22px); color:var(--paper); font-family:'Newsreader',serif;}
.tilt-card p{font-size:15px; color:var(--h3d-paper-dim); line-height:1.7; margin-top:10px; transform:translateZ(16px);}

/* ---- LATEST GUIDES — real content grid, replaces the old device mockup ---- */
.guides{padding:40px 0 100px;}
.guide-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:900px){.guide-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.guide-grid{grid-template-columns:1fr;}}
.guide-card{
  display:block; text-decoration:none;
  background:linear-gradient(160deg, var(--h3d-glass), rgba(11,28,54,.7)); backdrop-filter:blur(6px);
  border:1px solid var(--h3d-glass-line); border-radius:14px; padding:24px 22px;
  transition:transform .2s, box-shadow .3s, border-color .3s;
}
.guide-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.35); border-color:rgba(243,213,145,.4);}
.guide-tag{font-family:'Fragment Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--h3d-brass-light); margin-bottom:10px;}
.guide-card h3{font-size:16px; color:var(--paper); font-family:'Newsreader',serif; line-height:1.3;}
.guide-card p{font-size:13px; color:var(--h3d-paper-dim); margin-top:8px; line-height:1.6;}

/* ---- NEWSLETTER (real form, dark themed) ---- */
.cta-band3d{padding:90px 0 100px; text-align:center; background:radial-gradient(ellipse 900px 560px at 50% 100%, rgba(185,134,47,.16), transparent 70%);}
.cta-band-inner{max-width:560px; margin:0 auto;}
.cta-band3d h2{font-family:'Libre Caslon Display',serif; font-weight:400; font-size:clamp(26px,4vw,36px); color:var(--paper);}
.cta-band3d p{color:var(--h3d-paper-dim); font-size:15px; margin:14px 0 26px;}
.cta-band3d .cta-form{display:flex; gap:0; max-width:420px; margin:0 auto;}
.cta-band3d .cta-form input{
  font-family:'Hanken Grotesk',sans-serif; font-size:16px; padding:13px 16px; border:1.5px solid rgba(255,255,255,.35);
  border-right:none; background:transparent; color:var(--paper); flex:1; min-width:0; border-radius:8px 0 0 8px;
}
.cta-band3d .cta-form input::placeholder{color:#8FA3B4;}
.cta-band3d .cta-form button{
  font-family:'Fragment Mono',monospace; font-size:12px; text-transform:uppercase; background:var(--h3d-brass);
  border:1.5px solid var(--h3d-brass); color:#221602; padding:0 22px; cursor:pointer; border-radius:0 8px 8px 0; font-weight:700;
}
@media (max-width:480px){
  .cta-band3d .cta-form{flex-direction:column;}
  .cta-band3d .cta-form input{border-right:1.5px solid rgba(255,255,255,.35); border-bottom:none; border-radius:8px 8px 0 0;}
  .cta-band3d .cta-form button{border-radius:0 0 8px 8px; padding:12px;}
}

/* ---- Gold button (shared by hero + used elsewhere on this page) ---- */
.btn-gold{
  display:inline-flex; align-items:center; gap:10px; font-family:'Fragment Mono',monospace; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; padding:16px 30px; border-radius:999px; cursor:pointer; border:none;
  background:linear-gradient(100deg,var(--h3d-brass-dark),var(--h3d-brass-light),var(--h3d-brass-dark)); background-size:240% 100%;
  color:#1A1204; font-weight:700; text-decoration:none; box-shadow:0 14px 30px rgba(0,0,0,.35); transition:background-position .5s, transform .2s, box-shadow .2s;
}
.btn-gold:hover{background-position:100% 0; transform:translateY(-2px); box-shadow:0 18px 36px rgba(0,0,0,.4);}
.btn-gold:active{transform:translateY(0);}

/* ---- FOOTER FIX: must stay explicitly light — otherwise it would
   inherit this page's dark body background and become illegible,
   since the real footer's text colors are tuned for a light page. ---- */
.home-3d footer{background:var(--paper);}

@media (prefers-reduced-motion:reduce){
  .home-3d .badge, .home-3d .voyage-ship, .reveal-line, .home-3d .foil{animation:none !important; transition:none !important;}
  .reveal-line{transform:none !important;}
  .stop, .stat-cell, .tilt-card{opacity:1 !important; translate:0 !important; transform:none !important;}
  .home-3d .foil{background:var(--h3d-brass-light); -webkit-text-fill-color:initial; color:var(--h3d-brass-light);}
  #loader{display:none;}
}