/* ============================================================
   flix.css — cinematic skin for the premiere experience
   Pages: view.php (Home) · seasons.php · info.php · watch.php
   ============================================================ */
:root{
  --fx-bg:#000; --fx-surface:#141414; --fx-card:#181818; --fx-line:#262626;
  --fx-text:#fff; --fx-dim:#b3b3b3; --fx-faint:#808080;
  --fx-red:#e50914; --fx-ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body.fx{background:var(--fx-bg);color:var(--fx-text);min-height:100vh;overflow-x:hidden;
  font-family:'Inter',"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.fx a{color:inherit;text-decoration:none}
.fx button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.fx ::selection{background:rgba(229,9,20,.35);color:#fff}
.fx :focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}
body.fx{scrollbar-width:thin;scrollbar-color:#404040 #0a0a0a}
.fx ::-webkit-scrollbar{width:10px;height:8px}
.fx ::-webkit-scrollbar-track{background:#0a0a0a}
.fx ::-webkit-scrollbar-thumb{background:#404040;border-radius:99px;border:2px solid #0a0a0a}

/* ---------------- nav ---------------- */
.fx-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  height:68px;padding:0 4vw;background:linear-gradient(180deg,rgba(0,0,0,.8),transparent);transition:background .35s var(--fx-ease)}
.fx-nav.solid{background:#000}
.fx-nav-left{display:flex;align-items:center;gap:34px}
.fx-logo{font-family:'Bebas Neue',Impact,sans-serif;font-size:24px;letter-spacing:.06em;color:#e50914}
.fx-logo img{height:34px;width:auto;max-width:150px;object-fit:contain;display:block}
.fx-links{display:flex;gap:22px;list-style:none}
.fx-links a{font-size:14px;font-weight:500;color:var(--fx-dim);transition:color .25s}
.fx-links a:hover{color:#fff}
.fx-links a.on{color:#fff;font-weight:600}
.fx-nav-right{display:flex;align-items:center;gap:18px}
.fx-profile{position:relative;display:flex;align-items:center;gap:8px;cursor:pointer}
.fx-avatar{width:34px;height:34px;border-radius:6px;background:linear-gradient(135deg,var(--fx-red),#8c0710);
  display:grid;place-items:center;font-weight:700;font-size:15px}
.fx-profile .caret{color:#fff;transition:transform .25s}
.fx-profile.open .caret,.fx-profile:hover .caret{transform:rotate(180deg)}
.fx-menu{position:absolute;top:calc(100% + 12px);right:0;min-width:190px;max-height:70vh;overflow-y:auto;background:rgba(0,0,0,.92);
  border:1px solid var(--fx-line);border-radius:6px;padding:8px 0;display:none}
.fx-profile.open .fx-menu{display:block}
@media(hover:hover) and (pointer:fine){.fx-profile:hover .fx-menu{display:block}}
.fx-menu a{display:block;padding:10px 16px;font-size:13px;color:var(--fx-dim)}
.fx-menu a:hover{color:#fff;background:rgba(255,255,255,.06)}
@media(max-width:640px){
  /* phone: logo row on top, links on their own line below — everything a bit smaller */
  .fx-nav{height:auto;flex-wrap:wrap;padding:10px 16px 8px;background:linear-gradient(180deg,#000 55%,rgba(0,0,0,.55) 85%,transparent)}
  .fx-nav.solid{background:#000}
  .fx-nav-left{display:contents}
  .fx-logo{order:1}
  .fx-logo img{height:20px}
  .fx-nav-right{order:2}
  .fx-avatar{width:27px;height:27px;font-size:12.5px;border-radius:5px}
  .fx-links{order:3;width:100%;justify-content:center;gap:16px;margin-top:7px;overflow-x:auto;scrollbar-width:none}
  .fx-links::-webkit-scrollbar{display:none}
  .fx-links a{font-size:12px;white-space:nowrap}
}

/* ---------------- buttons ---------------- */
.fx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:4px;
  font-weight:600;font-size:16px;padding:12px 28px;transition:background .2s,transform .2s,opacity .2s}
.fx-btn svg{flex:none}
.fx .fx-btn-white{background:#fff;color:#000}
.fx .fx-btn-white:hover{background:rgba(255,255,255,.8)}
.fx .fx-btn-gray{background:rgba(109,109,110,.7);color:#fff}
.fx .fx-btn-gray:hover{background:rgba(109,109,110,.5)}
.fx .fx-btn-line{border:1px solid #555;color:#fff}
.fx .fx-btn-line:hover{border-color:#fff}
@media(max-width:640px){.fx-btn{font-size:14px;padding:10px 18px}}

/* ---------------- hamburger + slide-in drawer (premiere pages) ---------------- */
.fx-nav-ham{justify-content:space-between}
/* menu (+Back on inner pages) on the LEFT, logo on the RIGHT (all screens) */
.fx-nav-ham .nav-l{display:flex;align-items:center;gap:10px;order:-1}
.fx-nav-ham .fx-logo{order:0}
.fx-nav-ham .ham-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:42px;
  background:none;border:1px solid var(--fx-line);border-radius:11px;cursor:pointer;padding:0 12px;transition:.2s}
.fx-nav-ham .ham-btn:hover{border-color:rgba(232,196,104,.6)}
.fx-nav-ham .ham-btn span{display:block;height:2px;background:#e7e0d4;border-radius:2px}
/* Back button that replaces the logo on inner pages */
.nav-back{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 16px 0 11px;
  background:none;border:1px solid var(--fx-line);border-radius:11px;cursor:pointer;color:#e7e0d4;
  font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:.01em;transition:.2s}
.nav-back:hover{border-color:rgba(232,196,104,.6);color:#fff}
.nav-back svg{flex:none}
@media(max-width:640px){.nav-back{height:38px;font-size:13px;padding:0 14px 0 9px}}
.fx-drawer-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;opacity:0;visibility:hidden;transition:opacity .3s}
.fx-drawer-bg.open{opacity:1;visibility:visible}
.fx-drawer{position:fixed;top:0;left:0;bottom:0;width:86%;max-width:340px;z-index:201;
  background:linear-gradient(180deg,#151109,#0c0a07);border-right:1px solid rgba(232,196,104,.18);
  transform:translateX(-104%);transition:transform .32s var(--fx-ease);display:flex;flex-direction:column;
  padding:18px 14px calc(20px + env(safe-area-inset-bottom));box-shadow:30px 0 80px -20px rgba(0,0,0,.85)}
.fx-drawer.open{transform:none}
.fx-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 8px 16px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px}
.fx-drawer .ham-prof{display:flex;align-items:center;gap:12px;min-width:0}
.fx-drawer .fx-avatar{width:42px;height:42px;font-size:16px;flex:none}
.fx-drawer .ham-prof-tx{min-width:0}
.fx-drawer .ham-prof-tx b{display:block;font-size:15px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-drawer .ham-prof-tx span{font-size:12px;color:var(--fx-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.fx-drawer-x{background:none;border:none;color:var(--fx-dim);font-size:22px;cursor:pointer;padding:4px 8px;flex:none}
.fx-drawer-links{display:flex;flex-direction:column;gap:2px;flex:1}
.fx-drawer-links a{display:flex;align-items:center;gap:14px;padding:14px;border-radius:12px;color:#e7e0d4;font-size:16px;text-decoration:none;transition:.15s}
.fx-drawer-links a:hover,.fx-drawer-links a.on{background:rgba(232,196,104,.1);color:#fff}
.fx-drawer-links a i{font-style:normal;font-size:18px;width:24px;text-align:center;flex:none}
.fx-drawer-out{display:block;text-align:center;margin-top:8px;padding:14px;border-radius:12px;border:1px solid rgba(224,103,103,.4);color:#e58c8c;font-size:15px;font-weight:600;text-decoration:none}
.fx-drawer-out:hover{background:rgba(224,103,103,.1)}
/* active mode toggle gets a gold dot */
body.m-prem #vtPrem, body.m-photos #vtPhotos{background:rgba(232,196,104,.14);color:#fff}

/* ---------------- ambient animated light (behind the floating billboard) ---------------- */
/* only the TOP (behind the billboard) glows — everything below stays dark */
.fx-amb{position:absolute;top:0;left:0;right:0;height:100vh;z-index:-1;overflow:hidden;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -8%,#241809,#0a0807 50%,#070606);
  -webkit-mask-image:linear-gradient(180deg,#000 66%,transparent);mask-image:linear-gradient(180deg,#000 66%,transparent)}
/* NO filter/blend here — soft-edged gradients fake the blur at ~1/10th the GPU
   cost (real blur(72px) made TVs and mid phones lag + delayed taps) */
.fx-amb i{position:absolute;border-radius:50%;opacity:.8;will-change:transform;transform:translateZ(0)}
.fx-amb i:nth-child(1){width:52vw;height:52vw;left:-12%;top:-16%;background:radial-gradient(circle,rgba(226,160,84,.5),rgba(226,160,84,.16) 42%,transparent 68%);animation:ambA 15s ease-in-out infinite alternate}
.fx-amb i:nth-child(2){width:46vw;height:46vw;right:-10%;top:-6%;background:radial-gradient(circle,rgba(178,74,104,.45),rgba(178,74,104,.14) 42%,transparent 68%);animation:ambB 18s ease-in-out infinite alternate}
.fx-amb i:nth-child(3){width:50vw;height:50vw;left:28%;top:16%;background:radial-gradient(circle,rgba(206,158,72,.4),rgba(206,158,72,.13) 42%,transparent 68%);animation:ambC 16s ease-in-out infinite alternate}
@keyframes ambA{from{transform:translate(0,0) scale(1)}to{transform:translate(26%,20%) scale(1.3)}}
@keyframes ambB{from{transform:translate(0,0) scale(1.05)}to{transform:translate(-24%,22%) scale(1.32)}}
@keyframes ambC{from{transform:translate(0,0) scale(1)}to{transform:translate(-20%,-16%) scale(1.22)}}
@media(prefers-reduced-motion:reduce){.fx-amb i{animation:none}}
/* TVs + low-memory phones: static everything — content over decoration */
html.tvmode .fx-amb i,html.litemode .fx-amb i{animation:none!important}
html.tvmode .hs-img,html.litemode .hs-img,
html.tvmode .fx-swide .pv.solo,html.litemode .fx-swide .pv.solo{animation:none!important}
html.tvmode .mm-track,html.litemode .mm-track,
html.tvmode .ps-track,html.litemode .ps-track{animation-play-state:paused!important}
/* slideshows collapse to their first frame */
html.tvmode .fx-swide .pv.sl,html.litemode .fx-swide .pv.sl{display:none!important}
html.tvmode .bb-slide,html.litemode .bb-slide{animation:none!important;opacity:0}
html.tvmode .bb-slide:first-child,html.litemode .bb-slide:first-child{opacity:1;transform:scale(1.02)}
/* off-screen rows cost NOTHING while scrolling (big win on phones) */
.fx-row{content-visibility:auto;contain-intrinsic-size:auto 360px}
.fx-gallery{content-visibility:auto;contain-intrinsic-size:auto 520px}

/* ---------------- billboard (home hero) — floating rounded card, faded on all 4 sides ---------------- */
.fx-billboard{position:relative;width:min(90%,1460px);margin:92px auto 0;height:min(50vw,76vh);min-height:400px;
  overflow:hidden;border-radius:28px;background:var(--fx-surface);
  box-shadow:0 50px 130px -34px rgba(0,0,0,.92),0 0 0 1px rgba(255,255,255,.05)}
.fx-billboard .bb-media{position:absolute;inset:0;pointer-events:none;opacity:.62}   /* dim so the name always reads */
.fx-billboard .bb-media iframe,.fx-billboard #bbPlayer{position:absolute!important;top:50%;left:50%;
  width:max(100%,133vh)!important;height:max(56.25%,75vh)!important;transform:translate(-50%,-50%);border:0;pointer-events:none}
.fx-billboard .bb-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.64}
/* 4-side vignette + a dark scrim right behind the name so it pops on any photo */
.fx-billboard::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(78% 60% at 50% 62%,rgba(0,0,0,.62),transparent 72%),
             radial-gradient(125% 125% at 50% 42%,transparent 44%,rgba(6,6,5,.5) 74%,rgba(6,6,5,.92) 100%),
             linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 20%),
             linear-gradient(77deg,rgba(0,0,0,.35) 0%,transparent 46%)}
.fx-billboard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(6,6,5,.55) 42%,rgba(6,6,5,.85) 74%,rgba(6,6,5,.96))}
.bb-content{position:absolute;left:50%;transform:translateX(-50%);bottom:12%;z-index:5;max-width:min(760px,92vw);text-align:center}
.bb-eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--fx-dim);font-weight:700;margin-bottom:9px}
.bb-eyebrow .n-mark{width:18px;height:26px;border-radius:2px;background:linear-gradient(135deg,var(--fx-red),#8c0710);
  display:grid;place-items:center;font-size:15px;font-weight:900;color:#fff;letter-spacing:0}
/* couple name — tight, centred stack so everything below still fits the card */
.bb-title{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(32px,4.4vw,58px);font-weight:300;letter-spacing:.03em;line-height:1;
  text-shadow:0 4px 26px rgba(0,0,0,.65);text-transform:uppercase}
.bb-title small{display:block;font-size:.34em;font-weight:400;color:var(--fx-dim);letter-spacing:.06em;margin:0;line-height:1.15}
.bb-hashtag{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:clamp(16px,1.5vw,22px);
  color:#e8c77e;letter-spacing:.12em;margin-top:6px;text-shadow:0 2px 12px rgba(0,0,0,.7)}
@media(max-width:640px){.bb-hashtag{font-size:14px;margin-top:5px}}
.bb-meta{margin-top:11px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;align-items:center;font-size:14px;color:var(--fx-dim);font-weight:500}
.bb-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--fx-faint)}
.bb-meta .chip{border:1px solid #444;border-radius:3px;padding:1px 7px;font-size:11px;letter-spacing:.06em;color:#ccc}
.bb-desc{margin-top:10px;font-size:14.5px;line-height:1.45;color:#e5e5e5;max-width:560px;margin-left:auto;margin-right:auto;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.bb-cta{margin-top:16px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
/* TOP 10 badge + genre tags — mobile card only */
.bb-top10{display:none;align-items:center;justify-content:center;gap:10px;font-size:15px;font-weight:800;color:#e8c468;margin:10px 0 2px}
.bb-top10 .t10{background:linear-gradient(135deg,#f0d585,#c9a24a);color:#1a1206;border-radius:4px;font-size:8.5px;font-weight:900;line-height:1;padding:4px 5px;text-align:center;letter-spacing:.05em;box-shadow:0 2px 8px rgba(232,196,104,.35)}
.bb-tags{display:none;font-size:12.5px;color:#d2d2d2;margin-top:10px}
.bb-tags span{color:#e50914;margin:0 4px}
.bb-mute{position:absolute;right:4vw;bottom:16%;z-index:6;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.3);color:#fff;display:grid;place-items:center;transition:.2s}
.bb-mute:hover{background:rgba(0,0,0,.6)}
/* narrow desktop / tablet: shrink billboard content so it never overruns the nav */
@media(max-width:1024px){
  .bb-content{bottom:9%;max-width:min(600px,92vw)}
  .bb-eyebrow{font-size:11px;letter-spacing:.24em;margin-bottom:10px}
  .bb-eyebrow img{height:18px!important}
  .bb-title{font-size:clamp(28px,5vw,46px)}
  .bb-hashtag{font-size:15px;margin-top:6px}
  .bb-desc{display:none}                 /* the description is the biggest space-hog */
  .bb-meta{margin-top:10px;font-size:12.5px;gap:6px 10px}
  .bb-cta{margin-top:16px;gap:10px}
  .bb-cta .fx-btn{font-size:13.5px;padding:10px 18px}
}
@media(max-width:820px){
  .bb-title{font-size:clamp(26px,5.4vw,40px)}
  .bb-meta{display:none}                  /* keep only the essentials on small windows */
}
@media(max-width:640px){
  /* phone home = a rounded poster CARD below the nav, with side breathing room */
  .fx-billboard{width:calc(100% - 36px);margin:76px auto 0;height:auto;min-height:0;
    aspect-ratio:10/14.5;max-height:70vh;border-radius:20px;overflow:hidden;
    box-shadow:0 20px 55px -18px rgba(0,0,0,.85)}
  .fx-billboard::before{display:none}
  .fx-billboard::after{height:78%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.45) 32%,rgba(0,0,0,.9) 74%,#000)}
  .bb-content{left:0;right:0;bottom:0;transform:none;max-width:none;padding:0 18px 20px;text-align:center}
  .bb-eyebrow{justify-content:center;font-size:9.5px;letter-spacing:.3em;margin-bottom:8px}
  .bb-eyebrow .n-mark{display:none}
  .bb-title{font-size:clamp(22px,7vw,32px)}
  .bb-title small{margin:1px 0}
  .bb-meta{display:none}
  .bb-top10{display:flex}
  .bb-tags{display:block}
  .bb-desc{margin:8px auto 0;-webkit-line-clamp:3;font-size:13px;max-width:92%}
  .bb-cta{justify-content:center;margin-top:12px;gap:8px}
  .bb-cta .fx-btn{flex:1;min-width:0;font-size:12.5px;padding:9px 8px;gap:6px;border-radius:5px}
  .bb-cta .fx-btn svg{width:14px;height:14px}
  .bb-mute{display:grid;top:14px;right:14px;bottom:auto;width:38px;height:38px}
}
/* phone rotated to landscape (short viewport): compact hero so nothing overlaps the nav */
@media (max-height:500px) and (orientation:landscape){
  .fx-billboard{height:100vh;height:100svh;min-height:0}
  .bb-content{bottom:9%;max-width:62vw}
  .bb-eyebrow{font-size:10px;letter-spacing:.22em;margin-bottom:8px}
  .bb-title{font-size:clamp(22px,11vh,44px)}
  .bb-title small{margin:2px 0}
  .bb-meta{margin-top:8px;font-size:12px}
  .bb-desc{display:none}
  .bb-cta{margin-top:12px;gap:10px}
  .bb-cta .fx-btn{font-size:13px;padding:9px 18px;gap:7px}
  .bb-cta .fx-btn svg{width:15px;height:15px}
  .bb-mute{width:38px;height:38px;bottom:12%}
}

/* ---------------- poster rows ---------------- */
.fx-rows{position:relative;z-index:6;display:flex;flex-direction:column;gap:3.2vw;padding:2.2vw 0 60px;margin-top:-4.5vw}
.fx-row{width:100%}
.fx-row .rw{width:92%;margin:0 auto}
.fx-row h2{font-size:clamp(15px,1.4vw,22px);font-weight:700;color:#e5e5e5;margin-bottom:12px}
.fx-strip{display:flex;gap:clamp(8px,.6vw,14px);overflow-x:auto;scroll-snap-type:x proximity;padding:6px 2px 14px;scrollbar-width:none}
.fx-strip::-webkit-scrollbar{display:none}
.fx-poster{position:relative;flex:none;width:clamp(128px,15.5vw,300px);aspect-ratio:7/10;border-radius:10px;overflow:hidden;
  background:var(--fx-card) center/cover no-repeat;scroll-snap-align:start;cursor:pointer;text-align:left;
  transition:transform .35s var(--fx-ease),box-shadow .35s var(--fx-ease);display:block}
.fx-poster:hover{transform:scale(1.05);box-shadow:0 14px 40px -12px rgba(0,0,0,.9),0 0 0 2px rgba(255,255,255,.85);z-index:3}
.fx-poster .pv{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s var(--fx-ease)}
.fx-poster:hover .pv{transform:scale(1.06)}
.fx-poster .grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.86))}
.fx-poster .mark{position:absolute;top:8px;left:8px;height:16px;width:auto;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.fx-poster .tt{position:absolute;left:12px;right:12px;bottom:12px;font-weight:700;font-size:clamp(13px,1.05vw,17px);line-height:1.25;
  text-shadow:0 2px 8px rgba(0,0,0,.8)}
.fx-poster .sub{position:absolute;left:12px;right:12px;bottom:34px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fx-dim);font-weight:700}
.fx-poster .play-h{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .25s}
.fx-poster:hover .play-h{opacity:1}

/* ---- Our Showcase: bigger posters on desktop, 2-up grid on phone ---- */
.sc-strip .fx-poster{width:clamp(170px,19vw,360px)}
@media(max-width:640px){
  .sc-strip{display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow-x:visible;scroll-snap-type:none}
  .sc-strip .fx-poster{width:100%}
}

/* ---- Little Moments: slow cinematic sliding loop ---- */
.mm-wrap{overflow:hidden;padding:6px 2px 14px}
.mm-track{display:flex;width:max-content;animation:mmSlide linear infinite}
.mm-wrap:hover .mm-track{animation-play-state:paused}
.mm-ph{flex:none;width:clamp(220px,24vw,420px);aspect-ratio:16/10;border-radius:10px;background-size:cover;background-position:center;margin-right:12px}
@keyframes mmSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:640px){.mm-ph{width:62vw}}
.fx-poster .play-h span{width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.55);border:2px solid #fff;display:grid;place-items:center}
/* landscape variant (albums / wide) */
.fx-poster.wide{aspect-ratio:16/9;width:clamp(210px,24vw,420px)}

/* ---------------- seasons page ---------------- */
.fx-shero{position:relative;width:100%;height:min(48vw,72vh);min-height:340px;overflow:hidden;background:var(--fx-surface)}
.fx-shero .bb-media iframe{position:absolute!important;top:50%;left:50%;width:max(100vw,178vh)!important;height:max(56.25vw,100vh)!important;transform:translate(-50%,-50%);border:0;pointer-events:none}
.fx-shero .bb-img{position:absolute;inset:0;background-size:cover;background-position:center}
.fx-shero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.2) 55%,#000)}
.fx-shero .sh-inner{position:absolute;left:4vw;bottom:10%;z-index:3;max-width:82vw}
.fx-shero .sh-inner .bb-title{font-size:clamp(30px,4.6vw,64px)}
/* info strip under the seasons hero (year · N Seasons · HD, description, starring) */
.fx-sinfo{max-width:1280px;margin:0 auto;padding:26px 4vw 6px;border-bottom:1px solid var(--fx-line)}
.fx-sinfo .si-meta{display:flex;align-items:center;gap:16px;font-size:17px;color:#d2d2d2;margin-bottom:14px}
.fx-sinfo .si-meta .cnt{font-weight:600;color:#fff}
.fx-sinfo .si-meta .hd{border:1px solid #666;border-radius:3px;padding:0 6px;font-size:11px;letter-spacing:.06em;color:#ccc}
.fx-sinfo .si-desc{font-size:15.5px;line-height:1.6;color:#e5e5e5;max-width:900px;margin-bottom:12px}
.fx-sinfo .si-starring{font-size:14px;color:var(--fx-dim);padding-bottom:20px}
.fx-sinfo .si-starring b{color:#fff;font-weight:600}

.fx-epwrap{max-width:1280px;margin:0 auto;padding:34px 4vw 40px}
/* "Season 1: Haldi  [U/A 16+]" line under the Episodes header */
.fx-seasonline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:16px;color:#e5e5e5;margin:10px 0 6px}
.fx-seasonline b{font-weight:700;color:#fff}
.fx-seasonline .badge{border:1px solid #666;border-radius:3px;padding:1px 8px;font-size:11.5px;letter-spacing:.04em;color:#ccc}
.fx-seasonline .photos{color:var(--fx-dim);font-size:13px;text-decoration:underline}
.fx-seasonline .photos:hover{color:#fff}
.fx-ep .dur .dl{vertical-align:-5px;margin-left:12px;color:var(--fx-dim);cursor:pointer}
.fx-ep .dur .dl:hover{color:#fff}
.fx-ephead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.fx-ephead h2{font-size:clamp(20px,2.2vw,30px);font-weight:800}
.fx-select{position:relative}
.fx-select select{appearance:none;-webkit-appearance:none;background:#242424;border:1px solid #4d4d4d;color:#fff;
  border-radius:4px;padding:12px 44px 12px 18px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.fx-select::after{content:"▾";position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:#fff}
.fx-epmeta{color:var(--fx-dim);font-size:14px;margin-bottom:18px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.fx-ep{display:flex;gap:clamp(14px,2vw,30px);align-items:flex-start;padding:clamp(14px,1.8vw,26px) clamp(4px,1.4vw,22px);
  border-bottom:1px solid var(--fx-line);border-radius:6px;cursor:pointer;transition:background .2s;width:100%;text-align:left}
.fx-ep:last-child{border-bottom:none}
.fx-ep:hover{background:#1a1a1a}
.fx-ep .num{flex:none;width:28px;font-size:22px;color:var(--fx-faint);font-weight:400;align-self:center;text-align:center}
.fx-ep .th{position:relative;flex:none;width:clamp(120px,18vw,290px);aspect-ratio:16/9;border-radius:6px;overflow:hidden;
  background:var(--fx-card) center/cover no-repeat}
.fx-ep .th .ph{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:.2s}
.fx-ep:hover .th .ph{opacity:1}
.fx-ep .th .ph span{width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.5);border:2px solid #fff;display:grid;place-items:center}
.fx-ep .bd{flex:1;min-width:0;padding-top:2px}
.fx-ep .bd .row1{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fx-ep .bd h3{font-size:clamp(15px,1.3vw,18px);font-weight:700}
.fx-ep .bd .dur{color:var(--fx-dim);font-size:13px;flex:none}
.fx-ep .bd p{margin-top:8px;color:var(--fx-dim);font-size:14px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:640px){
  .fx-ep{flex-wrap:wrap}.fx-ep .num{display:none}
  .fx-ep .th{width:38vw}.fx-ep .bd p{-webkit-line-clamp:4}
}

/* ---------------- info page ---------------- */
.fx-ihero{position:relative;width:100%;height:min(52vw,78vh);min-height:380px;overflow:hidden;background:var(--fx-surface)}
.fx-ihero .bb-img{position:absolute;inset:0;background-size:cover;background-position:center}
.fx-ihero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.25) 50%,#000),linear-gradient(77deg,rgba(0,0,0,.55),transparent 60%)}
.fx-ihero .sh-inner{position:absolute;left:4vw;bottom:9%;z-index:3;max-width:86vw}
.fx-iwrap{max-width:1180px;margin:0 auto;padding:30px 4vw 50px;display:grid;grid-template-columns:1.7fr 1fr;gap:40px}
.fx-iwrap .imeta{color:var(--fx-dim);font-size:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.fx-iwrap .imeta b{color:#46d369;font-weight:700}
.fx-iwrap .idesc{font-size:16px;line-height:1.65;color:#e5e5e5}
.fx-iwrap .side{font-size:13.5px;line-height:1.7;color:var(--fx-dim)}
.fx-iwrap .side b{color:#fff;font-weight:600}
.fx-iwrap .side .lbl{color:var(--fx-faint)}
.fx-iwrap .side div{margin-bottom:10px}
.fx-gallery{max-width:1180px;margin:0 auto;padding:0 4vw 70px}
.fx-gallery h2{font-size:clamp(18px,2vw,26px);font-weight:800;margin-bottom:16px}
.fx-gallery .gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.fx-gallery .gg div{aspect-ratio:16/10;border-radius:6px;background:var(--fx-card) center/cover no-repeat;
  transition:transform .3s var(--fx-ease)}
.fx-gallery .gg div:hover{transform:scale(1.03)}
@media(max-width:860px){.fx-iwrap{grid-template-columns:1fr;gap:22px}}

/* ---------------- watch page ---------------- */
.fx-watch{position:fixed;inset:0;background:#000;z-index:50}
.fx-watch .stage{position:absolute;inset:0;display:grid;place-items:center}
.fx-watch .stage iframe,.fx-watch #wPlayer{width:100vw;height:100vh;border:0}
.fx-wtop{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:18px;padding:18px 3vw;
  background:linear-gradient(180deg,rgba(0,0,0,.75),transparent);transition:opacity .5s;opacity:1}
.fx-wtop.hide{opacity:0;pointer-events:none}
.fx-wtop .back{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;transition:.2s}
.fx-wtop .back:hover{background:rgba(255,255,255,.14)}
.fx-wtop .wt{font-size:15px;color:#e5e5e5}
.fx-wtop .wt b{font-weight:700;color:#fff}
.fx-wbot{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;flex-direction:column;
  gap:10px;padding:34px 3vw 16px;background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.4) 70%,transparent);transition:opacity .5s;opacity:1}
.fx-wbot.hide{opacity:0;pointer-events:none}
.fx-wnext{position:absolute;right:3vw;bottom:24vh;z-index:7;display:none}
.fx-wnext.show{display:block;animation:wnrise .4s var(--fx-ease)}
@keyframes wnrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* edge hover buttons: left = start from beginning, right = next episode */
.fx-wedge{position:absolute;top:50%;transform:translateY(-50%);z-index:8;display:none;align-items:center;gap:10px;
  background:rgba(0,0,0,.66);border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:8px;
  padding:14px 20px;font-weight:700;font-size:15px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  max-width:38vw;text-align:left}
.fx-wedge.show{display:flex;animation:wnrise .3s var(--fx-ease)}
.fx-wedge.left{left:2vw}
.fx-wedge.right{right:2vw}
.fx-wedge:hover{background:rgba(255,255,255,.18)}
@media(max-width:640px){.fx-wedge{font-size:13px;padding:10px 14px}}

/* bottom catalog strip: every episode + teaser/trailers, click to play */
.fx-wstrip{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none}
.fx-wstrip::-webkit-scrollbar{display:none}
.wsit{flex:none;width:clamp(130px,13vw,180px);text-align:left;opacity:.72;transition:opacity .2s,transform .2s}
.wsit:hover{opacity:1;transform:translateY(-3px)}
.wsit.cur{opacity:1}
.wsit .im{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;
  background:#181818 center/cover no-repeat;border:2px solid transparent}
.wsit.cur .im{border-color:#fff}
.wsit .im .now{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.72);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;text-align:center}
.wsit b{display:block;font-size:12.5px;font-weight:700;color:#e5e5e5;margin-top:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsit small{display:block;font-size:10.5px;color:var(--fx-faint);letter-spacing:.06em;text-transform:uppercase;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------------- gates / misc ---------------- */
.fx-gate{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 100% at 50% 0%,#1c1c1c,#000)}
.fx-gate-card{max-width:440px;width:100%;background:rgba(0,0,0,.75);border:1px solid var(--fx-line);
  border-radius:8px;padding:44px 38px;text-align:center}
.fx-gate-card .lock{font-size:34px;margin-bottom:14px}
.fx-gate-card h1{font-size:26px;font-weight:800;margin-bottom:10px}
.fx-gate-card p{color:var(--fx-dim);font-size:14.5px;line-height:1.6;margin-bottom:14px}
.fx-gate-card .contact{color:#fff;font-weight:700;margin-bottom:8px}
.fx-gate-card .fx-btn{width:100%;margin-top:10px}
.fx-foot{text-align:center;padding:46px 20px 42px;border-top:1px solid var(--fx-line)}
.fx-foot img{height:26px;width:auto;opacity:.9;margin-bottom:10px}
.fx-foot p{color:var(--fx-dim);font-size:13px;margin-bottom:4px}
.fx-foot p b{color:#fff}
.fx-foot small{color:var(--fx-faint);font-size:11px;letter-spacing:.28em;text-transform:uppercase}
.fx-main{padding-top:0}
@media (prefers-reduced-motion:reduce){.fx *{animation:none!important;transition:none!important}}