/* ============================================================================
   brand-chrome.css — the signature mindboost HERO + FOOTER.
   The magenta gradient surface with the pink wave swoosh + aurora, lifted from
   the menu so the Menu and every Topic share one source of truth. Pairs with the
   #heroWave / #footerWave clip-paths (inline SVG) on the page. Add `hero--brand`
   to a `.hero` header (wrapped in `.hero-shadow` with a `.hero-wave-line`), and
   `site-footer hero--brand` to the footer (wrapped in `.footer-shadow`).
   ============================================================================ */

/* ── base hero layout + content (the canonical set — both Menu and Topic use
   THIS, so their heroes are pixel-identical; .hero--brand overrides below add
   the magenta surface + white type on top). ── */
.hero { padding-top: calc(var(--nav-h, 60px) + 3px + 4rem); padding-inline: 1.25rem; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mb-pink); margin-bottom: 1.25rem; }
.hero-eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mb-pink); }
.hero-number { display: inline-block; padding: 0.2rem 0.625rem; background: var(--mb-pink-soft);
  border: 1px solid var(--mb-border-accent); border-radius: var(--mb-radius-pill); font-size: 0.7rem;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mb-pink); margin-right: 0.5rem; }
.hero-title { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.035em;
  margin: 0 auto 1.1rem; max-width: 680px; }
.hero-title em { color: var(--mb-pink); font-style: normal; }
.hero-desc { font-size: clamp(0.9rem, 2vw, 1.05rem); color: var(--mb-text-muted); max-width: 480px;
  margin: 0 auto 2rem; line-height: 1.7; }
.hero-meta { display: flex; align-items: center; justify-content: center; gap: 0.625rem; flex-wrap: wrap; }
.hero-pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3rem 0.75rem;
  border-radius: var(--mb-radius-pill); border: 1px solid var(--mb-border); background: var(--mb-surface);
  font-size: 0.775rem; color: var(--mb-text-muted); }
.hero-rewatch { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.5rem; padding: 0.55rem 1.3rem;
  border-radius: var(--mb-radius-pill); border: 1px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.12);
  color: #fff; text-decoration: none; font-size: 0.85rem; font-weight: 600;
  transition: background var(--mb-transition), border-color var(--mb-transition); }
.hero-rewatch:hover, .hero-rewatch:focus-visible { background: #fff; border-color: #fff; color: var(--mb-pink-strong); }
.hero-rewatch:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-rewatch .ico { display: inline-flex; align-items: center; justify-content: center; }

/* ── the pink wave edge (an element, so it can sweep in on load) ── */
.hero-shadow { position: relative; }
.hero-wave-line {
  position: absolute; inset: 0; z-index: 0;
  background: #ff2e74;
  clip-path: url(#heroWave);
  transform: translateY(16px);
  -webkit-mask: linear-gradient(#000, #000) left center / 0% 100% no-repeat;
          mask: linear-gradient(#000, #000) left center / 0% 100% no-repeat;
  animation: hero-sweep 900ms cubic-bezier(0.16, 1, 0.3, 1) 250ms forwards;
}
@keyframes hero-sweep { to { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } }

/* ── shared brand surface — BOTH the hero and the footer carry .hero--brand,
   so the magenta gradient + white type live on the single-class selector. ── */
.hero--brand {
  --aurora-hue: 0;
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  color: #fff;
  background: linear-gradient(120deg, #8c083c 0%, #c2185b 55%, var(--mb-pink, #E91E63) 100%);
}
/* Hero-only: content-driven height + the bottom wave clip. `.hero.hero--brand`
   (specificity 0,0,2,0) so it wins over a page's own `.hero { padding }`.
   Height = padding-top + content + the wave-clearance below, so the hero GROWS
   with the title/desc and the wave trough never clips the content (no magic
   fixed height). min-height is just a floor so short content still reads deep. */
.hero.hero--brand {
  min-height: clamp(340px, 46vh, 560px);
  padding-bottom: 13rem;                   /* reserved wave clearance — content always sits above the trough */
  clip-path: url(#heroWave);               /* wavy bottom on the hero's OWN gradient */
}
.hero--brand::before { display: none; }
.hero--brand .hero-title,
.hero--brand .hero-desc { color: #fff; text-shadow: 0 2px 28px rgba(120, 6, 48, 0.5); }
.hero--brand .hero-title em { color: #fff; }
.hero--brand .hero-eyebrow { color: rgba(255, 255, 255, 0.85); }
.hero--brand .hero-eyebrow-dot { background: #fff; }
.hero--brand .hero-number { color: #fff; }
.hero--brand .hero-pill {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
}

/* Scroll cue — also lifts the meta pills clear of the wave trough. */
.hero-scroll { margin-top: 2.25rem; font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); }
.hero-chev { margin-top: 1rem; font-size: 1.7rem; line-height: 1; color: #fff; animation: hero-bob 2s ease-in-out infinite; }
@keyframes hero-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .hero-chev { animation: none; } }

/* ── mouse-reactive aurora (static if no JS drives it) ── */
.hero-aurora {
  position: absolute; inset: -34%; z-index: -1; pointer-events: none;
  filter: hue-rotate(calc(var(--aurora-hue) * 1deg)) blur(8px);
}
.hero-aurora .blob { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
/* Continuous CLAMP sizing — no hard breakpoint (the old 768px step jumped the
   blobs 50vw→120vw, the visible glitch on resize). Below the clamp the blobs are
   FIXED px, so dragging the window doesn't re-rasterise the blurred layer either
   — smooth + seamless at every width. Positions stay constant across widths. */
.hero-aurora .blob-1 { top: 4%;  left: 26%; width: clamp(420px, 50vw, 760px); height: clamp(420px, 50vw, 760px); background: radial-gradient(circle, rgba(255,120,160,0.98) 0%, rgba(255,120,160,0) 64%); }
.hero-aurora .blob-2 { top: 20%; left: 48%; width: clamp(460px, 56vw, 840px); height: clamp(460px, 56vw, 840px); background: radial-gradient(circle, rgba(255,150,60,0.78) 0%, rgba(255,150,60,0) 60%); }
.hero-aurora .blob-3 { top: -4%; left: 2%;  width: clamp(380px, 46vw, 700px); height: clamp(380px, 46vw, 700px); background: radial-gradient(circle, rgba(150,40,210,0.7) 0%, rgba(150,40,210,0) 58%); }
@media (prefers-reduced-motion: reduce) {
  .hero-aurora { display: none; }
  .hero-wave-line { animation: none; -webkit-mask: none; mask: none; }
}

/* ── footer mirrors the hero: magenta + a flipped swoosh that jigsaws ──
   Pink edge is an ELEMENT (a clipped pink shape behind the footer), NOT a
   filter on the wrapper — a subtree filter ghosts the footer content (the logo). */
.footer-shadow { position: relative; }
.footer-wave-line {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #ff2e74;
  clip-path: url(#footerWave);
  transform: translateY(-16px);            /* peeks above the footer's wavy top = the pink edge */
}
.site-footer {
  position: relative; z-index: 1; overflow: hidden;   /* above the wave-line */
  padding: 7rem 1.25rem 3rem; text-align: center;
  color: rgba(255, 255, 255, 0.92); font-size: 0.75rem;
  clip-path: url(#footerWave);
}
.footer-aurora { z-index: 0; }
.footer-mark { position: relative; z-index: 2; font-weight: 800; letter-spacing: -0.01em; color: #fff; font-size: 1.05rem; }
.footer-mark-dot { color: rgba(255, 255, 255, 0.55); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--mb-pink-tint, #FFF5F8); }