/* ═══════════════════════════════════════════════════
   MOTION LAYER — animations, transitions, magic
   ═══════════════════════════════════════════════════ */

/* Register --cur-scale so it's animatable. Without this, transitions on
   custom properties are discrete (snap), not smooth. */
@property --cur-scale {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

/* ── kill cursor only after JS-managed custom cursor is ready ── */
@media (hover: hover) and (pointer: fine) {
  body.has-cursor, body.has-cursor * { cursor: none !important; }
  body.has-cursor input, body.has-cursor textarea, body.has-cursor select { cursor: text !important; }
}

/* ── CUSTOM CURSOR (transform-only sizing for GPU smoothness) ── */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  border-radius: 50%;
  will-change: transform, background;
  opacity: 0; /* starts hidden — JS reveals on first mousemove to avoid (0,0) flash */
}
.cursor-dot {
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--mustard);
  mix-blend-mode: difference;
  transition: opacity 0.2s, background 0.2s;
  --cur-x: 0px;
  --cur-y: 0px;
  transform: translate3d(var(--cur-x), var(--cur-y), 0);
}
.cursor-ring {
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border: 1.5px solid var(--ink);
  --cur-scale: 1;
  --cur-x: 0px;
  --cur-y: 0px;
  transform: translate3d(var(--cur-x), var(--cur-y), 0) scale(var(--cur-scale));
  transition: --cur-scale 0.3s var(--ease-emphasis),
              background 0.25s var(--ease-standard),
              border-color 0.25s var(--ease-standard),
              opacity 0.25s,
              border-radius 0.25s var(--ease-standard);
  mix-blend-mode: difference;
}
body.cursor-hover .cursor-ring {
  --cur-scale: 1.7;
  background: var(--mustard);
  border-color: var(--mustard);
  mix-blend-mode: normal;
  opacity: 0.9;
}
body.cursor-hover .cursor-dot { background: var(--ink); }
body.cursor-play .cursor-ring {
  --cur-scale: 2.2;
  background: var(--mustard);
  border-color: var(--mustard);
  mix-blend-mode: normal;
}
body.cursor-play .cursor-ring::before {
  content: ''; position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-left: 7px solid var(--ink);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  transform: translate(-30%, -50%);
}
body.cursor-play .cursor-dot { opacity: 0; }
body.cursor-text .cursor-ring {
  --cur-scale: 1;
  width: 4px; height: 28px;
  margin: -14px 0 0 -2px;
  border-radius: 1px;
  background: var(--crimson);
  border-color: var(--crimson);
  mix-blend-mode: normal;
}
body.cursor-text .cursor-dot { opacity: 0; }

/* ── PAGE LOADER (intro) ── */
.intro {
  position: fixed; inset: 0; z-index: 10000;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(184,58,42,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 70%, rgba(30,61,122,0.18) 0%, transparent 55%),
    var(--ink);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  pointer-events: all;
}
.intro-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 24px;
  transform: translateY(0); opacity: 1;
  position: relative; z-index: 1;
}

/* Real microphone mark — same icon as the nav, blown up */
.intro-mark {
  width: 86px; height: 86px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--cream);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  animation: introMark 1.2s cubic-bezier(.5,1.5,.5,1) both;
  box-shadow:
    6px 6px 0 var(--mustard),
    -6px -6px 0 var(--crimson);
}
.intro-mark svg {
  width: 44px; height: 44px;
  fill: none;
  stroke: var(--cream);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.intro-mark-pulse {
  position: absolute;
  top: 8px; right: 8px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #FF3B30;
  box-shadow: 0 0 0 0 rgba(255,59,48,0.8);
  animation: introPulse 1.6s ease-out infinite;
}
@keyframes introPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,59,48,0.7); }
  50%      { transform: scale(1.2); box-shadow: 0 0 0 10px rgba(255,59,48,0); }
}

.intro-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 700; color: var(--cream);
  letter-spacing: -1.4px;
  line-height: 1;
}
.intro-title .word {
  display: inline-block; overflow: hidden;
  padding: 0 6px;
}
.intro-title .word > span {
  display: inline-block;
  transform: translateY(110%);
  animation: introWord 0.95s cubic-bezier(.2,.9,.3,1) both;
}
.intro-title .word:nth-child(1) > span { animation-delay: 0.4s; }
.intro-title .word:nth-child(2) > span { animation-delay: 0.55s; color: var(--mustard); font-style: italic; }
.intro-title .word:nth-child(3) > span { animation-delay: 0.7s; }

/* Animated waveform under the title */
.intro-wave {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  height: 32px;
  opacity: 0;
  animation: fadeInDelayed 0.5s 1.0s ease both;
}
.intro-wave span {
  display: block;
  width: 4px;
  background: var(--mustard);
  border-radius: 2px;
  animation: introWaveBar 1.1s ease-in-out infinite;
}
.intro-wave span:nth-child(1) { height:  8px; animation-delay: 0.0s; background: var(--cobalt); }
.intro-wave span:nth-child(2) { height: 18px; animation-delay: 0.08s; }
.intro-wave span:nth-child(3) { height: 28px; animation-delay: 0.16s; background: var(--crimson); }
.intro-wave span:nth-child(4) { height: 22px; animation-delay: 0.24s; }
.intro-wave span:nth-child(5) { height: 30px; animation-delay: 0.32s; background: var(--cobalt); }
.intro-wave span:nth-child(6) { height: 22px; animation-delay: 0.4s;  }
.intro-wave span:nth-child(7) { height: 28px; animation-delay: 0.48s; background: var(--crimson); }
.intro-wave span:nth-child(8) { height: 18px; animation-delay: 0.56s; }
.intro-wave span:nth-child(9) { height:  8px; animation-delay: 0.64s; background: var(--cobalt); }
@keyframes introWaveBar {
  0%, 100% { transform: scaleY(0.6); }
  50%      { transform: scaleY(1.4); }
}

.intro-tag {
  font-size: 12px; font-weight: 700;
  letter-spacing: 3.5px; text-transform: uppercase;
  color: rgba(245,240,226,0.7);
  display: inline-flex; align-items: center; gap: 12px;
  opacity: 0; animation: fadeInDelayed 0.6s 1.2s ease both;
}
.intro-dots { display: inline-flex; gap: 5px; }
.intro-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block;
  animation: introDotPop 1.8s ease-in-out infinite;
}
.intro-dots i:nth-child(1) { background: #4285F4; animation-delay: 0s; }
.intro-dots i:nth-child(2) { background: #EA4335; animation-delay: 0.15s; }
.intro-dots i:nth-child(3) { background: #FBBC05; animation-delay: 0.3s; }
.intro-dots i:nth-child(4) { background: #34A853; animation-delay: 0.45s; }
@keyframes introDotPop {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
  40%      { transform: translateY(-4px) scale(1.2); opacity: 1; }
}

/* Drifting brushes inside the intro */
.intro-brush {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  animation: introBrushIn 1s 0.2s ease both;
}
.intro-brush path {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: brushDraw 1.4s 0.4s var(--ease-emphasis) both;
}
.intro-brush-1 { top: 18%; left: 8%;  width: 220px; transform: rotate(-12deg); animation-delay: 0.2s; }
.intro-brush-2 { top: 65%; right: 8%; width: 240px; transform: rotate(8deg);   animation-delay: 0.35s; }
.intro-brush-3 { top: 80%; left: 12%; width: 180px; transform: rotate(-4deg);  animation-delay: 0.5s; }
.intro-brush-4 { top: 12%; right: 14%; width: 200px; transform: rotate(15deg); animation-delay: 0.65s; }
@keyframes introBrushIn {
  to { opacity: 0.4; }
}
/* curtain that wipes up to reveal site */
.intro.exit { animation: introExit 1.1s 2.6s cubic-bezier(.7,0,.3,1) forwards; }
.intro.exit .intro-inner { animation: introInnerOut 0.6s 2.5s cubic-bezier(.5,0,.5,1) forwards; }
@keyframes introMark {
  0%   { transform: scale(0) rotate(-90deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes introWord {
  0%   { transform: translateY(110%); }
  100% { transform: translateY(0); }
}
@keyframes fadeInDelayed { to { opacity: 1; } }
@keyframes introBar { to { width: 100%; } }
@keyframes introInnerOut {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-30px); opacity: 0; }
}
@keyframes introExit {
  0%   { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); }
}

/* ── HERO TEXT REVEAL ── */
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: heroLine 1s cubic-bezier(.2,.9,.25,1) both;
}
.hero h1 .line:nth-child(1) > span { animation-delay: 2.7s; }
.hero h1 .line:nth-child(2) > span { animation-delay: 2.85s; }
@keyframes heroLine {
  0%   { transform: translateY(110%) rotate(4deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* fade-up everything in hero (delayed until intro is gone) */
.hero-eyebrow,
.hero-tagline,
.hero-meta,
.platforms,
.hero-cover {
  opacity: 0; transform: translateY(24px);
  animation: heroFadeUp 0.9s cubic-bezier(.2,.8,.2,1) both;
}
.hero-eyebrow  { animation-delay: 2.55s; }
.hero-tagline  { animation-delay: 3.0s; }
.hero-meta     { animation-delay: 3.15s; }
.platforms     { animation-delay: 3.25s; }
.hero-cover    { animation-delay: 3.0s; transform: translateY(40px) scale(0.96); }
@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── HERO COVER image scale-in reveal ── */
.hero-cover-img img {
  transform: scale(1.08);
  animation: heroImg 1.4s 3.2s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes heroImg {
  to { transform: scale(1); }
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(.2,.85,.2,1),
              transform 0.9s cubic-bezier(.2,.85,.2,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(.2,.85,.2,1),
              transform 0.8s cubic-bezier(.2,.85,.2,1);
}
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.0s; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(n+6) { transition-delay: 0.45s; opacity: 1; transform: translateY(0); }

/* split text reveal */
.split .word { display: inline-block; overflow: hidden; padding-bottom: 0.05em; line-height: 1.05; }
.split .word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.85s cubic-bezier(.2,.9,.25,1);
}
.split.in .word > span { transform: translateY(0); }
.split .word:nth-child(2) > span { transition-delay: 0.05s; }
.split .word:nth-child(3) > span { transition-delay: 0.1s; }
.split .word:nth-child(4) > span { transition-delay: 0.15s; }
.split .word:nth-child(5) > span { transition-delay: 0.2s; }
.split .word:nth-child(6) > span { transition-delay: 0.25s; }

/* ── 3D TILT CARDS ── */
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.tilt-inner {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.ep-card .ep-thumb img,
.ep-card .ep-body { transform: translateZ(0); transition: transform 0.5s cubic-bezier(.2,.8,.2,1); }
.ep-card:hover .ep-thumb img { transform: translateZ(40px) scale(1.04); }
.ep-card:hover .ep-body { transform: translateZ(20px); }

/* ── MAGNETIC BUTTON ── */
.magnetic {
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

/* ── NAV scroll-shrink ── */
.nav.scrolled {
  background: rgba(239,232,214,0.96);
  border-bottom-color: rgba(26,22,20,0.15);
  box-shadow: 0 4px 24px rgba(26,22,20,0.06);
}
.nav.scrolled .nav-inner { padding: 12px 32px; }
.nav.scrolled .nav-logo { font-size: 17px; }
.nav.scrolled .nav-logo-mark { width: 32px; height: 32px; }

/* ── SCROLL PROGRESS BAR (GPU-accelerated scaleX) ── */
.scroll-prog {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--cobalt), var(--crimson) 50%, var(--mustard));
  z-index: 99;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ── PAGE TRANSITION CURTAIN ── */
.curtain {
  position: fixed; inset: 0; z-index: 9000;
  pointer-events: none;
  display: grid; grid-template-columns: repeat(6, 1fr);
}
.curtain span {
  display: block; height: 100%;
  background: var(--ink);
  transform: scaleY(0); transform-origin: top;
}
.curtain.enter span {
  animation: curtainIn 0.55s cubic-bezier(.7,0,.3,1) forwards;
}
.curtain.exit span {
  transform: scaleY(1); transform-origin: bottom;
  animation: curtainOut 0.55s cubic-bezier(.7,0,.3,1) forwards;
}
.curtain.enter span:nth-child(1) { animation-delay: 0s;    background: var(--cobalt); }
.curtain.enter span:nth-child(2) { animation-delay: 0.05s; background: var(--ink); }
.curtain.enter span:nth-child(3) { animation-delay: 0.1s;  background: var(--crimson); }
.curtain.enter span:nth-child(4) { animation-delay: 0.15s; background: var(--ink); }
.curtain.enter span:nth-child(5) { animation-delay: 0.2s;  background: var(--mustard); }
.curtain.enter span:nth-child(6) { animation-delay: 0.25s; background: var(--ink); }
.curtain.exit span:nth-child(1)  { animation-delay: 0.25s; background: var(--cobalt); }
.curtain.exit span:nth-child(2)  { animation-delay: 0.2s;  background: var(--ink); }
.curtain.exit span:nth-child(3)  { animation-delay: 0.15s; background: var(--crimson); }
.curtain.exit span:nth-child(4)  { animation-delay: 0.1s;  background: var(--ink); }
.curtain.exit span:nth-child(5)  { animation-delay: 0.05s; background: var(--mustard); }
.curtain.exit span:nth-child(6)  { animation-delay: 0s;    background: var(--ink); }
@keyframes curtainIn  { to { transform: scaleY(1); } }
@keyframes curtainOut { to { transform: scaleY(0); transform-origin: bottom; } }

/* ── BRUSH STROKE DRAW ── */
.brush path {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: brushDraw 1.8s 2.5s cubic-bezier(.5,0,.3,1) both;
}
.brush.brush-2 path { animation-delay: 2.7s; }
.brush.brush-3 path { animation-delay: 2.9s; }
.brush.brush-4 path { animation-delay: 3.1s; }
.brush.brush-5 path { animation-delay: 3.3s; }
.brush.brush-6 path { animation-delay: 3.5s; }
@keyframes brushDraw {
  0%   { stroke-dashoffset: 800; }
  100% { stroke-dashoffset: 0; }
}

/* additional brush positioning */
.brush-4 {
  bottom: 12%; right: 6%;
  width: 260px; opacity: 0.5;
  animation: brushDrift4 11s ease-in-out infinite alternate;
}
.brush-5 {
  top: 8%; left: 56%;
  width: 200px; opacity: 0.4;
  animation: brushDrift5 13s ease-in-out infinite alternate;
}
.brush-6 {
  bottom: 8%; left: 4%;
  width: 240px; opacity: 0.4;
  animation: brushDrift6 16s ease-in-out infinite alternate;
}

/* ambient drift on brushes */
.brush-1 { animation: brushDrift1 9s ease-in-out infinite alternate; }
.brush-2 { animation: brushDrift2 10s ease-in-out infinite alternate; }
.brush-3 { animation: brushDrift3 12s ease-in-out infinite alternate; }

@keyframes brushDrift1 {
  0%   { transform: translate(0,0) rotate(-1deg) scale(1); }
  50%  { transform: translate(14px,-8px) rotate(2deg) scale(1.05); }
  100% { transform: translate(-6px,10px) rotate(-2deg) scale(0.98); }
}
@keyframes brushDrift2 {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); }
  50%  { transform: translate(-12px,12px) rotate(-3deg) scale(1.06); }
  100% { transform: translate(8px,-6px) rotate(2deg) scale(1); }
}
@keyframes brushDrift3 {
  0%   { transform: translate(0,0) rotate(-15deg) scale(1); }
  50%  { transform: translate(10px,-12px) rotate(-12deg) scale(1.05); }
  100% { transform: translate(-8px,8px) rotate(-17deg) scale(0.98); }
}
@keyframes brushDrift4 {
  0%   { transform: translate(0,0) rotate(8deg) scale(1); }
  50%  { transform: translate(-20px,-16px) rotate(4deg) scale(1.04); }
  100% { transform: translate(12px,10px) rotate(10deg) scale(0.96); }
}
@keyframes brushDrift5 {
  0%   { transform: translate(0,0) rotate(-5deg) scale(1); }
  50%  { transform: translate(18px,14px) rotate(-2deg) scale(1.08); }
  100% { transform: translate(-14px,-8px) rotate(-7deg) scale(0.97); }
}
@keyframes brushDrift6 {
  0%   { transform: translate(0,0) rotate(3deg) scale(1); }
  50%  { transform: translate(-24px,-10px) rotate(0deg) scale(1.06); }
  100% { transform: translate(14px,12px) rotate(5deg) scale(0.98); }
}

/* ── AUDIO WAVE CANVAS ── */
.waveform {
  width: 100%; height: 80px;
  display: block;
  margin: 32px 0 0;
  opacity: 0;
  animation: heroFadeUp 0.9s 3.4s ease both;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px,
    transparent 2px 8px);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

/* ── EPISODE CARD HOVER PLAY GLOW ── */
.ep-thumb-play {
  background: var(--mustard);
  box-shadow: 0 0 0 0 rgba(232,184,44,0.7);
  animation: pulseGlow 2.4s ease-out infinite;
}
.ep-card:hover .ep-thumb-play { animation-play-state: running; }
@keyframes pulseGlow {
  0%   { box-shadow: 0 0 0 0 rgba(232,184,44,0.7); }
  60%  { box-shadow: 0 0 0 24px rgba(232,184,44,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,184,44,0); }
}

/* ── EPISODE CARDS — GOOGLE-SMOOTH HOVER ── */
.ep-card {
  transition: transform 0.45s var(--ease-emphasis),
              box-shadow 0.45s var(--ease-emphasis);
  position: relative;
  overflow: visible;
}
.ep-card .ep-thumb,
.ep-card .ep-body {
  transition: transform 0.5s var(--ease-emphasis);
}
.ep-card::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: var(--rad);
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
      rgba(66,133,244,0.18),
      rgba(234,67,53,0.12) 30%,
      rgba(251,188,5,0.10) 55%,
      transparent 70%);
  transition: opacity 0.5s var(--ease-standard);
  z-index: 1;
  mix-blend-mode: multiply;
}
.ep-card:hover::after { opacity: 1; }
.ep-card:hover .ep-title { color: var(--cobalt); }
.ep-title { transition: color 0.3s var(--ease-standard); }

/* color-rotation underline on title */
.ep-title { position: relative; }
.ep-title::before {
  content: '';
  position: absolute; left: 0; bottom: -3px;
  height: 3px; width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #4285F4 0%, #EA4335 35%, #FBBC05 70%, #34A853 100%);
  transition: width 0.5s var(--ease-emphasis);
}
.ep-card:hover .ep-title::before { width: 80%; }

.ep-card.tilt:hover {
  z-index: 5;
  box-shadow: 0 18px 40px -10px rgba(26,22,20,0.18);
}
.ep-card .ep-link.primary {
  transition: background 0.3s var(--ease-standard),
              transform 0.3s var(--ease-spring);
}
.ep-card:hover .ep-link.primary { background: var(--crimson); }

/* ── QUOTES MARQUEE polish ── */
.quotes-track { transform: translateZ(0); }
.quote-card {
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.quote-card:hover {
  transform: translateY(-8px) rotate(-1deg) scale(1.02);
  z-index: 10;
}

/* ── HOST CARD HOVER ── */
.host {
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s;
}
.host-avatar {
  transition: transform 0.5s cubic-bezier(.2,1.2,.3,1);
}
.host:hover .host-avatar { transform: scale(1.08) rotate(-4deg); }

/* ── PLATFORM BUTTON FX ── */
.platform-btn { transition: transform 0.25s cubic-bezier(.2,.8,.2,1); }

/* ── STAT NUMBER COUNTER ── */
.stat-num {
  transition: color 0.4s;
}

/* ── SECTION TITLE EM emphasis pulse on view ── */
.section-title em {
  position: relative;
}
.section-title em::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 12px;
  background: var(--mustard);
  z-index: -1; opacity: 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.7s 0.2s cubic-bezier(.2,.8,.2,1), opacity 0.4s 0.2s;
}
.split.in .section-title em::after,
.section-title.in em::after { transform: scaleX(1); opacity: 0.55; }

/* ── NOW PLAYING dot pulse on mini player ── */
.mini-thumb { position: relative; }
.mini-player.active .mini-thumb::after {
  content: ''; position: absolute;
  top: -2px; right: -2px; width: 10px; height: 10px;
  background: var(--mustard); border-radius: 50%;
  border: 2px solid var(--ink);
  animation: nowPulse 1.4s ease-in-out infinite;
}
@keyframes nowPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.7; }
}

/* ── CONFETTI / SPARKLE on share success ── */
.spark {
  position: fixed; pointer-events: none; z-index: 9998;
  width: 8px; height: 8px;
  background: var(--mustard);
  animation: sparkOut 0.8s ease-out forwards;
}
@keyframes sparkOut {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* ── BLOG CARD reveal image ── */
.blog-card-img { position: relative; overflow: hidden; }
.blog-card-img::before {
  content: ''; position: absolute;
  inset: 0; background: var(--cobalt);
  z-index: 2; transform: scaleX(1); transform-origin: right;
  transition: transform 1s cubic-bezier(.6,0,.3,1);
}
.blog-card.in .blog-card-img::before {
  transform: scaleX(0); transform-origin: right;
}
.blog-card-img img {
  transform: scale(1.1);
  transition: transform 1s 0.3s cubic-bezier(.2,.8,.2,1);
}
.blog-card.in .blog-card-img img { transform: scale(1); }

/* ── grain overlay (subtle film texture) ── */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 50;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
  mix-blend-mode: multiply;
}

/* ═══════════════════════════════════════════════════
   BOTTOM-OF-PAGE VIBE LAYER
   ═══════════════════════════════════════════════════ */

/* ── FOOTER: painterly top edge + drifting blob ── */
.footer { position: relative; overflow: hidden; isolation: isolate; }
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: -4%; right: -4%;
  height: 14px;
  background:
    radial-gradient(closest-side, var(--mustard) 60%, transparent 70%) 0 50%/22px 14px repeat-x,
    linear-gradient(90deg, transparent, var(--mustard) 18%, var(--crimson) 50%, var(--mustard) 82%, transparent) 0 50%/100% 3px no-repeat;
  opacity: 0.55;
  transform: translateY(-50%);
  filter: blur(0.3px);
  animation: footerStrokeDrift 18s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.footer::after {
  content: '';
  position: absolute;
  bottom: -160px; left: -120px;
  width: 420px; height: 420px;
  background: radial-gradient(circle at 30% 30%, rgba(30,61,122,0.55), transparent 65%);
  filter: blur(40px);
  opacity: 0.7;
  z-index: 0;
  animation: footerBlobDrift 22s ease-in-out infinite alternate;
  pointer-events: none;
}
.footer-inner { position: relative; z-index: 2; }
@keyframes footerStrokeDrift {
  from { background-position: 0 50%, 0 50%; }
  to   { background-position: 220px 50%, 0 50%; }
}
@keyframes footerBlobDrift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(80px,-30px) scale(1.08); }
  100% { transform: translate(160px,20px) scale(0.95); }
}

/* footer columns rise in when footer enters view */
.footer-grid > div {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.footer.reveal:not(.in) .footer-grid > div {
  opacity: 0;
  transform: translateY(18px);
}
.footer-grid > div:nth-child(1) { transition-delay: 0.05s; }
.footer-grid > div:nth-child(2) { transition-delay: 0.15s; }
.footer-grid > div:nth-child(3) { transition-delay: 0.25s; }
.footer-grid > div:nth-child(4) { transition-delay: 0.35s; }

/* ─── FLOATING GOOGLE-COLOR DOTS (mid + footer) ─── */
.floating-dots {
  position: relative;
  pointer-events: none;
  z-index: 0;
}
.floating-dots span {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  display: block;
  filter: blur(0.2px);
  box-shadow: 0 6px 18px -6px rgba(0,0,0,0.25);
}
.floating-dots span:nth-child(1) { background: #4285F4; }
.floating-dots span:nth-child(2) { background: #EA4335; }
.floating-dots span:nth-child(3) { background: #FBBC05; }
.floating-dots span:nth-child(4) { background: #34A853; }

.floating-dots-mid {
  height: 0;
  margin: 0 auto;
  max-width: 1240px;
  pointer-events: none;
}
.floating-dots-mid span {
  width: 14px; height: 14px;
  animation: floatDotMid 16s ease-in-out infinite alternate;
}
.floating-dots-mid span:nth-child(1) { top: -180px; left: 6%;  animation-delay:   0s; }
.floating-dots-mid span:nth-child(2) { top: -260px; left: 32%; animation-delay: -3.5s; width: 10px; height: 10px; }
.floating-dots-mid span:nth-child(3) { top: -120px; left: 64%; animation-delay: -7s;   width: 16px; height: 16px; }
.floating-dots-mid span:nth-child(4) { top: -220px; left: 88%; animation-delay: -11s;  }

@keyframes floatDotMid {
  0%   { transform: translate(0,0)         scale(1);    opacity: 0.7; }
  50%  { transform: translate(20px,-30px)  scale(1.18); opacity: 1;   }
  100% { transform: translate(-18px,16px)  scale(0.9);  opacity: 0.85;}
}

.floating-dots-footer {
  position: absolute;
  top: 24px; left: 0; right: 0;
  height: 100%;
  z-index: 1;
}
.floating-dots-footer span {
  width: 10px; height: 10px;
  box-shadow: 0 0 14px rgba(255,255,255,0.18);
  animation: floatDotFoot 18s ease-in-out infinite alternate;
}
.floating-dots-footer span:nth-child(1) { top: 12%; left: 8%;   animation-delay:   0s; }
.floating-dots-footer span:nth-child(2) { top: 70%; left: 28%;  animation-delay: -4s; width: 8px;  height: 8px;  }
.floating-dots-footer span:nth-child(3) { top: 24%; left: 62%;  animation-delay: -8s; width: 12px; height: 12px; }
.floating-dots-footer span:nth-child(4) { top: 78%; left: 88%;  animation-delay: -12s; }

@keyframes floatDotFoot {
  0%   { transform: translate(0,0)        scale(1);    opacity: 0.6; }
  50%  { transform: translate(-26px,18px) scale(1.25); opacity: 1;   }
  100% { transform: translate(20px,-22px) scale(0.85); opacity: 0.7; }
}

@media (max-width: 640px) {
  .floating-dots-mid { display: none; }
  .floating-dots-footer span { width: 8px; height: 8px; }
}

/* footer link underline sweep */
.footer-links a {
  position: relative;
  background-image: linear-gradient(var(--mustard), var(--mustard));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: color 0.25s, background-size 0.4s cubic-bezier(.2,.8,.2,1);
}
.footer-links a:hover { background-size: 100% 1px; }

/* footer platform pill subtle lift */
.footer-platforms a {
  transition: background 0.25s, color 0.25s, border-color 0.25s,
              transform 0.25s cubic-bezier(.2,.8,.2,1),
              box-shadow 0.25s;
}
.footer-platforms a:hover {
  transform: translateY(-2px) rotate(-1deg);
  box-shadow: 3px 3px 0 var(--crimson);
}

/* footer brand mark gentle bob */
.footer-brand .nav-logo-mark {
  animation: footerBrandBob 5s ease-in-out infinite;
  transform-origin: center;
}
@keyframes footerBrandBob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-3px) rotate(2deg); }
}

/* footer-strip relay dots */
.footer-strip span {
  display: inline-block;
  animation: stripBounce 1.6s ease-in-out infinite;
}
.footer-strip span:nth-child(1) { animation-delay: 0s; }
.footer-strip span:nth-child(2) { animation-delay: 0.2s; }
.footer-strip span:nth-child(3) { animation-delay: 0.4s; }
.footer-strip span:nth-child(4) { animation-delay: 0.6s; }
@keyframes stripBounce {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50%      { transform: translateY(-4px); opacity: 1; }
}

/* footer YouTube CTA — pulsing red halo so it stays alive */
.footer-yt-cta {
  position: relative;
  isolation: isolate;
}
.footer-yt-cta::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 100px;
  box-shadow: 0 0 0 0 rgba(255,0,0,0.55);
  animation: ytPulseSmall 2.4s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes ytPulseSmall {
  0%   { box-shadow: 0 0 0 0 rgba(255,0,0,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(255,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,0,0,0); }
}

/* ── SUBSCRIBE CTA (home climax): ambient pulse halo ── */
.yt-sub-btn {
  animation: ytClimaxPulse 2.6s ease-out infinite;
}
.yt-sub-btn:hover { animation-play-state: paused; }
@keyframes ytClimaxPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,0,0,0.55), 0 8px 24px -10px rgba(255,0,0,0.5); }
  70%  { box-shadow: 0 0 0 22px rgba(255,0,0,0), 0 8px 24px -10px rgba(255,0,0,0.2); }
  100% { box-shadow: 0 0 0 0 rgba(255,0,0,0), 0 8px 24px -10px rgba(255,0,0,0.5); }
}
.yt-sub-btn .yt-icon {
  animation: ytIconBeat 2.6s ease-in-out infinite;
}
@keyframes ytIconBeat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}
.yt-meta-num {
  background: linear-gradient(90deg, var(--mustard), var(--crimson), var(--mustard));
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ytMetaShine 6s linear infinite;
}
@keyframes ytMetaShine {
  from { background-position: 0% 50%; }
  to   { background-position: 220% 50%; }
}

/* ── QUOTES MARQUEE: soft glow + breath ── */
.quotes-marquee { position: relative; }
.quotes-marquee::after { transition: opacity 0.4s; }
.quotes-marquee:hover::after { opacity: 0.4; }
.quote-card {
  animation: quoteBreath 7s ease-in-out infinite;
}
.quote-card:nth-child(2n) { animation-delay: -2s; animation-duration: 8s; }
.quote-card:nth-child(3n) { animation-delay: -4s; animation-duration: 9s; }
@keyframes quoteBreath {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ── MANIFESTO: drifting blob + traveling underline ── */
.manifesto-blob {
  animation: manifestoBlobDrift 16s ease-in-out infinite alternate;
}
@keyframes manifestoBlobDrift {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); }
  50%  { transform: translate(-30px,20px) scale(1.05) rotate(6deg); }
  100% { transform: translate(40px,-10px) scale(0.97) rotate(-4deg); }
}
.manifesto-text em.hl {
  background-image: linear-gradient(transparent 60%, rgba(232,184,44,0.55) 60%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 1.2s 0.2s cubic-bezier(.2,.8,.2,1);
}
.manifesto.in .manifesto-text em.hl,
.reveal.in .manifesto-text em.hl,
.manifesto-text em.hl { background-size: 100% 100%; }

/* ── PAUSE HERO: breathing ring around the quote mark ── */
.pause-mark { position: relative; }
.pause-mark::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1.5px dashed rgba(232,184,44,0.5);
  animation: pauseRingSpin 14s linear infinite, pauseRingBreath 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pauseRingSpin {
  to { transform: rotate(360deg); }
}
@keyframes pauseRingBreath {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* ── PLATFORM ORBS gentle wobble on idle ── */
.platform-orbs > * {
  animation: orbHover 6s ease-in-out infinite;
}
.platform-orbs > *:nth-child(2) { animation-delay: -1.5s; }
.platform-orbs > *:nth-child(3) { animation-delay: -3s; }
.platform-orbs > *:nth-child(4) { animation-delay: -4.5s; }
@keyframes orbHover {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.platform-orbs > *:hover { animation-play-state: paused; }

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .intro { display: none !important; }
}