/* ---------- Hero: 3D drone shot ---------- */
.hero { position: relative; height: 100vh; height: 100svh; background: var(--navy); }
.hero-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: linear-gradient(to bottom, #8d9ea4 0%, #c9c8c3 40%, #d8d1ca 47%, #8a9a9c 50%, #4c6169 58%, #1b323d 100%);
  touch-action: pan-y;
}
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s ease; }
.hero-sticky.ready #scene { opacity: 1; }

/* Cinematic grade: soft letterbox fades + a shade that deepens behind the logo */
.hero-sticky::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(4,16,24,.55), transparent 22%, transparent 68%, rgba(4,16,24,.65)),
    radial-gradient(ellipse at center, transparent 55%, rgba(4,16,24,.45) 100%);
}
.hero-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(6,22,34,.25), rgba(6,22,34,.72) 75%);
}

/* Legibility pools: a soft, blurred navy shade tucked behind each block of text.
   Each one lives inside its text block, so it moves and fades with it (hero.js drives
   the parent's opacity/transform) and the scene stays bright everywhere else.
   Tuned so cream and gold text clear WCAG 1.4.3 even over the white hull, the haze and the sun. */
.hero-intro::before, .hud::before, .scroll-hint::before, .hero-copy::before, .logo-wrap::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: var(--pool-inset, -2.5rem);
  background: rgba(4,16,24,var(--pool, .7));
  filter: blur(var(--pool-blur, 32px));
}

/* Opening title (bottom left, fades as you start scrolling) */
.hero-intro {
  position: absolute; z-index: 3; left: clamp(1rem, 5vw, 4rem); bottom: clamp(7.5rem, 17svh, 11rem);
  max-width: min(36rem, 88vw); color: var(--cream); will-change: opacity, transform;
  --pool: .58; --pool-inset: -3rem -3.5rem -3rem -3rem; --pool-blur: 40px;
}
.hero-eyebrow {
  margin: 0 0 1rem; font: 700 .75rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--cream); text-shadow: 0 1px 10px rgba(4,16,24,.5);
  display: flex; align-items: center; gap: .8rem;
}
.hero-eyebrow::before { content: ""; width: 2.2rem; height: 1px; background: var(--gold); }
.hero-title {
  font-size: clamp(2.4rem, 6.4vw, 5.2rem); line-height: .98; margin: 0; letter-spacing: -.01em; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
}
.hero-title em, .hero-copy h1 em { font-style: italic; color: var(--gold); padding-right: .06em; }
.hero-intro > * { opacity: 0; transform: translateY(24px); animation: heroIn 1.2s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-intro > :nth-child(2) { animation-delay: .25s; }
.hero-intro::before { opacity: 0; animation: poolIn 1.4s ease forwards; }
@keyframes poolIn { to { opacity: 1; } }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* Drone HUD (bottom right) */
.hud {
  position: absolute; z-index: 3; right: clamp(1rem, 4vw, 3rem); bottom: clamp(1.4rem, 5svh, 3rem);
  width: 14rem; color: rgba(234,243,249,.85); font: 600 .7rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  display: grid; gap: .7rem; will-change: opacity; opacity: 0;
  --pool: .6; --pool-inset: -1.6rem -1.8rem; --pool-blur: 24px;
}
.hud-row { display: flex; align-items: center; gap: .6rem; }
.hud-data { justify-content: space-between; letter-spacing: .14em; color: rgba(234,243,249,.6); font-variant-numeric: tabular-nums; }
.hud-data b { color: var(--cream); font-weight: 700; }
.hud-dot { width: 7px; height: 7px; border-radius: 50%; background: #e2564b; box-shadow: 0 0 0 0 rgba(226,86,75,.6); animation: rec 1.6s infinite; }
@keyframes rec { 70% { box-shadow: 0 0 0 7px rgba(226,86,75,0); } 100% { box-shadow: 0 0 0 0 rgba(226,86,75,0); } }
.hud-bar { height: 2px; background: rgba(234,243,249,.2); border-radius: 2px; overflow: hidden; }
.hud-bar i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }

/* Logo lockup */
.logo-wrap {
  position: absolute; z-index: 3; left: 50%; top: 38%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: clamp(.6rem, 1.6vh, 1rem);
  color: var(--cream); pointer-events: none; width: min(92vw, 40rem);
  --l: 0; --pool: .5; --pool-inset: -2rem -4rem; --pool-blur: 64px;
}
.logo-wrap::before { opacity: min(1, calc(var(--l) * 2)); } /* shade lands ahead of the letters, so the half-formed logo is already readable */
.logo-mark { width: clamp(120px, 22vh, 210px); height: auto; overflow: visible; }
.logo-mark .v, .logo-mark .f { fill: #fff; }
.logo-mark .band { fill: var(--gold); }
.logo-mark .v, .logo-mark .band { opacity: var(--l); transform: translateY(calc((1 - var(--l)) * 160px)); }
.logo-mark .f { opacity: var(--l); transform: translate(calc((1 - var(--l)) * 260px), calc((1 - var(--l)) * -120px)); }
.logo-word {
  display: flex; justify-content: center;
  font: italic 800 clamp(3.6rem, 14vw, 9.5rem)/.9 var(--serif); letter-spacing: .01em; color: #fff;
}
.logo-word span { display: inline-block; opacity: 0; will-change: transform, opacity, filter; }
.logo-sub {
  font: italic 500 clamp(.9rem, 2.1vw, 1.35rem)/1 var(--serif); letter-spacing: .62em; text-transform: uppercase;
  color: #cfe9f6; opacity: var(--l); padding-left: .62em; white-space: nowrap;
  text-shadow: 0 1px 12px rgba(4,30,46,.6);
}

/* Closing copy */
.hero-copy {
  position: absolute; left: 50%; bottom: 7svh; z-index: 4; width: min(640px, 92vw);
  transform: translateX(-50%); text-align: center; color: var(--cream);
  opacity: 0; pointer-events: none;
  --pool: .5; --pool-inset: -2.5rem -3rem; --pool-blur: 40px;
}
.hero-copy.live { pointer-events: auto; }
.hero-copy h1 { font-size: clamp(1.9rem, 4.6vw, 3.2rem); margin-bottom: .3em; }
.hero-copy p { margin: 0 auto 1.4rem; max-width: 34em; opacity: .85; }
.hero-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

.scroll-hint {
  position: absolute; left: 50%; bottom: 4svh; z-index: 4; transform: translateX(-50%);
  color: var(--cream); text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase;
  --pool: .4; --pool-inset: -1.2rem -2.2rem; --pool-blur: 24px;
}
.scroll-hint i {
  display: block; width: 22px; height: 36px; margin: .7rem auto 0;
  border: 2px solid rgba(234,243,249,.7); border-radius: 12px; position: relative;
}
.scroll-hint i::after {
  content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 8px; margin-left: -2px;
  border-radius: 2px; background: var(--cream); animation: wheel 1.8s infinite;
}
@keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

@media (max-width: 700px) {
  .hero-intro { bottom: 9.5rem; }
  .hud { left: 1rem; right: auto; width: calc(100% - 2rem); bottom: 6.2rem; }
  .scroll-hint { bottom: 1.2rem; }
  .logo-wrap { --pool: .64; } /* the small "Marine Sales" line needs a touch more shade on phones */
}

/* 3D couldn't start (old device / offline): keep the gradient backdrop, show the logo and copy */
.hero-sticky.no-3d .logo-wrap { --l: 1; }
.hero-sticky.no-3d .logo-word span { opacity: 1; }
.hero-sticky.no-3d .hero-copy { opacity: 1; pointer-events: auto; }
.hero-sticky.no-3d .hero-intro, .hero-sticky.no-3d .hud, .hero-sticky.no-3d .scroll-hint { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero { height: 100vh; height: 100svh; }
  .scroll-hint, .hud, .hero-intro { display: none; }
  .hero-intro > *, .hero-intro::before { animation: none; opacity: 1; transform: none; }
}

/* Page is held on the hero until the drone shot has played (js/hero.js) */
html { scrollbar-gutter: stable; }
html.hero-lock, html.hero-lock body { overflow: hidden; overscroll-behavior: none; }