/* ReelVerse — dark, vertical-drama house style.
   One stylesheet; no build step, no external font requests. */

:root{
  --bg:#0A0714; --bg2:#120B24; --ink:#F2EDF7; --mut:#8B84A3;
  --rose:#FF4D8D; --cyan:#5BE3E8; --line:#241B3E; --card:#140E28;
  --accent:var(--rose);
  --display:"Trebuchet MS","Tahoma","Noto Sans Thai",sans-serif;
  --body:"Helvetica Neue",Arial,"Noto Sans Thai","Sukhumvit Set",sans-serif;
  --wrap:1140px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.65;font-size:16px;
  -webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.wrap.narrow{max-width:760px;}
section{padding:96px 0;}
section.alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--rose);color:#fff;padding:12px 20px;}
.skip:focus{left:0;}

.eyebrow{font-size:11.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;}
h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.6vw,38px);letter-spacing:.04em;margin-bottom:12px;}
h3{font-family:var(--display);font-weight:700;letter-spacing:.03em;}
.lead{color:var(--mut);max-width:640px;margin-bottom:44px;}
.body-copy{color:#C4BBDB;margin-bottom:18px;}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:16px 26px;background:linear-gradient(rgba(10,7,20,.9),transparent);
  backdrop-filter:blur(6px);}
.rv-logo{font-family:var(--display);font-weight:700;letter-spacing:.3em;font-size:15px;}
.rv-logo span{color:var(--rose);}
.nav-r{display:flex;gap:22px;align-items:center;font-size:12.5px;letter-spacing:.12em;color:var(--mut);}
.nav-r a:hover{color:var(--ink);}
.lang-toggle{border:1px solid var(--line);border-radius:99px;padding:5px 13px;font-size:12px;letter-spacing:.15em;}
.lang-toggle:hover{border-color:var(--rose);color:var(--ink);}
nav.scrolled{background:rgba(10,7,20,.94);border-bottom:1px solid var(--line);}
@media(max-width:560px){
  nav{padding:12px 16px;}
  .nav-r{gap:14px;font-size:11.5px;}
}

/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;padding:0 0 90px;overflow:hidden;}
.hero-series,.hero-studio{min-height:64vh;padding-bottom:70px;}
.hero-art{position:absolute;inset:0;
  background:
    radial-gradient(55% 45% at 72% 28%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(45% 40% at 20% 65%, rgba(91,227,232,.14), transparent 60%),
    linear-gradient(175deg,#1A0F35 0%, #0A0714 78%);}
.hero-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 40%, var(--bg) 96%);}
.pulse{position:absolute;left:0;right:0;top:52%;height:2px;z-index:1;opacity:.5;
  background:linear-gradient(90deg,transparent, var(--cyan) 35%, var(--accent) 50%, var(--cyan) 65%, transparent);
  filter:blur(.4px);animation:beat 3.6s ease-in-out infinite;}
@keyframes beat{0%,100%{transform:scaleY(1);opacity:.35}50%{transform:scaleY(2.6);opacity:.8}}
.hero .wrap{position:relative;z-index:2;}
.season{font-size:12px;letter-spacing:.4em;color:var(--cyan);margin-bottom:18px;text-transform:uppercase;}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(38px,7vw,80px);line-height:1.08;letter-spacing:.02em;
  text-shadow:0 0 44px color-mix(in srgb, var(--accent) 30%, transparent);}
.en-title{display:block;font-size:.3em;letter-spacing:.42em;color:var(--mut);margin-top:16px;font-weight:400;}
.logline{margin-top:24px;font-size:17.5px;color:#CBC3DF;max-width:56ch;}
.cta-row{margin-top:38px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.btn{display:inline-block;padding:14px 32px;letter-spacing:.14em;font-size:13px;text-transform:uppercase;
  border:1px solid var(--mut);transition:border-color .2s,filter .2s;}
.btn:hover{border-color:var(--ink);}
.btn.rose{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 0 34px color-mix(in srgb, var(--accent) 34%, transparent);}
.btn.rose:hover{filter:brightness(1.08);}
.meta{margin-top:30px;color:var(--mut);font-size:13px;letter-spacing:.08em;}

/* SERIES CARDS */
.series-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;}
.series-card{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;
  transition:border-color .2s,transform .2s;}
.series-card:hover{border-color:var(--accent);transform:translateY(-3px);}
.series-card.soon{opacity:.6;}
.poster{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;
  background:linear-gradient(205deg, color-mix(in srgb, var(--accent) 26%, #0d0a1e), #0d0a1e);}
.poster-title{font-family:var(--display);font-weight:700;letter-spacing:.28em;font-size:14px;color:var(--ink);}
.series-body{padding:20px;display:flex;flex-direction:column;gap:10px;}
.status{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);}
.series-body p{color:#C4BBDB;font-size:14px;}
.series-meta{color:var(--mut);font-size:12.5px;letter-spacing:.06em;}

/* STORY */
.story-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;}
.story-grid p{color:#C4BBDB;margin-bottom:16px;}
.keyframes{aspect-ratio:16/10;background:#1A1230;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--mut);letter-spacing:.25em;font-size:11px;
  text-transform:uppercase;}
@media(max-width:860px){.story-grid{grid-template-columns:1fr;gap:32px;}}

/* EPISODES */
.ep-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.ep{background:var(--card);border:1px solid var(--line);overflow:hidden;transition:border-color .2s,transform .2s;}
.ep .thumb{aspect-ratio:9/14;display:flex;align-items:flex-end;padding:14px;}
.ep:nth-child(4n+1) .thumb{background:linear-gradient(205deg,#3d1436,#0d0a1e);}
.ep:nth-child(4n+2) .thumb{background:linear-gradient(205deg,#14203d,#0d0a1e);}
.ep:nth-child(4n+3) .thumb{background:linear-gradient(205deg,#33143d,#0d0a1e);}
.ep:nth-child(4n+4) .thumb{background:linear-gradient(205deg,#0f3038,#0d0a1e);}
.ep .num{font-family:var(--display);font-weight:700;font-size:26px;}
.ep .t{padding:12px 14px 16px;font-size:13.5px;color:#CBC3DF;}
.ep .t small{display:block;color:var(--mut);margin-top:4px;font-size:12px;}
a.ep:hover{border-color:var(--accent);transform:translateY(-3px);}
.ep.soon{opacity:.45;}
.ep.current{border-color:var(--accent);}
.more{margin-top:36px;}
@media(max-width:900px){.ep-grid{grid-template-columns:repeat(2,1fr);}}

/* EPISODE PAGE */
.episode{padding:150px 0 96px;}
.crumb{color:var(--mut);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;
  display:flex;gap:10px;flex-wrap:wrap;}
.crumb a:hover{color:var(--ink);}
.episode h1{font-family:var(--display);font-size:clamp(28px,4.6vw,48px);line-height:1.2;letter-spacing:.02em;}
.epnum{display:block;color:var(--accent);font-size:.45em;letter-spacing:.3em;margin-bottom:12px;}
.facts{display:flex;gap:44px;margin:34px 0;flex-wrap:wrap;}
.facts dt{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);margin-bottom:6px;}
.facts dd{font-size:15px;letter-spacing:.06em;}
.soon-note{color:var(--mut);letter-spacing:.2em;text-transform:uppercase;font-size:12.5px;}
.ep-nav{display:flex;gap:14px;flex-wrap:wrap;margin-top:48px;}

/* CAST */
.cast-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.cast{background:var(--card);border:1px solid var(--line);}
.cast .por{aspect-ratio:3/4;display:flex;align-items:flex-end;padding:16px;
  background:linear-gradient(210deg, color-mix(in srgb, var(--accent) 30%, #0c0a20), #0c0a20);}
.cast .por b{font-family:var(--display);font-size:19px;letter-spacing:.05em;}
.cast .bio{padding:16px;font-size:13.5px;color:#C4BBDB;}
.cast .bio small{display:block;color:var(--accent);letter-spacing:.2em;font-size:10.5px;margin-bottom:8px;
  text-transform:uppercase;}

/* BEHIND */
.behind{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;
  border:1px solid var(--line);padding:34px;background:var(--card);}
.behind h3{font-size:22px;margin-bottom:8px;}
.behind p{color:var(--mut);max-width:52ch;font-size:14.5px;}

/* ERROR */
.errpage{padding:180px 0 140px;text-align:center;}
.errpage h1{font-family:var(--display);font-size:clamp(30px,5vw,52px);}
.errpage .logline{margin-left:auto;margin-right:auto;}
.errpage .cta-row{justify-content:center;}

/* FOOTER */
footer{padding:64px 0 100px;color:var(--mut);font-size:13px;}
footer .prod{font-size:14px;letter-spacing:.08em;margin-bottom:18px;}
footer .prod a{color:var(--ink);border-bottom:1px solid var(--rose);padding-bottom:1px;}
footer .soc{line-height:2;}
footer .soc a:hover{color:var(--ink);}
footer .legal{margin-top:18px;opacity:.8;}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
}