/* ============================================================
   54-max-woah-pack.css — maximum-woah upgrades

   Four aggressive additions on top of 53-woah-pack:

   1. GHOST SECTION NUMBERS down the left edge of every module.
      Massive serif numerals at 14rem rotated -90°, opacity 0.04,
      sitting just inside each section's left edge. Magazine
      detail — most visitors won't consciously notice, but the
      page reads as crafted. Counter auto-increments so each
      section gets its own number (01, 02, 03, ...).

   2. ANIMATED SAWDUST PARTICLES floating up across the hero.
      Six tiny ochre dots drift from the bottom of the hero
      toward the top with randomised durations and delays.
      Brand-themed (sawdust = carpentry workshop ambient).
      Pure CSS, hardware-accelerated, no JS.

   3. STICKY HEADER MORPH on scroll.
      Once user scrolls past 200px, the header gets:
      - Backdrop-filter blur + warm-bone-tinted bg
      - Reduced padding (shrinks ~30%)
      - Subtle bottom-edge shadow
      Driven by JS adding .is-scrolled to the header element.

   4. CINEMATIC HERO ZOOM-OUT REVEAL on first paint.
      Hero starts scaled at 1.06 + slightly faded, then animates
      to scale 1 over 1.2s with a smooth ease-out. Reads as a
      camera pulling back to reveal the scene. Subtle enough that
      it doesn't feel like a loading screen.
   ============================================================ */

/* ============================================================
   1. GHOST SECTION NUMBERS — REMOVED 2026-05-19
   Brandon flagged the giant ghost numerals as visually heavy
   ("can we remove these numbers I don't like that"). Cleared
   to a no-op rather than deleting the section so the comment
   trail stays useful if we ever want to reintroduce them.

   The OTHER rule that needs to stay: section.module needs
   position: relative + overflow-x: clip so the sawdust /
   sticky-divider / other absolutely-positioned children keep
   working correctly. We preserve those without the counter.
   ============================================================ */
section.module {
  position: relative;
  overflow-x: clip;
}

/* ============================================================
   2. SAWDUST PARTICLES on hero
   ============================================================ */
#hero {
  position: relative;
  overflow: hidden;
}
.hero-sawdust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.hero-sawdust .saw {
  position: absolute;
  bottom: -10px;
  width: 5px;
  height: 5px;
  background: var(--c-yellow);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 8px color-mix(in srgb, var(--c-yellow) 45%, transparent);
  animation: btb-sawdust-drift linear infinite;
}
/* Six particles with staggered start positions, sizes, durations,
   delays. Randomised values keep the motion organic. */
.hero-sawdust .saw:nth-child(1) { left: 12%; width: 3px; height: 3px; animation-duration: 18s; animation-delay: 0s;   }
.hero-sawdust .saw:nth-child(2) { left: 28%; width: 4px; height: 4px; animation-duration: 22s; animation-delay: -4s;  opacity: 0.7; }
.hero-sawdust .saw:nth-child(3) { left: 42%; width: 2px; height: 2px; animation-duration: 16s; animation-delay: -7s;  opacity: 0.6; }
.hero-sawdust .saw:nth-child(4) { left: 58%; width: 5px; height: 5px; animation-duration: 24s; animation-delay: -2s;  }
.hero-sawdust .saw:nth-child(5) { left: 74%; width: 3px; height: 3px; animation-duration: 20s; animation-delay: -11s; opacity: 0.7; }
.hero-sawdust .saw:nth-child(6) { left: 88%; width: 4px; height: 4px; animation-duration: 19s; animation-delay: -6s;  }

@keyframes btb-sawdust-drift {
  /* vh-based travel jumps on iOS Safari when the URL bar collapses;
     dvh (dynamic viewport height) tracks the visible viewport
     including UI chrome state. Where dvh isn't supported the vh
     fallback still works — visitor just sees a 1-frame jump when
     iOS shows/hides the address bar. */
  0%   { transform: translate3d(0, 0, 0)              rotate(0);     opacity: 0; }
  10%  {                                                              opacity: 0.7; }
  50%  { transform: translate3d(-30px, -50vh, 0)       rotate(180deg); opacity: 0.5; }
  90%  {                                                              opacity: 0.4; }
  100% { transform: translate3d(20px, -110vh, 0)       rotate(360deg); opacity: 0; }
}
@supports (height: 100dvh) {
  @keyframes btb-sawdust-drift {
    0%   { transform: translate3d(0, 0, 0)              rotate(0);     opacity: 0; }
    10%  {                                                              opacity: 0.7; }
    50%  { transform: translate3d(-30px, -50dvh, 0)      rotate(180deg); opacity: 0.5; }
    90%  {                                                              opacity: 0.4; }
    100% { transform: translate3d(20px, -110dvh, 0)      rotate(360deg); opacity: 0; }
  }
}

/* Push hero content above the sawdust layer */
#hero > .container,
#hero .hero-walkthrough-slides {
  z-index: 2;
}

/* ============================================================
   3. STICKY HEADER MORPH
   Header is already position: sticky in 02-header.css. We add
   the morph state when JS adds .is-scrolled.
   ============================================================ */
#header {
  transition:
    padding 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.3s ease,
    backdrop-filter 0.3s ease,
    box-shadow 0.3s ease;
}
#header.is-scrolled {
  /* Solid bg fallback for browsers without backdrop-filter
     (Firefox pre-103, iOS Safari 15). Backdrop-filter version
     wins where supported. */
  background: color-mix(in srgb, var(--c-bg) 95%, transparent);
  box-shadow: 0 1px 0 rgba(13, 18, 30, 0.06), 0 10px 28px rgba(13, 18, 30, 0.07);
  padding-top: 8px;
  padding-bottom: 8px;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #header.is-scrolled {
    background: color-mix(in srgb, var(--c-bg) 78%, transparent);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
  }
}
#header.is-scrolled .logo img,
#header.is-scrolled .logo-badge {
  transform: scale(0.85);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-origin: left center;
}

/* ============================================================
   4. CINEMATIC HERO ZOOM-OUT REVEAL on first paint
   ============================================================ */
#hero {
  /* `animation-fill-mode: backwards` keeps the from-state visible
     during the animation-delay so the page doesn't flash unanimated
     content. Also helps with same-doc hash navigations where the
     animation re-fires. */
  animation: btb-hero-cinema-in 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
@keyframes btb-hero-cinema-in {
  from {
    opacity: 0.85;
    transform: scale(1.06);
    filter: brightness(0.9) contrast(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1) contrast(1);
  }
}

/* ============================================================
   Reduce-motion guards
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-sawdust .saw,
  #hero,
  #header,
  #header .logo img,
  #header .logo-badge {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  section.module::after { display: none; }
}