/* ============================================================
   53-woah-pack.css — landing page "woah" upgrades

   Four transformations that visitors notice immediately:

   1. PULL-QUOTE TAKEOVER above the testimonial grid.
      A peer-endorsement quote from Adam Clarke (the other chippy
      vouching for Nathan's joinery) becomes a magazine-spread
      moment — 4rem italic display, gold accent line, attribution
      in a hand-set caps-and-rules pattern. The 8 cards below
      become "more reviews like this".

   2. ANIMATED BAR-FILL under each hero stat number.
      The "10+ Years on the tools" / "2027 Booking now" / "6yr
      warranty" / "1 builder" stats get a 3px gold bar underneath
      that fills from 0 → 100% as the hero scrolls into view.
      Implies a status / progress / fullness reading at a glance.

   3. MAGNETIC PULL on primary CTAs.
      The green "Book now" buttons subtly drift toward the cursor
      when hovered (max 8px translate). Plus tightened
      perspective + a more dramatic lift. Hardware-accelerated.
      Disabled on touch + reduce-motion.

   4. ANIMATED LOGO ENTRANCE on every page load.
      The Born to Build badge scales from 0.86 → 1 with a soft
      fade and a 0.05s delay. Below the threshold where you'd
      consciously notice, but the page reads as "alive" on first
      paint.
   ============================================================ */

/* ===== 1. PULL-QUOTE TAKEOVER ===== */
.pull-quote-takeover {
  background: var(--c-bg);
  padding: var(--s-7) 0 var(--s-5);
  margin-bottom: var(--s-7);
  border-bottom: 1px solid var(--c-line);
  position: relative;
}
.pull-quote-takeover .pq-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  /* No left/right padding here — the parent section's .container already
     provides it. Adding more would double-indent the blockquote relative
     to every other section heading. */
}
.pull-quote-takeover .pq-mark {
  display: block;
  font-family: var(--f-display);
  font-size: 6rem;
  font-weight: 900;
  color: var(--c-yellow);
  line-height: 0.7;
  margin-bottom: var(--s-3);
  opacity: 0.85;
  letter-spacing: -0.05em;
  font-style: italic;
}
.pull-quote-takeover blockquote {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.32;
  font-style: italic;
  color: var(--c-ink);
  margin: 0 auto var(--s-5);
  max-width: 30ch;
  letter-spacing: -0.01em;
  text-wrap: balance;
  font-weight: 500;
}
.pull-quote-takeover blockquote em {
  color: var(--c-blue);
  font-style: italic;
  font-weight: 700;
}
.pull-quote-takeover .pq-attribution {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.pull-quote-takeover .pq-attribution::before,
.pull-quote-takeover .pq-attribution::after {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--c-yellow);
}
.pull-quote-takeover .pq-attribution strong {
  font-weight: 800;
}
.pull-quote-takeover .pq-attribution span {
  opacity: 0.6;
  font-weight: 600;
}
@media (max-width: 720px) {
  .pull-quote-takeover { padding: var(--s-5) 0; }
  .pull-quote-takeover .pq-mark { font-size: 4rem; }
  .pull-quote-takeover blockquote { font-size: 1.3rem; }
  .pull-quote-takeover .pq-attribution::before,
  .pull-quote-takeover .pq-attribution::after { width: 24px; }
}

/* ===== 2. ANIMATED BAR-FILL UNDER HERO STATS ===== */
.hero-trust > div {
  position: relative;
  padding-bottom: var(--s-3);
}
.hero-trust > div::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--c-yellow), var(--c-yellow-dark));
  border-radius: 999px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--c-yellow) 45%, transparent);
}
@supports (animation-timeline: view()) {
  .hero-trust > div::after {
    animation: btb-stat-bar-fill linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
  @keyframes btb-stat-bar-fill {
    from { width: 0%; }
    to   { width: 65%; }
  }
  /* Each stat fills to a different width so the bars read as a
     "progress chart" rather than identical strips. These per-stat
     overrides MUST live inside the @supports block — otherwise
     Safari 17 and below would apply the keyframes with no scroll
     trigger, which skips the start state and snaps the bars to
     full width on page load (real bug caught by the production
     code review, 2026-05-19). */
  .hero-trust > div:nth-child(1)::after { animation-name: btb-bar-1; }
  .hero-trust > div:nth-child(2)::after { animation-name: btb-bar-2; }
  .hero-trust > div:nth-child(3)::after { animation-name: btb-bar-3; }
  .hero-trust > div:nth-child(4)::after { animation-name: btb-bar-4; }
  @keyframes btb-bar-1 { from { width: 0; } to { width: 88%; } }
  @keyframes btb-bar-2 { from { width: 0; } to { width: 72%; } }
  @keyframes btb-bar-3 { from { width: 0; } to { width: 60%; } }
  @keyframes btb-bar-4 { from { width: 0; } to { width: 100%; } }
}
/* Non-supporting fallback: just show each bar at its final width
   immediately. No animation, but the visual stays consistent. */
@supports not (animation-timeline: view()) {
  .hero-trust > div:nth-child(1)::after { width: 88%; }
  .hero-trust > div:nth-child(2)::after { width: 72%; }
  .hero-trust > div:nth-child(3)::after { width: 60%; }
  .hero-trust > div:nth-child(4)::after { width: 100%; }
}

/* ===== 3. MAGNETIC PULL ON PRIMARY CTAs ===== */
/* The hover transform comes from JS (js/magnetic-pull-cta.js)
   which sets --pull-x / --pull-y custom properties on the button.
   Pure CSS animates the resulting translate so it feels weighted. */
@property --btb-pull-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --btb-pull-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@media (hover: hover) {
  .btn-primary,
  .btn-yellow,
  .btn-dark {
    transform: translate3d(var(--btb-pull-x, 0px), var(--btb-pull-y, 0px), 0);
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.22s ease,
                background-color 0.22s ease,
                filter 0.22s ease;
  }
  /* On hover the button composes BOTH the magnetic pull (from the
     custom properties) AND a vertical lift of -2px. Without this
     composed transform the lift from 50-aesthetic-overhaul.css
     was being overridden by the pull's translate3d (last-wins
     cascade). Now they stack. */
  .btn-primary:hover,
  .btn-yellow:hover,
  .btn-dark:hover {
    transform: translate3d(
      var(--btb-pull-x, 0px),
      calc(var(--btb-pull-y, 0px) - 2px),
      0
    );
  }
  .btn-primary.is-pulling,
  .btn-yellow.is-pulling,
  .btn-dark.is-pulling {
    transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease,
                background-color 0.22s ease,
                filter 0.22s ease;
  }
}

/* ===== 4. ANIMATED LOGO ENTRANCE ===== */
#header .logo,
#header .logo-badge,
.brand-mark {
  animation: btb-logo-enter 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s both;
}
@keyframes btb-logo-enter {
  from {
    opacity: 0;
    transform: scale(0.86);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* ===== Reduce-motion ===== */
@media (prefers-reduced-motion: reduce) {
  .hero-trust > div::after,
  #header .logo,
  #header .logo-badge,
  .brand-mark {
    animation: none;
  }
  .hero-trust > div::after {
    width: 65%;
  }
  .btn-primary,
  .btn-yellow,
  .btn-dark {
    transform: none !important;
  }
}