/* ============================================================
   Merk Arts — THEME: CINEMA
   Direction: dark, immersive, premium, gritty-cinematic anime.
   The base (tokens.css + components.css) is already Cinema-dark;
   this sheet pushes it to UNMISTAKABLY premium-cinematic — film
   grain, vignette, letterbox, 35mm strip + revolver motifs, deep
   shadows, Merk crimson primary, warm gold flourishes.
   ALL rules scoped under .theme-cinema. CSS only.
   ============================================================ */

/* ---------------------------------------------------------------
   1. Token tuning — deepen the blacks, warm the gold, richer shape
   --------------------------------------------------------------- */
.theme-cinema{
  /* Deeper, slightly warm near-black surfaces (35mm darkroom) */
  --bg:        #07070A;
  --bg-elev:   #101013;
  --surface:   #131318;
  --surface-2: #1C1C22;
  --scrim:     rgba(5,5,8,.78);

  /* Type — slightly warm, filmic paper-white */
  --text:      #F1EDE4;
  --text-dim:  #BBB5A9;
  --text-mute: #908C84;   /* nudged lighter to clear WCAG AA on all Cinema surfaces (incl. surface-2) */

  --line:        rgba(231,178,76,.12);
  --line-strong: rgba(231,178,76,.24);

  /* Premium warm gold accent */
  --accent:    #E7B24C;
  --accent-2:  #F2C96E;
  --on-accent: #1A1205;

  --radius:    13px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --card-radius: var(--radius);

  /* Cinematic, deep, theatrical shadows */
  --shadow-1: 0 18px 44px -22px rgba(0,0,0,.86);
  --shadow-2: 0 40px 100px -38px rgba(0,0,0,.95);
  --shadow-card: var(--shadow-1);

  --hero-min: 86vh;

  /* Display = Anton, dramatic */
  --display-tracking: .005em;
  --display-leading: .9;

  /* Slower, weightier cinematic motion */
  --ease: cubic-bezier(.22,.61,.21,1);
  --ease-spring: cubic-bezier(.16,.84,.28,1.04);
  --dur: .62s;

  /* Atmosphere */
  --grain-opacity: .07;
  --hero-overlay:
    linear-gradient(180deg, rgba(7,7,10,.42) 0%, transparent 26%, rgba(7,7,10,.30) 52%, rgba(7,7,10,.84) 84%, var(--bg) 100%);
  --hero-side-overlay:
    linear-gradient(92deg, var(--bg) 4%, rgba(7,7,10,.72) 34%, rgba(7,7,10,.12) 66%, transparent 86%);

  /* Reusable filmic accents */
  --film-gold: linear-gradient(180deg, var(--accent-2), var(--accent) 55%, #B8842E);
  --glow-red:  0 0 0 1px rgba(192,39,45,.5), 0 18px 46px -14px rgba(192,39,45,.7);
  --glow-gold: 0 0 0 1px rgba(231,178,76,.5), 0 16px 40px -14px rgba(231,178,76,.5);
}

/* ---------------------------------------------------------------
   2. Global atmosphere — heavier grain + a cinematic warm/cold
      lighting gradient, and a fixed top/bottom letterbox tint.
   --------------------------------------------------------------- */
.theme-cinema body::after{
  background:
    radial-gradient(60% 50% at 84% -8%, rgba(192,39,45,.20), transparent 60%),
    radial-gradient(50% 46% at 2% 106%, rgba(231,178,76,.10), transparent 62%),
    radial-gradient(140% 100% at 50% 50%, transparent 58%, rgba(0,0,0,.42) 100%);
}
/* animated grain flicker — a true 35mm shimmer (motion-safe) */
.theme-cinema body::before{
  mix-blend-mode:soft-light;
  animation:tc-grain 1.1s steps(3) infinite;
}
@keyframes tc-grain{
  0%{ transform:translate(0,0); }
  33%{ transform:translate(-2%,1%); }
  66%{ transform:translate(1.5%,-1.5%); }
  100%{ transform:translate(0,0); }
}

/* Faint perforated 35mm film-strip down both edges of the viewport */
.theme-cinema .screen::before,
.theme-cinema .screen::after{
  content:"";position:fixed;top:0;bottom:0;width:18px;z-index:25;pointer-events:none;
  opacity:.5;
  background:
    repeating-linear-gradient(180deg,
      transparent 0 12px,
      rgba(231,178,76,.16) 12px 22px,
      transparent 22px 34px);
  -webkit-mask:linear-gradient(180deg, transparent, #000 12% 88%, transparent);
          mask:linear-gradient(180deg, transparent, #000 12% 88%, transparent);
}
.theme-cinema .screen::before{ left:0; }
.theme-cinema .screen::after{ right:0; }
@media (max-width:980px){
  .theme-cinema .screen::before,
  .theme-cinema .screen::after{ display:none; }
}

/* Focus ring → gold (premium) */
.theme-cinema :focus-visible{ outline-color:var(--accent); }

/* ---------------------------------------------------------------
   3. Top nav — theatre-marquee chrome
   --------------------------------------------------------------- */
.theme-cinema .app-nav{
  background:linear-gradient(180deg, rgba(7,7,10,.92), rgba(7,7,10,.62));
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(192,39,45,.18), 0 18px 40px -30px #000;
}
.theme-cinema .brand-word{
  letter-spacing:.08em;
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.theme-cinema .brand-word b{
  color:var(--brand-bright);
  text-shadow:0 0 22px rgba(226,59,65,.55);
}
.theme-cinema .nav-links a:hover{
  color:var(--accent);
  background:rgba(231,178,76,.08);
}
.theme-cinema .nav-links a[aria-current="page"]{ color:var(--text); }
.theme-cinema .nav-links a[aria-current="page"]::after{
  background:var(--film-gold);
  box-shadow:0 0 14px rgba(231,178,76,.7);
  height:2px;
}
.theme-cinema .brand-cyl{
  box-shadow:0 0 0 1px var(--line), 0 0 22px -6px rgba(192,39,45,.6);
  transition:box-shadow .3s var(--ease);
}
.theme-cinema .brand-cyl:hover{ box-shadow:0 0 0 1px var(--accent), 0 0 26px -4px rgba(231,178,76,.8); }

/* ---------------------------------------------------------------
   4. Buttons — premium primary with gold sheen on hover
   --------------------------------------------------------------- */
.theme-cinema .btn{
  border-radius:var(--pill);
  letter-spacing:.03em;
  text-transform:uppercase;
  font-size:13px;
}
.theme-cinema .btn--primary{
  background:linear-gradient(180deg, var(--brand-bright), var(--brand) 70%, var(--brand-deep));
  border-color:transparent;
  box-shadow:0 16px 36px -16px rgba(192,39,45,.95), inset 0 1px 0 rgba(255,255,255,.18);
}
.theme-cinema .btn--primary:hover{
  background:linear-gradient(180deg, #F0464C, var(--brand-bright));
  box-shadow:0 20px 46px -14px rgba(226,59,65,.95), 0 0 0 1px rgba(231,178,76,.4);
  transform:translateY(-2px);
}
.theme-cinema .btn--ghost{
  border-color:var(--line-strong);
  background:rgba(231,178,76,.03);
}
.theme-cinema .btn--ghost:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(231,178,76,.08);
}
.theme-cinema .icon-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:rgba(231,178,76,.07);
  box-shadow:var(--glow-gold);
}

/* ---------------------------------------------------------------
   5. Hero — full-bleed key art, letterbox bars, heavy vignette,
      dramatic staggered title reveal.
   --------------------------------------------------------------- */
.theme-cinema .hero{
  min-height:var(--hero-min);
}
.theme-cinema .hero__bg{
  object-position:center 20%;
  filter:contrast(1.08) saturate(1.05) brightness(.92);
  animation:tc-kenburns 26s ease-in-out infinite alternate;
}
@keyframes tc-kenburns{
  from{ transform:scale(1.04) translateY(0); }
  to{   transform:scale(1.12) translateY(-2%); }
}
/* extra vignette layer on top of the base scrim */
.theme-cinema .hero__scrim{
  background:
    var(--hero-overlay),
    var(--hero-side-overlay),
    radial-gradient(120% 96% at 50% 38%, transparent 46%, rgba(0,0,0,.62) 100%);
}
/* letterbox bars — top & bottom cinematic black bands */
.theme-cinema .hero::before,
.theme-cinema .hero::after{
  content:"";position:absolute;left:0;right:0;height:clamp(20px,4.5vh,52px);z-index:2;
  pointer-events:none;background:#000;
}
.theme-cinema .hero::before{ top:0; box-shadow:0 1px 0 rgba(231,178,76,.14); }
.theme-cinema .hero::after{ bottom:0; box-shadow:0 -1px 0 rgba(231,178,76,.14); }

.theme-cinema .hero__inner{ position:relative;z-index:3; }
.theme-cinema .hero__kicker{
  font-family:var(--font-accent);
  font-style:italic;
  color:var(--accent);
  letter-spacing:.05em;
  font-size:15px;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
  position:relative;padding-left:46px;
}
.theme-cinema .hero__kicker::before{
  content:"";position:absolute;left:0;top:50%;width:34px;height:1px;
  background:var(--film-gold);transform:translateY(-50%);
  box-shadow:0 0 10px rgba(231,178,76,.6);
}
.theme-cinema .hero__title{
  font-size:clamp(56px,11vw,150px);
  letter-spacing:.004em;
  text-shadow:0 10px 60px rgba(0,0,0,.7), 0 2px 0 rgba(0,0,0,.4);
}
.theme-cinema .hero__synopsis{
  font-size:16.5px;
  border-left:2px solid rgba(231,178,76,.4);
  padding-left:18px;
}
.theme-cinema .studio-badge{
  border-color:var(--line-strong);
  background:var(--scrim);
}
.theme-cinema .studio-badge:hover{
  border-color:var(--accent);
  box-shadow:var(--glow-gold);
}
.theme-cinema .studio-badge b{ color:var(--accent-2); }

/* Hero load choreography (motion-safe; disabled by .no-anim / reduce) */
.theme-cinema .hero__kicker,
.theme-cinema .hero__title,
.theme-cinema .hero__meta,
.theme-cinema .hero__synopsis,
.theme-cinema .hero__actions{
  animation:tc-rise .9s var(--ease) both;
}
.theme-cinema .hero__title{ animation-delay:.10s; }
.theme-cinema .hero__meta{ animation-delay:.22s; }
.theme-cinema .hero__synopsis{ animation-delay:.30s; }
.theme-cinema .hero__actions{ animation-delay:.40s; }
@keyframes tc-rise{
  from{ opacity:0; transform:translateY(26px); filter:blur(6px); }
  to{   opacity:1; transform:none; filter:none; }
}

/* ---------------------------------------------------------------
   6. Rails — filmic section headers with a perforation accent
   --------------------------------------------------------------- */
.theme-cinema .rail-head h2{
  position:relative;padding-left:20px;letter-spacing:.01em;
}
.theme-cinema .rail-head h2::before{
  content:"";position:absolute;left:0;top:8%;bottom:8%;width:5px;border-radius:3px;
  background:linear-gradient(180deg, var(--brand-bright), var(--brand-deep));
  box-shadow:0 0 16px -2px rgba(192,39,45,.8);
}
.theme-cinema .rail-head .see-all:hover{ color:var(--accent); }
.theme-cinema .rail__btn{
  background:rgba(10,10,13,.82);
  border-color:var(--line-strong);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.theme-cinema .rail__btn:hover{
  background:var(--brand);border-color:var(--accent);
  box-shadow:var(--glow-red);
}

/* ---------------------------------------------------------------
   7. Poster cards — lift + crimson/gold dual glow, gold key-line
   --------------------------------------------------------------- */
.theme-cinema .card{
  background:var(--surface);
  box-shadow:0 8px 24px -18px rgba(0,0,0,.8);
}
.theme-cinema .card__art{
  border:1px solid var(--line);
}
.theme-cinema .card__art::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg, transparent 55%, rgba(7,7,10,.55) 100%);
  opacity:.65;transition:opacity .35s var(--ease);
}
.theme-cinema .card:hover{
  transform:translateY(-9px) scale(1.012);
  box-shadow:
    0 36px 70px -28px rgba(0,0,0,.9),
    0 0 0 1px rgba(231,178,76,.45),
    0 22px 50px -22px rgba(192,39,45,.6);
}
.theme-cinema .card:hover .card__art::after{ opacity:.3; }
.theme-cinema .card:hover .card__title{ color:var(--accent); }
.theme-cinema .card__badge{
  background:rgba(7,7,10,.78);
  border-color:var(--line-strong);
  color:var(--accent);
  letter-spacing:.1em;
}
.theme-cinema .card__play{
  background:linear-gradient(180deg, var(--brand-bright), var(--brand));
  box-shadow:0 14px 34px -10px rgba(192,39,45,.95), 0 0 0 4px rgba(231,178,76,.28);
}
.theme-cinema .card__progress{ background:rgba(0,0,0,.5); }
.theme-cinema .card__progress > i{
  background:var(--film-gold);
  box-shadow:0 0 12px rgba(231,178,76,.7);
}
.theme-cinema .card__title{ transition:color .25s var(--ease); }

/* ---------------------------------------------------------------
   8. Studios strip — embossed plates with crimson corner wash
   --------------------------------------------------------------- */
.theme-cinema .studio-card{
  background:
    radial-gradient(130% 130% at 100% 0%, rgba(192,39,45,.22), transparent 52%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border-color:var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), var(--shadow-1);
  overflow:hidden;
}
.theme-cinema .studio-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg, transparent 0 9px, rgba(231,178,76,.05) 9px 10px);
  -webkit-mask:linear-gradient(180deg, transparent, #000);mask:linear-gradient(180deg, transparent, #000);
}
.theme-cinema .studio-card:hover{
  border-color:var(--accent);
  box-shadow:var(--glow-gold), var(--shadow-2);
}
.theme-cinema .studio-card .studio-card__eyebrow{ color:var(--accent); letter-spacing:.24em; }
.theme-cinema .studio-card .studio-card__name{ text-shadow:0 2px 16px rgba(0,0,0,.5); }

/* ---------------------------------------------------------------
   9. Revolver overlay — near-black grain backdrop, crimson
      chambers with gold rim + red glow, dramatic spin.
   --------------------------------------------------------------- */
.theme-cinema .rev-backdrop{
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(20,8,9,.92), rgba(4,4,7,.97)),
    radial-gradient(40% 40% at 50% 50%, rgba(192,39,45,.10), transparent 70%);
  backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);
}
/* grain over the backdrop for a gritty darkroom feel */
.theme-cinema .rev-backdrop::after{
  content:"";position:absolute;inset:0;opacity:.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.theme-cinema .rev-hub svg{ animation-duration:14s; }
.theme-cinema .rev-hub .cyl-dots circle{ fill:var(--brand-bright); }
.theme-cinema .rev-close:hover{
  border-color:var(--accent);color:var(--accent);
  box-shadow:var(--glow-gold);
}
.theme-cinema .chamber .dot{
  background:radial-gradient(120% 120% at 35% 25%, var(--brand-bright), var(--brand) 55%, var(--brand-deep));
  box-shadow:
    0 0 0 2px rgba(231,178,76,.55),
    0 0 0 5px rgba(7,7,10,.7),
    0 18px 40px -12px rgba(192,39,45,.9);
}
.theme-cinema .chamber:hover .dot,
.theme-cinema .chamber:focus-visible .dot{
  transform:scale(1.16);
  box-shadow:
    0 0 0 2px var(--accent-2),
    0 0 0 6px rgba(7,7,10,.7),
    0 22px 52px -8px rgba(226,59,65,.95),
    0 0 30px rgba(231,178,76,.4);
}
.theme-cinema .chamber:hover .clbl,
.theme-cinema .chamber:focus-visible .clbl{ color:var(--accent); }
.theme-cinema .rev-hint{ color:var(--text-mute); letter-spacing:.26em; }
/* dramatic cocking spin as the menu opens */
.theme-cinema .rev-overlay.open .rev-stage{ animation:tc-cock 1.05s var(--ease-spring) both; }
@keyframes tc-cock{
  0%{ transform:rotate(-42deg) scale(.86); }
  70%{ transform:rotate(6deg) scale(1.02); }
  100%{ transform:rotate(0) scale(1); }
}

/* ---------------------------------------------------------------
   10. Browse — search + chips dressed in gold/crimson
   --------------------------------------------------------------- */
.theme-cinema .browse-head h1{
  letter-spacing:.005em;
  text-shadow:0 8px 40px rgba(0,0,0,.5);
}
.theme-cinema .search input{
  background:rgba(19,19,24,.85);
  border-color:var(--line-strong);
}
.theme-cinema .search input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(231,178,76,.18), var(--glow-gold);
}
.theme-cinema .filter-group .filter-label{ color:var(--accent); letter-spacing:.2em; }
.theme-cinema .chip{
  border-color:var(--line-strong);
  background:rgba(231,178,76,.02);
}
.theme-cinema .chip:hover{
  border-color:var(--accent);color:var(--accent);
  background:rgba(231,178,76,.08);
}
.theme-cinema .chip.is-active{
  background:linear-gradient(180deg, var(--brand-bright), var(--brand));
  border-color:var(--accent);color:var(--on-brand);
  box-shadow:var(--glow-red);
}

/* ---------------------------------------------------------------
   11. Series — cinematic banner, gold key-line poster
   --------------------------------------------------------------- */
.theme-cinema .series-hero{ min-height:52vh; }
.theme-cinema .series-hero__bg{
  filter:contrast(1.07) saturate(1.04) brightness(.9);
}
.theme-cinema .series-hero__scrim{
  background:
    var(--hero-overlay),
    var(--hero-side-overlay),
    radial-gradient(120% 90% at 50% 30%, transparent 50%, rgba(0,0,0,.55) 100%);
}
.theme-cinema .series__poster{
  border:1px solid var(--line-strong);
  box-shadow:0 40px 90px -32px #000, 0 0 0 1px rgba(231,178,76,.25);
}
.theme-cinema .series__kicker{ font-style:italic;color:var(--accent);letter-spacing:.04em; }
.theme-cinema .series__title{ text-shadow:0 10px 48px rgba(0,0,0,.6); }
.theme-cinema .studio-link{ color:var(--accent); }
.theme-cinema .studio-link:hover{ color:var(--accent-2); }
.theme-cinema .section-title{
  position:relative;padding-left:20px;
}
.theme-cinema .section-title::before{
  content:"";position:absolute;left:0;top:8%;bottom:8%;width:5px;border-radius:3px;
  background:linear-gradient(180deg, var(--brand-bright), var(--brand-deep));
  box-shadow:0 0 16px -2px rgba(192,39,45,.8);
}
.theme-cinema .ep{
  background:linear-gradient(180deg, var(--surface), var(--bg-elev));
}
.theme-cinema .ep:hover{
  border-color:var(--accent);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow:var(--shadow-1), inset 3px 0 0 var(--brand-bright);
  transform:translateX(5px);
}
.theme-cinema .ep__num{ color:var(--accent);border-color:var(--line-strong); }
.theme-cinema .ep__progress > i{ background:var(--film-gold);box-shadow:0 0 10px rgba(231,178,76,.6); }
.theme-cinema .cast__person{
  background:linear-gradient(180deg, var(--surface), var(--bg-elev));
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.theme-cinema .cast__person:hover{ border-color:var(--accent);transform:translateY(-2px); }
.theme-cinema .cast__avatar{
  background:radial-gradient(120% 120% at 35% 25%, var(--brand), var(--brand-deep));
  box-shadow:0 0 0 2px rgba(231,178,76,.3);
}

/* ---------------------------------------------------------------
   12. Player / X-Ray — the centrepiece. Theatre frame, gold
       active scrubber, glowing X-Ray, letterboxed stage.
   --------------------------------------------------------------- */
.theme-cinema .stage{
  border:1px solid var(--line-strong);
  box-shadow:0 50px 120px -40px #000, 0 0 0 1px rgba(231,178,76,.18);
}
/* letterbox bands inside the stage */
.theme-cinema .stage::before,
.theme-cinema .stage::after{
  content:"";position:absolute;left:0;right:0;height:5.5%;z-index:3;
  pointer-events:none;background:#000;
}
.theme-cinema .stage::before{ top:0; }
.theme-cinema .stage::after{ bottom:0; }
.theme-cinema .stage__vignette{
  background:
    radial-gradient(130% 90% at 50% 120%, rgba(0,0,0,.6), transparent 58%),
    radial-gradient(110% 100% at 50% 50%, transparent 52%, rgba(0,0,0,.5) 100%);
}
.theme-cinema [data-playtoggle]{
  background:radial-gradient(120% 120% at 35% 25%, var(--brand-bright), var(--brand) 60%, var(--brand-deep));
  box-shadow:0 22px 60px -16px rgba(192,39,45,.95), 0 0 0 6px rgba(231,178,76,.22), inset 0 1px 0 rgba(255,255,255,.2);
}
.theme-cinema [data-playtoggle]:hover{
  transform:scale(1.1);
  box-shadow:0 26px 70px -14px rgba(226,59,65,.95), 0 0 0 8px rgba(231,178,76,.32);
}
/* subtle breathing pulse while idle/playing (motion-safe) */
.theme-cinema .player:not(.is-paused) [data-playtoggle]{
  animation:tc-pulse 2.6s var(--ease) infinite;
}
@keyframes tc-pulse{
  0%,100%{ box-shadow:0 22px 60px -16px rgba(192,39,45,.95), 0 0 0 6px rgba(231,178,76,.22); }
  50%{ box-shadow:0 22px 60px -16px rgba(192,39,45,.95), 0 0 0 12px rgba(231,178,76,.04); }
}
/* X-Ray overlay — premium glassy crimson/gold */
.theme-cinema .xray{
  background:linear-gradient(0deg, rgba(5,5,8,.95) 30%, rgba(5,5,8,.4) 75%, transparent);
}
.theme-cinema .xray__badge{ color:var(--accent); letter-spacing:.24em; }
.theme-cinema .xray__badge::before{
  background:var(--brand-bright);
  box-shadow:0 0 14px var(--brand-bright);
  animation:tc-blink 1.4s steps(2) infinite;
}
@keyframes tc-blink{ 50%{ opacity:.35; } }
.theme-cinema .xray__card{
  border-color:var(--line-strong);
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow:0 16px 40px -22px #000;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.theme-cinema .xray__card:hover{ border-color:var(--accent);transform:translateY(-2px); }
.theme-cinema .xray__avatar{
  background:radial-gradient(120% 120% at 35% 25%, var(--brand), var(--brand-deep));
  box-shadow:0 0 0 2px rgba(231,178,76,.3);
}
.theme-cinema .xray__va{ color:var(--accent); }
/* Controls bar — theatre console */
.theme-cinema .controls,
.theme-cinema .upnext,
.theme-cinema .meta-block .meta-synopsis{
  /* keep base; tune below */
}
.theme-cinema .controls{
  background:linear-gradient(180deg, var(--surface), var(--bg-elev));
  border-color:var(--line-strong);
  box-shadow:var(--shadow-1);
}
.theme-cinema .controls .ctrl-btn:hover{ color:var(--accent);background:rgba(231,178,76,.07); }
.theme-cinema .scrubber{ background:rgba(231,178,76,.14); }
.theme-cinema .scrubber > i{
  background:var(--film-gold);
  box-shadow:0 0 14px rgba(231,178,76,.7);
}
.theme-cinema .scrubber::after{
  background:var(--accent-2);
  box-shadow:0 0 0 3px var(--accent), 0 0 16px rgba(231,178,76,.8);
}
.theme-cinema .upnext{
  background:linear-gradient(180deg, var(--surface), var(--bg-elev));
  border-color:var(--line);
}
.theme-cinema .upnext__count{ color:var(--accent); }
.theme-cinema .credits{ border-left-color:var(--line-strong); }
.theme-cinema .credits dd{ color:var(--text); }
.theme-cinema .licensor{ color:var(--accent); letter-spacing:.16em; }

/* ---------------------------------------------------------------
   13. Bits — pills, badges, score, eyebrows
   --------------------------------------------------------------- */
.theme-cinema .pill .score{ color:var(--accent-2); }
.theme-cinema .section-eyebrow{ color:var(--accent); letter-spacing:.32em; }
.theme-cinema .badge{ border-color:var(--line-strong); }
.theme-cinema .label{
  color:var(--accent);
  border-color:var(--line-strong);
  letter-spacing:.36em;
}
.theme-cinema .back-link:hover{ border-color:var(--accent);color:var(--accent); }

/* ---------------------------------------------------------------
   14. Footer — closing-credits feel
   --------------------------------------------------------------- */
.theme-cinema .footer{
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(192,39,45,.08), transparent 60%),
    var(--bg-elev);
  border-top:1px solid var(--line-strong);
}
.theme-cinema .footer__tagline{ color:var(--accent); }
.theme-cinema .footer__col h3{ color:var(--accent); letter-spacing:.24em; }
.theme-cinema .footer__col a:hover{ color:var(--accent); }
.theme-cinema .social a:hover{
  border-color:var(--accent);color:var(--accent);
  box-shadow:var(--glow-gold);
}

/* ---------------------------------------------------------------
   15. Reduced motion / screenshot mode — kill our looping anims
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .theme-cinema body::before,
  .theme-cinema .hero__bg,
  .theme-cinema .player:not(.is-paused) [data-playtoggle],
  .theme-cinema .xray__badge::before,
  .theme-cinema .rev-overlay.open .rev-stage,
  .theme-cinema .hero__kicker,
  .theme-cinema .hero__title,
  .theme-cinema .hero__meta,
  .theme-cinema .hero__synopsis,
  .theme-cinema .hero__actions{ animation:none !important; }
}
.theme-cinema.no-anim body::before,
.no-anim .theme-cinema body::before,
.theme-cinema .no-anim *{ animation:none !important; }