/* ============================================================
   PEAK CINEMA — monochrome theme
   One consolidated stylesheet: base → header → hero → rows →
   grid → modal → episodes → player → overlays → footer →
   responsive. Perf notes are inline where a cheaper technique
   was chosen on purpose.
   ============================================================ */
:root{
  --accent:#ffffff;
  --accent-dim:#cfcfcf;
  --accent-deep:#8a8a8a;
  --grad:linear-gradient(115deg,#ffffff,#c7c7c7,#f4f4f4,#bdbdbd,#ffffff);
  --bg:#0a0a0a;
  --bg-2:#121212;
  --bg-3:#181818;
  --card:#161616;
  --text:#f5f5f5;
  --muted:#9a9a9a;
  --line:#2a2a2a;
  --shadow:0 18px 50px rgba(0,0,0,.7);
  --glow:0 0 22px rgba(255,255,255,.35);
  --glow-soft:0 0 40px rgba(255,255,255,.18);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ===================== BASE ===================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  /* no background-attachment:fixed — it forces a repaint on every scroll */
  background:radial-gradient(150% 110% at 50% -10%,#171717 0%,#0b0b0b 44%,#080808 78%);
  background-color:var(--bg);
  color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#333;border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--accent-deep)}
.hidden{display:none !important}
img{display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,.logo,.hero-title,.mh-title{font-family:"Poppins",sans-serif}

/* ---- ambient light mesh (transform-only drift = composited) ---- */
.mesh{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.7;
  background:
    radial-gradient(42% 42% at 12% 16%,rgba(255,255,255,.055),transparent 62%),
    radial-gradient(40% 40% at 88% 10%,rgba(255,255,255,.04),transparent 62%),
    radial-gradient(46% 46% at 82% 80%,rgba(255,255,255,.035),transparent 62%),
    radial-gradient(42% 42% at 16% 88%,rgba(255,255,255,.03),transparent 62%);
  animation:meshDrift 26s ease-in-out infinite alternate;
}
@keyframes meshDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(0,-2%,0) scale(1.06)}}

/* ---- film grain (static texture — animating it repainted the whole screen) ---- */
.grain{
  position:fixed;inset:0;z-index:92;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:150px 150px;
}

/* ===================== HEADER ===================== */
/* --sp (scroll progress 0→1, set from JS) crossfades the two background
   layers. Padding is static so scrolling never triggers layout here. */
#header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:14px 4%;display:flex;align-items:center;
  transform:translateY(-115%);              /* hidden until booted */
}
#header.booted{transform:translateY(0);transition:transform 1.05s var(--ease-out) .05s}
#header::before,#header::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
}
#header::before{                            /* top scrim, visible at rest */
  background:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,0) 100%);
  opacity:calc(1 - var(--sp,0));
}
#header::after{                             /* solid blurred bar, fades in */
  background:linear-gradient(180deg,rgba(10,10,10,.92),rgba(10,10,10,.8));
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 12px 34px rgba(0,0,0,.55);
  border-bottom:1px solid rgba(255,255,255,.12);
  opacity:var(--sp,0);
}
.header-inner{position:relative;z-index:1;display:flex;align-items:center;width:100%;gap:34px}
.logo{flex-shrink:0;display:flex;align-items:center;gap:11px;color:var(--text)}
.logo-img{height:44px;width:44px;object-fit:cover;border-radius:50%;filter:contrast(1.05);transition:transform .2s var(--ease),box-shadow .2s}
.logo:hover .logo-img{transform:scale(1.05);box-shadow:var(--glow-soft)}
.logo-word{font-family:"Poppins";font-size:1.5rem;font-weight:800;letter-spacing:.5px;line-height:1;white-space:nowrap}
.logo-thin{color:var(--accent);font-weight:300;text-shadow:var(--glow-soft)}
.nav-links{display:flex;gap:26px;flex:1;justify-content:center}
.nav-links a{color:var(--muted);font-size:.95rem;font-weight:500;padding:4px 0;transition:color .3s var(--ease-out)}
.nav-links a:hover{color:#fff}
.nav-links a.active{
  color:#fff;background:var(--grad);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.3));
  animation:hueSlide 6s linear infinite;font-weight:600;
}
@keyframes hueSlide{to{background-position:220% center}}
.header-right{display:flex;align-items:center;gap:16px;margin-left:auto}
.search-box{
  display:flex;align-items:center;gap:8px;
  background:rgba(14,14,14,.7);border:1px solid var(--line);
  border-radius:30px;padding:9px 15px;transition:border-color .25s,box-shadow .25s,background .25s;
}
.search-box:focus-within{border-color:var(--accent);box-shadow:var(--glow-soft);background:rgba(16,16,16,.9)}
.search-icon{width:18px;height:18px;color:var(--muted);flex-shrink:0;transition:color .2s}
.search-box:focus-within .search-icon{color:var(--accent)}
.search-box input{background:none;border:none;outline:none;color:var(--text);width:180px;font-size:.9rem;font-family:inherit}
.search-box input::placeholder{color:var(--muted)}
/* mobile-only icon buttons (shown in the ≤900px media query) */
.search-toggle,.nav-toggle{
  display:none;background:none;border:none;cursor:pointer;color:var(--text);
  width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center;
  transition:background .2s,color .2s;flex-shrink:0;-webkit-tap-highlight-color:transparent;
}
.search-toggle:active,.nav-toggle:active{background:rgba(255,255,255,.08)}
.search-toggle svg{width:24px;height:24px}
.nav-toggle{flex-direction:column;gap:5px}
.nav-toggle span{display:block;width:22px;height:2px;border-radius:2px;background:currentColor;transition:.25s var(--ease)}
.nav-toggle:hover span{background:var(--accent)}

/* ===================== HERO ===================== */
.hero{position:relative;height:90vh;min-height:560px;width:100%;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center 18%;
  opacity:1;transition:opacity 1s var(--ease);
  animation:heroZoom 14s ease-out infinite alternate;   /* transform-only = composited */
}
@keyframes heroZoom{from{transform:scale(1.04)}to{transform:scale(1.12)}}
.hero-bg-next{opacity:0}
.hero-vignette{position:absolute;inset:0;background:radial-gradient(120% 80% at 70% 30%,transparent 40%,rgba(7,11,13,.6) 100%)}
.hero-fade-bottom{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,13,0) 40%,var(--bg) 99%)}
.hero-fade-left{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,11,13,.92) 0%,rgba(7,11,13,.45) 45%,rgba(7,11,13,0) 75%)}
/* static light bleed — animating a blended full-screen layer re-composited
   every frame on top of the zooming backdrop and cost real frame time */
.hero-glow{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(42% 58% at 14% 74%,rgba(255,255,255,.10),transparent 66%),
    radial-gradient(38% 48% at 84% 24%,rgba(255,255,255,.07),transparent 68%);
}
.hero-content{position:absolute;bottom:19%;left:4%;max-width:640px;z-index:5}
/* staggered fadeUp reveal — hero children start at opacity:0 and rely on
   this animation to appear. NEVER set another `animation` on a child
   (e.g. .hero-title) or it replaces fadeUp and the element stays invisible. */
.hero-content>*{opacity:0;animation:fadeUp .7s var(--ease) forwards}
.hero-tag{animation-delay:.05s}
.hero-title{animation-delay:.15s}
.hero-meta{animation-delay:.25s}
.hero-overview{animation-delay:.35s}
.hero-btns{animation-delay:.45s}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
/* directional carousel slide for the hero copy. On a next/prev navigation the
   WHOLE block travels in from the side you're heading toward and fades as one
   unit — so the motion is actually visible. The per-line fade-up stagger above
   is only for the first page load; during a slide we force the children fully
   visible (opacity:1, no stagger) and let the container carry the animation,
   otherwise the block would slide while its lines are still transparent. */
.hero-content.slide-next>*,
.hero-content.slide-prev>*{opacity:1;animation:none}
.hero-content.slide-next{animation:heroSlideNext .6s var(--ease-out);will-change:transform,opacity}
.hero-content.slide-prev{animation:heroSlidePrev .6s var(--ease-out);will-change:transform,opacity}
@keyframes heroSlideNext{from{opacity:0;transform:translateX(90px)}to{opacity:1;transform:translateX(0)}}
@keyframes heroSlidePrev{from{opacity:0;transform:translateX(-90px)}to{opacity:1;transform:translateX(0)}}
.hero-tag{color:var(--accent-dim);font-weight:700;letter-spacing:2.5px;font-size:.78rem;margin-bottom:12px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.hero-tag::before{content:"";width:26px;height:2px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.4)}
/* solid fill on purpose — background-clip:text gradients have made this
   title render invisible before */
.hero-title{
  font-size:clamp(2rem,5.2vw,3.6rem);font-weight:800;line-height:1.06;margin-bottom:16px;
  letter-spacing:-1px;color:#f4f4f4;
  text-shadow:0 4px 26px rgba(0,0,0,.6),0 0 42px rgba(255,255,255,.12);
}
/* per-character decode slots (built by scrambleText in app.js).
   Each slot reserves its FINAL letter's width so the title never re-wraps
   while the glyphs churn — no words hopping between lines. */
.hero-title .sc-ch{position:relative;display:inline-block}
.hero-title .sc-fin{visibility:hidden}                 /* reserves width; shown when locked */
.hero-title .sc-scr{                                    /* churning glyph, out of flow */
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  white-space:pre;color:rgba(232,232,232,.4);
}
.hero-title .sc-ch.done .sc-fin{visibility:visible}     /* letter "pops" into place */
.hero-title .sc-ch.done .sc-scr{display:none}
.hero-meta{display:flex;gap:16px;align-items:center;margin-bottom:15px;font-size:.92rem;color:#c9d1d3;flex-wrap:wrap}
.hero-meta .pill{border:1px solid var(--line);border-radius:20px;padding:2px 10px;font-size:.78rem;color:var(--muted)}
.rating{color:#fff;font-weight:700}
.hero-overview{
  font-size:1.03rem;line-height:1.55;color:#dbe6e9;margin-bottom:26px;
  min-height:3.2em;text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.ov-caret{
  display:inline-block;width:9px;height:1.05em;margin-left:3px;vertical-align:-.16em;border-radius:1px;
  background:#fff;box-shadow:0 0 10px rgba(255,255,255,.6);
  /* solid & steady while typing; blinks only once typing finishes */
}
.hero-overview.done .ov-caret{animation:caretBlink .9s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}

/* ---- buttons (magnetic: --mx/--my set from JS) ---- */
.btn{
  display:inline-flex;align-items:center;gap:9px;border:none;cursor:pointer;
  font-size:1rem;font-weight:700;font-family:inherit;padding:13px 30px;border-radius:30px;
  position:relative;overflow:hidden;
  transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--bs,1));
  transition:transform .35s var(--ease-out),box-shadow .3s,background .25s,filter .25s;
}
.btn svg{width:20px;height:20px}
.btn::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.35),transparent 55%);opacity:0;transition:opacity .3s}
.btn:hover::after{opacity:1}
/* the hovered (and magnetically-pulled) button rides over its neighbour instead
   of slipping under it — default DOM order would keep the later sibling on top */
.btn:hover{--bs:1.045;z-index:2}
.btn:active{--bs:.96;z-index:2}
.btn-play{
  background:linear-gradient(135deg,#fff,#e8e8e8);color:#000;letter-spacing:.2px;
  box-shadow:0 6px 26px rgba(0,0,0,.45),0 0 26px rgba(255,255,255,.18);
}
.btn-play:hover{box-shadow:0 8px 30px rgba(0,0,0,.45),0 0 40px rgba(255,255,255,.32)}
.btn-info{background:rgba(100,110,114,.32);color:var(--text);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12)}
.btn-info:hover{background:rgba(130,140,144,.5)}

/* ---- hero dots + prev/next ---- */
.hero-controls{position:absolute;bottom:8%;left:0;right:0;z-index:7;display:flex;align-items:center;justify-content:center;gap:14px}
/* progress dots: inactive = small pip; active = a wide "track" whose inner
   fill (<i>) sweeps left→right over HERO_INTERVAL, showing time-to-next-slide */
.hero-dots{display:flex;align-items:center;gap:9px}
.hero-dots span{
  position:relative;width:8px;height:8px;flex-shrink:0;border-radius:50%;overflow:hidden;cursor:pointer;
  background:rgba(255,255,255,.28);
  /* the active pill springs open with a soft overshoot as the highlight
     travels from the previous dot — that little bounce is the "cool" bit */
  transition:width .55s cubic-bezier(.34,1.45,.5,1),border-radius .5s var(--ease-out),background .4s ease;
}
@media(hover:hover){.hero-dots span:hover{background:rgba(255,255,255,.5)}}
.hero-dots span.active{
  width:42px;border-radius:6px;background:rgba(255,255,255,.22);
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 18px rgba(255,255,255,.3);   /* static glow on the track */
}
/* a single light glint sweeps across the pill the instant it takes over —
   composited translateX, one-shot, then parks off-screen (no lingering paint) */
.hero-dots span.active::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.6) 50%,transparent 72%);
  transform:translateX(-130%);
  animation:dotGlint .75s var(--ease-out) .08s;
}
@keyframes dotGlint{to{transform:translateX(130%)}}
/* progress fill — clean solid light bar; glow lives on the track so nothing repaints */
.hero-dots span i{
  position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);border-radius:inherit;z-index:1;
  background:#efefef;opacity:0;transition:opacity .4s ease;
}
.hero-dots span.active i{opacity:1;will-change:transform;animation:dotFill var(--dur,11000ms) linear forwards}
@keyframes dotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-dots.paused span.active i{animation-play-state:paused}   /* frozen while tab hidden */
.hero-nav{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(18,18,18,.5);border:1px solid rgba(255,255,255,.18);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .2s,transform .2s var(--ease-out),box-shadow .2s,border-color .2s;
}
.hero-nav svg{width:22px;height:22px}
/* hover only on real pointing devices — on touch, :hover latches after a tap
   and the button would stay "lit" until you touched elsewhere */
@media(hover:hover){
  .hero-nav:hover{background:rgba(255,255,255,.92);color:#0b0b0b;border-color:#fff;transform:scale(1.1);box-shadow:0 0 22px rgba(255,255,255,.32)}
}
.hero-nav:active{transform:scale(.94)}
.hero-nav:focus{outline:none}
.hero-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ===================== ROWS ===================== */
#main{position:relative;z-index:6;padding-bottom:20px}
#rows{margin-top:30px}   /* matches the title→cards gap, so the first heading sits symmetrically */
/* reveal = opacity + translate only; the old blur(6px) transition on a
   full-width row was the single biggest scroll-jank source */
.row{margin:0 0 48px;opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.row.in-view{opacity:1;transform:translateY(0)}
/* category separator: a hairline that's brightest at the centre and dissolves
   toward both edges, so it echoes the centred titles instead of boxing them in.
   Sits above every row but the first, roughly midway in the inter-row gap. */
.row + .row::before{
  content:"";display:block;height:1px;margin:0 4% 44px;
  background:linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.10) 28%,
    rgba(255,255,255,.16) 50%,
    rgba(255,255,255,.10) 72%,
    transparent)
}
.row-title{font-size:1.65rem;font-weight:700;margin:0 4% 12px;display:flex;justify-content:center;align-items:center;text-align:center;letter-spacing:-.3px}
.row-wrap{position:relative}
/* top padding is hover headroom (the card lifts ~15px on hover); the negative
   top margin only partly cancels it, leaving a comfortable gap under the row
   title so a hovered card never crowds the heading. 4% side padding = row inset. */
.row-scroller{
  display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;
  padding:34px 4% 30px;margin:-16px 0 -20px;scroll-behavior:smooth;scrollbar-width:none;
}
.row-scroller::-webkit-scrollbar{display:none}
.row-arrow{
  position:absolute;top:0;bottom:0;width:5%;min-width:56px;z-index:20;border:none;cursor:pointer;
  background:linear-gradient(90deg,rgba(7,11,13,.85),rgba(7,11,13,0));color:#fff;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s;
}
.row-arrow.right{right:0;background:linear-gradient(270deg,rgba(7,11,13,.85),rgba(7,11,13,0))}
.row-arrow.left{left:0}
.row-arrow svg{width:34px;height:34px;transition:transform .2s;filter:drop-shadow(0 0 8px rgba(255,255,255,.5))}
.row-arrow:hover svg{transform:scale(1.25)}
.row-wrap:hover .row-arrow{opacity:1}

/* ---- cards (poster gated: skeleton shimmer until the image paints) ---- */
.card{
  position:relative;flex:0 0 auto;width:205px;aspect-ratio:2/3;border-radius:10px;overflow:hidden;
  cursor:pointer;background:var(--card);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card.loading{
  background:linear-gradient(100deg,#141414 30%,#242424 50%,#141414 70%);background-size:200% 100%;
  animation:cardRise .55s var(--ease-out) both,shimmer 1.3s linear infinite;
  animation-delay:calc(var(--i,0)*40ms),0s;
}
@keyframes cardRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes shimmer{to{background-position:-200% 0}}
.card img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s var(--ease-out),transform .5s var(--ease)}
.card img.loaded{opacity:1}
.card:hover{transform:translateY(-6px) scale(1.06);box-shadow:var(--shadow),0 0 0 1.5px rgba(255,255,255,.9),0 0 40px rgba(255,255,255,.14);z-index:15}
.card:hover img{transform:scale(1.08)}
.card-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:13px;
  opacity:0;transition:opacity .3s;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.94) 100%);
}
.card:hover .card-overlay{opacity:1}
.card-overlay h4{font-size:.95rem;margin-bottom:7px;line-height:1.25;font-family:"Inter"}
.card-overlay .co-meta{font-size:.78rem;color:var(--accent);font-weight:600;display:flex;gap:10px;align-items:center}
.card-play{
  position:absolute;top:11px;right:11px;width:36px;height:36px;border-radius:50%;
  background:var(--accent);color:#000;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.5) rotate(-30deg);box-shadow:var(--glow);
  transition:opacity .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);
}
.card:hover .card-play{opacity:1;transform:scale(1) rotate(0)}
.card-play:hover{background:#fff;transform:scale(1.12)!important}
.card-play svg{width:16px;height:16px;margin-left:1px}
.card-skeleton{background:linear-gradient(100deg,#161616 30%,#242424 50%,#161616 70%);background-size:200% 100%;animation:shimmer 1.4s infinite}

/* ===================== GRID / SEARCH ===================== */
.search-results{padding:120px 4% 50px;min-height:70vh}
.results-title{font-size:1.7rem;margin-bottom:26px;font-weight:800;letter-spacing:-.5px}
.results-title b{color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:18px}
.grid .card{width:100%}
.cat-loading{display:flex;justify-content:center;padding:34px 0 10px}
.cat-loading .spinner{width:40px;height:40px}
#categorySentinel{width:100%;height:1px}
.empty{text-align:center;padding:90px 20px;color:var(--muted)}
.empty svg{width:62px;height:62px;margin-bottom:18px;color:#333}
.empty p{font-size:1.05rem}

/* ===================== MODAL ===================== */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:48px 16px;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(6px)}
.modal-card{
  position:relative;z-index:2;width:100%;max-width:920px;background:var(--bg-2);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow),0 0 0 1px var(--line);
  animation:modalIn .4s var(--ease);margin-bottom:48px;
}
@keyframes modalIn{from{opacity:0;transform:scale(.94) translateY(24px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes modalOut{to{opacity:0;transform:scale(.955) translateY(16px)}}
@keyframes overlayOut{to{opacity:0}}
.modal-close{
  position:absolute;top:18px;right:18px;z-index:5;width:40px;height:40px;border-radius:50%;
  border:none;background:rgba(10,10,10,.75);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;
  transition:background .2s,transform .2s,color .2s;backdrop-filter:blur(4px);
}
.modal-close:hover{background:var(--accent);color:#000;transform:rotate(90deg)}
.modal-hero{position:relative;height:440px;background-size:cover;background-position:center 12%}
.modal-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,19,22,0) 35%,var(--bg-2) 100%)}
.modal-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,19,22,.6),transparent 60%)}
.modal-hero .mh-content{position:absolute;bottom:26px;left:34px;right:34px;z-index:3;animation:contentIn .5s var(--ease) both}
.modal-hero .mh-title{font-size:2.5rem;font-weight:800;text-shadow:0 3px 16px rgba(0,0,0,.8);margin-bottom:18px;letter-spacing:-.5px}
.modal-hero .mh-btns{display:flex;gap:12px;flex-wrap:wrap}
.modal-loader{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:radial-gradient(120% 120% at 50% 35%,#1a1a1a 0%,var(--bg-2) 70%)}
.modal-loader .spinner{width:46px;height:46px}
.modal-loader .spinner-label{font-family:"Poppins";font-weight:600;letter-spacing:.3px}
.modal-body{padding:26px 34px 36px;animation:contentIn .55s var(--ease) both}
@keyframes contentIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:18px;font-size:.9rem;color:var(--muted)}
.modal-meta .tag{border:1px solid var(--line);padding:3px 11px;border-radius:20px;font-size:.78rem}
.modal-overview{font-size:1.02rem;line-height:1.65;color:#dbe6e9;margin-bottom:24px}
.modal-genres{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:6px}
.genre-chip{background:rgba(255,255,255,.1);color:var(--accent);border:1px solid rgba(255,255,255,.3);padding:5px 13px;border-radius:20px;font-size:.82rem;font-weight:600;transition:background .2s}
.genre-chip:hover{background:rgba(255,255,255,.2)}
.modal-cast,.modal-similar{margin-top:26px}
.modal-cast h3,.modal-similar h3{font-size:1.1rem;margin-bottom:14px;font-weight:700;display:flex;align-items:center;gap:9px}
.modal-cast h3::before,.modal-similar h3::before{content:"";width:3px;height:16px;background:var(--accent);border-radius:2px}
/* padding gives the hover scale + glow room inside the overflow clip; the equal
   negative margin cancels it so the first avatar still lines up with the heading */
.cast-row{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;padding:18px 16px 14px;margin:0 -16px;scrollbar-width:none}
.cast-row::-webkit-scrollbar{display:none}
.cast-item{flex:0 0 auto;width:94px;text-align:center}
.cast-item img{width:94px;height:94px;border-radius:50%;object-fit:cover;margin-bottom:9px;border:2px solid var(--line);transition:border-color .25s,transform .25s}
.cast-item:hover img{border-color:#fff;transform:scale(1.06);box-shadow:0 0 18px rgba(255,255,255,.3)}
.cast-item .cn{font-size:.8rem;font-weight:600;line-height:1.2}
.cast-item .cc{font-size:.72rem;color:var(--muted);margin-top:2px}
/* "More Like This" reuses .row-scroller, whose -26px top margin tucks homepage
   rows under their title — in the modal that jams the cards against the heading.
   Reset the offsets and keep just enough padding for the card hover lift + glow. */
.modal-similar .row-scroller{padding:22px 16px 14px;margin:0 -16px}

/* ===================== TV: SEASONS & EPISODES ===================== */
.modal-episodes{margin-top:30px}
.episodes-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.episodes-head h3{font-size:1.15rem;font-weight:700;display:flex;align-items:center;gap:9px}
.episodes-head h3::before{content:"";width:3px;height:18px;background:var(--accent);border-radius:2px}
.season-dd{position:relative;display:inline-block;min-width:210px}
.season-dd-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;
  font-family:inherit;font-size:.9rem;font-weight:600;color:var(--text);
  background:var(--bg-3);border:1px solid var(--line);border-radius:12px;padding:11px 14px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.season-dd-btn:hover,.season-dd.open .season-dd-btn{border-color:rgba(255,255,255,.6);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.sel-caret{width:16px;height:16px;color:var(--muted);flex-shrink:0;transition:transform .25s var(--ease-out)}
.season-dd.open .sel-caret{transform:rotate(180deg);color:#fff}
.season-dd-menu{
  position:absolute;top:calc(100% + 8px);right:0;left:0;z-index:30;max-height:320px;overflow-y:auto;
  background:rgba(18,18,18,.98);border:1px solid var(--line);border-radius:14px;padding:6px;
  box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top;pointer-events:none;
  transition:opacity .22s var(--ease-out),transform .22s var(--ease-out);
}
.season-dd.open .season-dd-menu{opacity:1;transform:none;pointer-events:auto}
.season-dd-menu::-webkit-scrollbar{width:8px}
.season-dd-menu::-webkit-scrollbar-thumb{background:#333;border-radius:4px}
.season-dd-opt{
  display:block;width:100%;text-align:left;cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:500;
  color:var(--text);background:none;border:none;border-radius:9px;padding:11px 12px;
  transition:background .16s,color .16s,padding-left .16s var(--ease-out);
}
.season-dd-opt:hover{background:rgba(255,255,255,.06);padding-left:16px}
.season-dd-opt.active{color:#0b0b0b;font-weight:700;background:linear-gradient(100deg,#fff,#d0d0d0)}
.season-dd-opt.active:hover{padding-left:12px}
.episode-list{display:flex;flex-direction:column;gap:12px}
.episode{
  display:flex;gap:16px;padding:12px;border-radius:12px;cursor:pointer;
  background:var(--bg-3);border:1px solid transparent;
  transition:background .2s,border-color .2s,transform .2s var(--ease);
}
.episode:hover{background:#1e1e1e;border-color:var(--line);transform:translateX(4px)}
.ep-thumb{
  position:relative;flex:0 0 auto;width:150px;aspect-ratio:16/9;border-radius:9px;overflow:hidden;
  background:#0d0d0d center/cover no-repeat;box-shadow:inset 0 0 0 1px var(--line);
}
.ep-badge{position:absolute;top:7px;left:7px;background:rgba(0,0,0,.75);color:#fff;font-size:.7rem;font-weight:700;
  padding:3px 8px;border-radius:6px;letter-spacing:.5px;backdrop-filter:blur(4px)}
.ep-playicon{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);opacity:0;transition:opacity .25s;
}
.ep-playicon svg{width:34px;height:34px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));
  transform:scale(.7);transition:transform .25s var(--ease)}
.episode:hover .ep-playicon{opacity:1}
.episode:hover .ep-playicon svg{transform:scale(1)}
.ep-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:2px}
.ep-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ep-name{font-size:.98rem;font-weight:600;color:var(--text);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-meta{flex-shrink:0;font-size:.8rem;color:var(--muted);font-weight:600}
.ep-ov{font-size:.85rem;line-height:1.5;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ep-loading{display:flex;justify-content:center;padding:40px 0}
.ep-empty{color:var(--muted);padding:24px 0;text-align:center}

/* ===================== PLAYER ===================== */
.player-overlay{position:fixed;inset:0;z-index:300;background:#060606;display:flex;flex-direction:column;animation:fadeIn .35s ease;overflow-y:auto;overscroll-behavior:contain}
.player-bg{position:fixed;inset:0;background-size:cover;background-position:center;filter:blur(28px) brightness(.35) saturate(1.2);transform:scale(1.15);transition:background-image .6s ease}
.player-scrim{position:fixed;inset:0;background:radial-gradient(80% 80% at 50% 40%,rgba(6,6,6,.4),rgba(6,6,6,.9))}
.player-topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:20px 30px;background:linear-gradient(180deg,rgba(6,6,6,.92),rgba(6,6,6,.5) 60%,transparent);backdrop-filter:blur(4px)}
.player-close{display:inline-flex;align-items:center;gap:8px;background:rgba(20,20,20,.7);border:1px solid var(--line);color:var(--text);padding:11px 20px 11px 14px;border-radius:30px;cursor:pointer;font-size:.95rem;font-weight:600;font-family:inherit;transition:all .25s;backdrop-filter:blur(8px)}
.player-close svg{width:20px;height:20px}
.player-close:hover{background:var(--accent);color:#000;border-color:var(--accent);transform:translateX(-3px);box-shadow:var(--glow)}
.player-brand{font-family:"Poppins";font-weight:800;font-size:1.15rem;display:flex;align-items:center;gap:9px;opacity:.9}
.player-logo{height:34px;width:34px;object-fit:cover;border-radius:50%;opacity:.95;box-shadow:0 0 20px rgba(0,0,0,.5)}
.player-topbar-spacer{width:132px;flex-shrink:0}
.player-stage{position:relative;z-index:5;min-height:calc(100vh - 86px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:8px 20px 40px}
.player-title{font-family:"Poppins";font-size:1.55rem;font-weight:700;text-align:center;background:linear-gradient(90deg,#fff,#cfcfcf);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fadeUp .5s var(--ease)}
.video-wrapper{position:relative;width:100%;max-width:min(1080px, calc((100vh - 340px) * 16 / 9));aspect-ratio:16 / 9;background:#000;border-radius:14px;overflow:hidden;margin:0 auto;box-shadow:0 30px 80px rgba(0,0,0,.9),0 0 0 1px #262626,0 0 60px rgba(255,255,255,.12);animation:playerPop .5s var(--ease)}
@keyframes playerPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.player-spinner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#080808;z-index:2}
.player-spinner.hidden{display:none!important}
.spinner{width:54px;height:54px;border-radius:50%;border:4px solid rgba(255,255,255,.12);border-top-color:var(--accent);animation:spin .8s linear infinite;box-shadow:var(--glow-soft)}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner-label{color:var(--muted);font-size:.9rem;letter-spacing:1px}
.player-infobar{max-width:900px;width:100%;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;color:#c8d0d2;font-size:.9rem;text-align:center}
.player-infobar:empty{display:none}
.player-infobar .pi-sep{width:4px;height:4px;border-radius:50%;background:var(--muted)}
.player-infobar .pi-ov{flex-basis:100%;color:var(--muted);line-height:1.55;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the real site footer is cloned into the player at runtime */
.player-footer-full{position:relative;z-index:5;margin-top:0;width:100%;flex-shrink:0}

/* ===================== TOAST ===================== */
.toast{position:fixed;bottom:34px;left:50%;transform:translateX(-50%) translateY(140px);background:rgba(24,24,24,.95);border:1px solid var(--accent);color:var(--text);padding:14px 26px;border-radius:10px;font-weight:600;z-index:400;box-shadow:var(--glow);transition:transform .4s var(--ease);backdrop-filter:blur(8px);display:flex;align-items:center;gap:10px}
.toast::before{content:"✓";color:var(--accent);font-weight:800}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ===================== FOOTER ===================== */
.footer{position:relative;margin-top:40px;padding:60px 4% 30px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.03) 30%,var(--bg-2));border-top:1px solid var(--line);overflow:hidden}
.footer-glow{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:600px;height:240px;background:radial-gradient(ellipse,rgba(255,255,255,.1),transparent 70%);pointer-events:none}
.footer-inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:640px;margin:0 auto 40px}
.footer-brand{font-family:"Poppins";font-weight:800;font-size:1.7rem;display:flex;align-items:center;justify-content:center;gap:2px;margin-bottom:14px}
.footer-blurb{color:var(--muted);font-size:.92rem;line-height:1.65;max-width:460px;margin-bottom:10px}
.footer-join{color:var(--accent);font-weight:600;font-size:.95rem;margin-bottom:24px;letter-spacing:.2px}
.footer-socials{display:flex;justify-content:center;gap:18px;margin-bottom:26px}
.soc{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);
  transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.soc svg{width:19px;height:19px}
.soc:hover{color:#000;background:var(--accent);border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--glow)}
.footer-socials .soc{width:56px;height:56px;border-width:1.5px}
.footer-socials .soc svg{width:27px;height:27px}
.footer-socials .soc:hover{transform:translateY(-5px) scale(1.06)}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px}
.footer-links a{color:var(--muted);font-size:.92rem;font-weight:500;transition:color .2s}
.footer-links a:hover{color:var(--accent)}
.footer-bottom{position:relative;text-align:center;padding-top:28px;border-top:1px solid var(--line);max-width:1200px;margin:0 auto}
.made-with{font-size:1rem;font-weight:600;margin-bottom:8px;color:#dde3e5}
.made-with .heart{color:#ff5470;display:inline-block;animation:heartbeat 1.4s ease-in-out infinite;font-size:1.1rem;margin:0 2px}
@keyframes heartbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.28)}30%{transform:scale(1)}45%{transform:scale(1.18)}}
.footer-legal{font-size:.78rem;color:var(--muted);opacity:.75;line-height:1.5;max-width:640px;margin:0 auto}

/* ===================== PRELOADER ===================== */
.preloader{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 30%,#181818 0%,#0b0b0b 60%,#000 100%);
  transition:opacity .7s var(--ease),visibility .7s var(--ease);
}
.preloader.done{opacity:0;visibility:hidden}
.preloader-inner{display:flex;flex-direction:column;align-items:center;gap:26px}
.preloader-logo-wrap{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}
.preloader-logo{
  width:96px;height:96px;object-fit:cover;border-radius:50%;
  box-shadow:0 0 44px rgba(255,255,255,.22);animation:plPulse 2s ease-in-out infinite;
}
@keyframes plPulse{0%,100%{transform:scale(1);box-shadow:0 0 34px rgba(255,255,255,.12)}50%{transform:scale(1.06);box-shadow:0 0 60px rgba(255,255,255,.28)}}
.preloader-bar{width:180px;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.preloader-bar span{display:block;height:100%;width:40%;border-radius:3px;
  background:linear-gradient(90deg,transparent,#fff,transparent);animation:plBar 1.2s var(--ease) infinite}
@keyframes plBar{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
.preloader-text{font-family:"Poppins";font-weight:600;font-size:1.02rem;letter-spacing:.3px;text-align:center;
  transition:opacity .26s var(--ease);
  background:var(--grad);background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:hueSlide 8s linear infinite}

/* ===================== MOBILE NAV DRAWER ===================== */
.mobile-nav{position:fixed;inset:0;z-index:250}
.mobile-nav-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .32s var(--ease);backdrop-filter:blur(3px)}
.mobile-nav.open .mobile-nav-backdrop{opacity:1}
.mobile-nav-panel{
  position:absolute;top:0;right:0;height:100%;width:min(84vw,340px);
  background:linear-gradient(180deg,#141414,#0b0b0b);border-left:1px solid var(--line);
  box-shadow:-20px 0 60px rgba(0,0,0,.6);transform:translateX(100%);
  transition:transform .34s var(--ease);display:flex;flex-direction:column;padding:22px 22px 28px;
}
.mobile-nav.open .mobile-nav-panel{transform:translateX(0)}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.mobile-nav-brand{font-family:"Poppins";font-weight:800;font-size:1.25rem;letter-spacing:.5px}
.mobile-nav-close{background:none;border:none;color:var(--muted);font-size:2rem;line-height:1;cursor:pointer;width:40px;height:40px;border-radius:50%;transition:color .2s,background .2s}
.mobile-nav-close:hover{color:#fff;background:rgba(255,255,255,.08)}
.mobile-nav-links{display:flex;flex-direction:column;gap:4px;flex:1}
.mobile-nav-links a{
  display:flex;align-items:center;gap:15px;padding:15px 14px;border-radius:12px;
  color:var(--text);font-size:1.06rem;font-weight:600;transition:background .2s,color .2s;
}
.mobile-nav-links a svg{width:22px;height:22px;color:var(--muted);transition:color .2s}
.mobile-nav-links a:hover,.mobile-nav-links a:active{background:rgba(255,255,255,.06)}
.mobile-nav-links a.active,.mobile-nav-links a.active svg{color:var(--accent)}
.mobile-nav-socials{border-top:1px solid var(--line);padding-top:22px;margin-top:10px;text-align:center}
.mobile-nav-join{display:block;color:var(--muted);font-size:.82rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px;font-weight:600}
.mobile-nav-soc-row{display:flex;justify-content:center;gap:16px}
.mobile-nav-soc-row .soc{width:52px;height:52px}
.mobile-nav-soc-row .soc svg{width:26px;height:26px}

/* ===================== MOBILE SEARCH OVERLAY ===================== */
.mobile-search{position:fixed;top:0;left:0;right:0;z-index:260;padding:14px 4%;
  background:rgba(10,10,10,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  transform:translateY(-100%);opacity:0;transition:transform .3s var(--ease),opacity .3s var(--ease);
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.mobile-search.open{transform:translateY(0);opacity:1}
.mobile-search-bar{display:flex;align-items:center;gap:12px}
.mobile-search-bar .search-icon{width:22px;height:22px;color:var(--muted);flex-shrink:0}
.mobile-search-bar input{
  flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);
  font-size:1.05rem;font-family:inherit;padding:8px 0;
}
.mobile-search-bar input::placeholder{color:var(--muted)}
.mobile-search-cancel{background:none;border:none;color:var(--accent);font-size:.95rem;font-weight:600;cursor:pointer;font-family:inherit;flex-shrink:0;padding:8px 4px}

/* ===================== WELCOME / JOIN POPUP ===================== */
.welcome{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:20px}
.welcome-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);opacity:0;transition:opacity .34s var(--ease);backdrop-filter:blur(8px)}
.welcome.open .welcome-backdrop{opacity:1}
.welcome-card{
  position:relative;z-index:2;width:100%;max-width:440px;text-align:center;
  background:linear-gradient(180deg,#1a1a1a,#0e0e0e);border:1px solid var(--line);
  border-radius:22px;padding:38px 30px 28px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.04);
  transform:scale(.9) translateY(20px);opacity:0;transition:transform .38s var(--ease),opacity .38s var(--ease);
}
.welcome.open .welcome-card{transform:scale(1) translateY(0);opacity:1}
.welcome-glow{position:absolute;top:-120px;left:50%;transform:translateX(-50%);width:340px;height:240px;
  background:radial-gradient(ellipse,rgba(255,84,112,.28),transparent 70%);pointer-events:none}
.welcome-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);font-size:1.9rem;line-height:1;cursor:pointer;z-index:3;transition:color .2s;width:36px;height:36px;border-radius:50%}
.welcome-close:hover{color:#fff}
.welcome-heart{font-size:3.2rem;line-height:1;margin-bottom:14px;position:relative;
  animation:heartbeat 1.4s ease-in-out infinite;filter:drop-shadow(0 6px 20px rgba(255,84,112,.5))}
.welcome-title{font-family:"Poppins";font-size:1.55rem;font-weight:800;margin-bottom:12px;letter-spacing:-.3px;position:relative}
.welcome-title .logo-thin{color:var(--accent)}
.welcome-msg{color:#cfd8db;font-size:.98rem;line-height:1.6;margin-bottom:26px;position:relative}
.welcome-msg b{color:#fff}
.welcome-actions{display:flex;flex-direction:column;gap:11px;margin-bottom:16px;position:relative}
.welcome-btn{
  display:flex;align-items:center;justify-content:center;gap:11px;padding:14px 18px;border-radius:13px;
  font-size:1rem;font-weight:700;color:#fff;transition:transform .18s var(--ease),box-shadow .25s,filter .2s;
}
.welcome-btn svg{width:23px;height:23px}
.welcome-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.welcome-btn:active{transform:translateY(0) scale(.98)}
.welcome-btn.discord{background:#5865F2;box-shadow:0 8px 26px rgba(88,101,242,.4)}
.welcome-btn.telegram{background:#29A9EB;box-shadow:0 8px 26px rgba(41,169,235,.4)}
.welcome-btn.instagram{background:linear-gradient(135deg,#833AB4,#E1306C 55%,#F77737);box-shadow:0 8px 26px rgba(225,48,108,.4)}
.welcome-dismiss{background:none;border:none;color:var(--muted);font-size:.9rem;cursor:pointer;font-family:inherit;padding:6px;transition:color .2s;position:relative}
.welcome-dismiss:hover{color:#fff}

/* ===================== VIEW SWITCH FADE ===================== */
#hero:not(.hidden),#rows:not(.hidden),#searchResults:not(.hidden),#categoryView:not(.hidden){animation:viewFade .45s var(--ease)}
@keyframes viewFade{from{opacity:0}to{opacity:1}}

/* portrait hero art (poster swapped in by JS at this same 768px breakpoint):
   centre it so the 2:3 poster fills the tall hero without the desktop top-bias */
@media(max-width:768px){
  .hero-bg{background-position:center center}
}

/* ===================== RESPONSIVE ===================== */
@media(max-width:900px){
  .nav-links,.search-box{display:none}
  .search-toggle,.nav-toggle{display:flex}
  .header-right{gap:6px}                    /* icons stay pinned right via margin-left:auto */
  .hero{height:78vh;min-height:520px}
  .hero-content{bottom:17%}
  .hero-controls{bottom:5%}
  #rows{margin-top:32px}                    /* matches this breakpoint's title→cards gap */
  .modal-hero{height:320px}
  .modal-hero .mh-title{font-size:1.8rem}
  .row-arrow{display:none}
  .row-title{font-size:1.45rem}
  .row{margin-bottom:40px}
  .row + .row::before{margin-bottom:38px}
  .mesh{animation:none}                     /* keep mobile GPUs cool */
}
@media(max-width:560px){
  .card{width:145px}
  .row-title{font-size:1.3rem;margin-bottom:14px}
  .row{margin-bottom:36px}
  .row + .row::before{margin:0 5% 34px}
  .hero{height:76vh;min-height:480px}
  .hero-content{bottom:14%;left:5%;right:5%}
  .hero-overview{font-size:.92rem}
  .hero-btns .btn{flex:1;justify-content:center}
  .btn{padding:12px 20px;font-size:.92rem}
  .hero-controls{bottom:4%;gap:10px}
  .hero-nav{width:42px;height:42px}
  .hero-nav svg{width:20px;height:20px}
  .header-inner{gap:10px}
  .logo-word{font-size:1.2rem}
  .logo-img{height:38px;width:38px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
  .search-results{padding:96px 4% 46px}
  .results-title{font-size:1.35rem;margin-bottom:20px}
  .modal{padding:0}
  .modal-card{border-radius:0;margin-bottom:0;min-height:100vh}
  .modal-body{padding:20px}
  .modal-hero .mh-content{left:20px;right:20px}
  .modal-hero .mh-btns .btn{flex:1;justify-content:center}
  .ep-thumb{width:108px}
  .ep-name{white-space:normal}
  .episodes-head{gap:10px}
  .player-topbar{padding:14px 16px}
  .player-topbar-spacer{display:none}
  .player-logo{height:30px}
  .player-title{font-size:1.2rem}
  .player-stage{padding:8px 12px 32px;min-height:auto}
  .video-wrapper{border-radius:10px}
  .footer{padding:48px 5% 28px}
  .footer-socials .soc{width:52px;height:52px}
  .welcome-card{padding:32px 22px 24px}
  .welcome-title{font-size:1.35rem}
  .welcome-heart{font-size:2.8rem}
}
@media(max-width:380px){
  .card{width:calc(50vw - 22px)}
  .grid{grid-template-columns:1fr 1fr}
}

/* ===================== REDUCED MOTION ===================== */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  #header{transform:none!important}
  .mesh,.ov-caret,.nav-links a.active,.card.loading{animation:none!important}
  .card img{opacity:1}
}