/* =====================================================
   HERO — Cinematic Flying W (Homepage)

   Structure: default rules render the FINAL composed
   state (stripes resting, W drawn, text visible).
   Every intro animation lives inside the
   prefers-reduced-motion: no-preference block, so
   reduced-motion users, no-JS visitors, and old
   browsers all get the finished hero instantly.
   ===================================================== */

.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--bg);
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  min-height: 560px;
  max-height: 900px;
}

/* Ambient orange glow above the stripe/W layers */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(254, 120, 0, 0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 2;
}

/* =====================================================
   LAYER 1 — Diagonal stripe texture
   ===================================================== */
.hero-stripes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* Oversized rotated canvas: rotation is static, only the
   bands' translateX/opacity ever animate */
.hero-stripes-rotor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240vmax;
  height: 240vmax;
  margin: -120vmax 0 0 -120vmax;
  transform: rotate(-25.5deg);
}
.hero-stripe {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 11vmax;
  background: var(--orange);
  opacity: 0.06;
}
.hero-stripe.s1 { left: 70vmax; }
.hero-stripe.s2 { left: 92vmax; }
.hero-stripe.s3 { left: 114vmax; }
.hero-stripe.s4 { left: 136vmax; }
.hero-stripe.s5 { left: 158vmax; }

/* =====================================================
   LAYER 2 — Self-drawing Flying W
   ===================================================== */
.hero-w {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}
/* W + wordmark travel as one unit; rests as the dim backdrop.
   --ls / --lx frame the intro's lockup pose: scaled down and shifted
   left so the full W + "WAB VENTURE INC" lockup sits centered.
   Keep --lx = -(--ls × 78%) — 78% of the W's width is the offset
   from the W's center to the full lockup's center (measured from WAB.png). */
.hero-lockup {
  position: relative;
  opacity: 0.15;
  --ls: 0.62;
  --lx: -48.3%;
}
/* Wordmark geometry in % of the W's rendered width (WAB.png is 1:1
   with the svg viewBox: wordmark 587 wide at x452, W box 406) */
.hero-wordmark {
  position: absolute;
  left: 111.3%;
  top: 50%;
  width: 144.6%;
  max-width: none;
  height: auto;
  transform: translateY(-50%);
  opacity: 0;
}
.hero-w-svg {
  width: clamp(300px, 46vw, 700px);
  height: auto;
  aspect-ratio: 406 / 345;
  max-height: 72vh;
}
.w-band { fill: var(--orange); }
/* White strokes inside each band's mask reveal the band as they draw */
.w-mask-line {
  stroke: #fff;
  stroke-width: 30;
  stroke-linejoin: round;
  stroke-linecap: square;
  fill: none;
}
.w-reg {
  fill: var(--orange);
  font-family: var(--font);
  font-size: 16px;
}

/* =====================================================
   LAYER 3 — Content
   ===================================================== */
.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 860px;
  padding: 0 24px;
}
.hero-content .eyebrow { margin-bottom: 10px; }
.hero-eyebrow-sub {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 22px;
}
/* Mirror the eyebrow's dash on the right for centered layout */
.hero-content .eyebrow::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--orange);
  flex-shrink: 0;
}
.hero-title {
  font-size: clamp(34px, 7vw, 76px);
  letter-spacing: 3px;
  line-height: 1.08;
  color: #fff;
  margin-bottom: 26px;
}
.hero-copy {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 620px;
  margin: 0 auto 36px;
}
.hero-cta-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* =====================================================
   WORD ROTATOR — "What a ____." / brand beat "WAB VENTURE."
   ===================================================== */
.hero-rotator,
.hero-prefix {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  /* width beat matches the slide's easing; duration synced to RESIZE_MS in js/main.js */
  transition: width 0.36s cubic-bezier(0.33, 1, 0.68, 1);
}
.hero-rotator { color: var(--orange); }
.rotator-word {
  grid-area: 1 / 1;
  display: inline-block;
  line-height: inherit;
  transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.rotator-word.is-brand { color: var(--orange); }
.rotator-word.is-incoming { transform: translateY(112%); }
.hero-rotator.is-swapping .rotator-word.is-current,
.hero-prefix.is-swapping .rotator-word.is-current { transform: translateY(-110%); }
.hero-rotator.is-swapping .rotator-word.is-incoming,
.hero-prefix.is-swapping .rotator-word.is-incoming { transform: translateY(0); }
/* The sentence period joins the brand color while "WAB" is up */
.title-period { transition: color 0.5s cubic-bezier(0.33, 1, 0.68, 1); }
.hero-title-visual.is-brand .title-period { color: var(--orange); }
/* Hidden sizer used by JS to measure incoming word width */
.rotator-sizer {
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
}

/* =====================================================
   INTRO CHOREOGRAPHY (motion-safe users only)
   ===================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Act 1a — stripes sweep in on the brand diagonal */
  .hero-stripe {
    animation: heroStripeSweep 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hero-stripe.s1 { animation-delay: 0s; }
  .hero-stripe.s2 { animation-delay: 0.07s; }
  .hero-stripe.s3 { animation-delay: 0.14s; }
  .hero-stripe.s4 { animation-delay: 0.21s; }
  .hero-stripe.s5 { animation-delay: 0.28s; }

  /* Act 1b — the W draws itself (dash-draw runs on the mask strokes) */
  .w-mask-line {
    stroke-dasharray: 101;
    stroke-dashoffset: 101;
    animation: heroWDraw 0.85s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  }
  .w-mask-line.wm1 { animation-delay: 0.25s; }
  .w-mask-line.wm2 { animation-delay: 0.33s; }
  .w-mask-line.wm3 { animation-delay: 0.41s; }
  .w-mask-line.wm4 { animation-delay: 0.49s; }
  .w-mask-line.wm5 { animation-delay: 0.55s; }
  .w-reg {
    opacity: 0;
    animation: heroRegIn 0.4s ease 1.05s forwards;
  }

  /* Act 2a — the W draws in lockup pose; the wordmark fades in beside it
     as the last lines finish (0% list keeps it hidden through the draw) */
  .hero-lockup {
    opacity: 1;
    transform: translateX(var(--lx)) scale(var(--ls));
    animation: heroLockupSettle 0.8s cubic-bezier(0.22, 1, 0.36, 1) 2.05s forwards;
  }
  .hero-wordmark {
    animation: heroWordmark 2.45s linear forwards;
  }

  /* Act 2b — content staggers in as the lockup dissolves */
  .hero-in {
    opacity: 0;
    animation: heroContentIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .hero-in.hi-1 { --hero-in-y: 16px; animation-delay: 1.95s; animation-duration: 0.55s; }
  .hero-in.hi-2 { animation-delay: 2.07s; }
  .hero-in.hi-3 { animation-delay: 2.23s; }
  .hero-in.hi-4 { animation-delay: 2.37s; }

  @keyframes heroStripeSweep {
    0%   { transform: translateX(-150vmax); opacity: 0; }
    15%  { opacity: 0.9; }
    100% { transform: translateX(0); opacity: 0.06; }
  }
  @keyframes heroWDraw {
    to { stroke-dashoffset: 0; }
  }
  @keyframes heroRegIn {
    to { opacity: 1; }
  }
  /* Fused settle: wordmark space closes as the W grows back to center
     and dims into the backdrop — one motion, no return trip */
  @keyframes heroLockupSettle {
    from { opacity: 1; transform: translateX(var(--lx)) scale(var(--ls)); }
    to   { opacity: 0.15; transform: translateX(0) scale(1); }
  }
  /* Timeline (of 2.45s): in 1.15–1.54s, hold, out 2.06–2.45s
     (the fade-out rides the settle's first beat) */
  @keyframes heroWordmark {
    0%, 47%  { opacity: 0; }
    63%, 84% { opacity: 1; }
    100%     { opacity: 0; }
  }
  @keyframes heroContentIn {
    from { opacity: 0; transform: translateY(var(--hero-in-y, 24px)); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* =====================================================
   GROWTH SECTION (Homepage)
   ===================================================== */
.growth {
  background: var(--bg);
  padding: 96px 0;
}
.growth-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.growth-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 36px 0;
}
.growth-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.growth-num {
  display: block;
  font-family: var(--font);
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.growth-stat-label {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--orange);
}
.growth-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* Map panel */
.growth-map {
  background: linear-gradient(160deg, #101010 0%, #0b0b0b 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 16px 12px;
}
.growth-map-svg { width: 100%; height: auto; display: block; }
.growth-map-link {
  display: inline-block;
  margin: 10px 4px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange);
  transition: opacity var(--trans);
}
.growth-map-link:hover { opacity: 0.65; }

/* Map internals */
.map-border {
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}
.map-state-label {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 7px;
  text-transform: uppercase;
  fill: rgba(255, 255, 255, 0.06);
}
.pin-dot { fill: var(--orange); }
.pin-ring { fill: none; stroke: var(--orange); stroke-width: 2; opacity: 0; }
.pin-dot, .pin-ring { transform-box: fill-box; transform-origin: center; }
.growth-pin-g:hover .pin-dot { fill: var(--orange-light); }
.hq-marker {
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 2;
}
.hq-label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  fill: rgba(255, 255, 255, 0.55);
}

/* Pin pop-in choreography — runs when the map card scrolls into view */
@media (prefers-reduced-motion: no-preference) {
  .growth-map .pin-dot { opacity: 0; }
  .growth-map.visible .pin-dot {
    animation: pinPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: calc(0.4s + var(--i, 0) * 0.1s); /* pin cadence: one knob */
  }
  .growth-map.visible .pin-ring {
    animation: pinRing 0.9s ease-out forwards;
    animation-delay: calc(0.4s + var(--i, 0) * 0.1s); /* pin cadence: one knob */
  }
  .growth-map .map-hq { opacity: 0; }
  .growth-map.visible .map-hq {
    animation: heroRegIn 0.5s ease 0.25s forwards;
  }
  @keyframes pinPop {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes pinRing {
    0%   { opacity: 0.8; transform: scale(0.4); }
    100% { opacity: 0; transform: scale(3); }
  }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media screen and (max-width: 1024px) {
  .growth-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media screen and (max-width: 720px) {
  /* Smaller lockup pose so W + wordmark fit narrow screens */
  .hero-lockup { --ls: 0.40; --lx: -31.2%; }
  .growth { padding: 64px 0; }
  .growth-inner { padding: 0 24px; }
}
@media screen and (max-height: 520px) {
  .hero {
    height: auto;
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100svh - var(--nav-h));
    max-height: none;
    padding: 48px 0;
  }
  .hero-w-svg { width: min(40vw, 340px); }
}
@media screen and (max-width: 480px) {
  .hero-cta-group, .growth-cta { flex-direction: column; }
  .hero .btn-primary, .hero .btn-outline,
  .growth .btn-primary, .growth .btn-outline { width: 100%; justify-content: center; }
  .growth-stats { gap: 12px; }
  .growth-stat { padding: 16px 18px; }
}