/* fx.css — visual polish + motion, layered ON TOP of app.css.
   Additive only: same structure/classes, real tokens. Safe to remove to revert.
   Loaded after app.css, so these rules win where they overlap. */

:root{
  --f-display:"Sora", var(--font);
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ── Display + mono typography on the elements that carry identity ─────────── */
.logo,
.spotlight__title,
.section__head h2,
.page-head h1,
.video-detail__title{ font-family:var(--f-display); letter-spacing:-.01em; }
.spotlight__code,
.card__duration,
.card__ph-code,
.facts dd{ font-family:var(--f-mono); }

/* ── Spotlight: more cinematic + ambient three.js canvas layer ────────────── */
.spotlight{ isolation:isolate; }
.spotlight__bg{ animation:fx-kenburns 28s ease-in-out infinite alternate; }
@media (prefers-reduced-motion:reduce){ .spotlight__bg{ animation:none; } }
@keyframes fx-kenburns{
  from{ transform:scale(1.15) translate3d(0,0,0); }
  to{ transform:scale(1.26) translate3d(-2%,-2%,0); }
}
.spotlight__bg{ z-index:0; }
.spotlight__fx{ position:absolute; inset:0; z-index:0; width:100%; height:100%;
  opacity:0; transition:opacity 1.1s ease; pointer-events:none; }
.spotlight__fx.is-in{ opacity:.55; }
.spotlight__glow{
  z-index:1;
  background:
    radial-gradient(760px 380px at 20% 22%, rgba(230,13,28,.40), transparent 66%),
    radial-gradient(520px 380px at 94% 88%, rgba(120,40,220,.13), transparent 70%),
    linear-gradient(180deg, rgba(10,10,12,.35), var(--bg) 97%);
}
.spotlight__inner{ position:relative; z-index:2; }
/* live "featured" pulse dot, added purely in CSS (no markup change) */
.spotlight__kicker{ display:inline-flex; align-items:center; gap:9px; }
.spotlight__kicker::before{ content:""; width:6px; height:6px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:fx-pulse 1.5s ease-out infinite; }
@media (prefers-reduced-motion:reduce){ .spotlight__kicker::before{ animation:none; } }
@keyframes fx-pulse{ 0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)} 70%{box-shadow:0 0 0 7px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)} }
.spotlight__poster{ will-change:transform; transition:box-shadow .3s ease; }
.spotlight__poster:hover{ box-shadow:var(--shadow), 0 0 0 1px rgba(255,42,55,.35), 0 18px 50px -18px rgba(230,13,28,.5); }

/* ── Section heads: glow on the accent bar ────────────────────────────────── */
.section__head h2::before{ box-shadow:0 0 14px -1px rgba(230,13,28,.75); }

/* ── Cards: scrim + play-button settle (lift/hover stay from app.css) ─────── */
.card__thumb::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.5)); opacity:.75; }
.card__badges, .card__duration, .card__seen, .card__play{ z-index:2; }
.card__play svg{ transform:translateY(7px); transition:transform .28s cubic-bezier(.2,.7,.2,1);
  filter:drop-shadow(0 10px 22px rgba(230,13,28,.5)); }
.card:hover .card__play svg{ transform:none; }
.card__img, .card__ph{ transition:transform .55s cubic-bezier(.2,.6,.2,1); }

/* ── Video page: player frame glow, nicer screenshots, button feedback ────── */
.player{ position:relative; }
.player::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 30px 80px -40px rgba(230,13,28,.3); }
.player__placeholder .player__overlay svg{ animation:fx-breathe 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .player__placeholder .player__overlay svg{ animation:none; } }
@keyframes fx-breathe{ 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.06); opacity:1 } }
.shot img{ transition:transform .45s cubic-bezier(.2,.6,.2,1); }
.shot{ overflow:hidden; }
.shot:hover img{ transform:scale(1.07); }
.rate__star{ transition:transform .15s ease, color .15s ease; }
.rate__star:hover{ transform:scale(1.18); }
.chip{ transition:transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease; }

/* ── Buttons: a touch more life (works everywhere) ────────────────────────── */
.btn{ transition:transform .14s ease, filter .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; }
.btn--primary:hover{ box-shadow:var(--shadow-red), 0 0 0 1px rgba(255,42,55,.3); }

/* Reveals are driven entirely by site-fx.js (GSAP) so a failed CDN never hides content. */