:root {
  --bg: #0a0303;
  --fg: #f8fafc;
  --primary: #e63946;
  --primary-glow: rgba(230, 57, 70, 0.6);
  --glass: rgba(255, 255, 255, 0.04);
  --glass-hover: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.1);
}

/* ══ RESET ════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  font-family:'Inter',sans-serif;
  color:var(--fg);overflow-x:hidden;
  cursor:none;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
}
.hidden { display: none !important; }
::selection{background:var(--primary);color:var(--bg)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:4px;}

/* ══ CURSOR ═══════════════════════════════════════════════ */
#cur{
  position:fixed;z-index:999999;pointer-events:none;
  width:12px;height:12px;background:var(--primary);
  border-radius: 50%;
  transform:translate(-50%,-50%);
  box-shadow: 0 0 15px var(--primary-glow);
  transition:width .2s,height .2s,background .2s,box-shadow .2s;
}
#cur.hov{
  width:24px;height:24px;background:transparent;
  border: 1px solid var(--primary);
  box-shadow: 0 0 20px var(--primary-glow) inset, 0 0 20px var(--primary-glow);
}
#cur.click{
  width:8px;height:8px;background:#fff;
  box-shadow: 0 0 30px #fff;
}

/* ══ GOD RAYS ANIMATION ═══════════════════════════════════ */
.god-ray {
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(230, 57, 70, 0.04) 45%, rgba(255,255,255,0.05) 50%, rgba(230, 57, 70, 0.04) 55%, transparent 60%);
  animation: rayMove 15s linear infinite;
  pointer-events: none; z-index: 0; mix-blend-mode: screen;
}
@keyframes rayMove {
  0% { transform: translateY(-10%) rotate(15deg); }
  50% { transform: translateY(10%) rotate(15deg); }
  100% { transform: translateY(-10%) rotate(15deg); }
}

/* ══ NAV ══════════════════════════════════════════════════ */
nav{
  position:sticky;top:0;z-index:8000;
  background:rgba(5, 5, 5, 0.7);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(24px,5vw,64px);height:80px;
}
.nav-logo{
  font-family:'Playfair Display',serif;font-size:24px;letter-spacing:4px;
  display:flex;align-items:center;gap:6px; color: var(--fg); text-transform: uppercase;
}
.nav-logo .movies{
  font-family: 'Inter', sans-serif; font-size:10px;letter-spacing:4px;
  color:rgba(255,255,255,.5); font-weight: 300;
}
.nav-links{display:flex;gap:32px}
.nav-links a{
  font-family:'Inter',sans-serif;font-size:13px;letter-spacing:2px; text-transform: uppercase;
  color:rgba(255,255,255,.7); text-decoration: none;
  transition:color .3s;
}
.nav-links a:hover{ color:var(--primary); text-shadow: 0 0 10px var(--primary-glow); }
.nav-sub{
  font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px; text-transform: uppercase;
  padding:12px 28px; background: transparent; color: var(--primary);
  border: 1px solid var(--primary); border-radius: 30px;
  transition:all .3s; cursor:none; text-decoration: none;
}
.nav-sub:hover{ background: var(--primary); color: var(--bg); box-shadow: 0 0 20px var(--primary-glow); }

/* ══ HERO ═════════════════════════════════════════════════ */
#hero{
  min-height:calc(100vh - 80px);
  display:flex; align-items:center; justify-content:center;
  position: relative; text-align: center; overflow: hidden;
}
.hero-content{
  position: relative; z-index: 2; display:flex; flex-direction:column; align-items:center; gap:32px;
  max-width: 900px; padding: 0 24px;
}
.hero-tag{
  font-family:'Inter',sans-serif;font-size:12px;letter-spacing:4px; text-transform: uppercase;
  color: var(--primary); padding: 8px 24px; border: 1px solid var(--primary-glow);
  border-radius: 30px; background: var(--glass);
}
.hero-h1{
  font-size:clamp(48px,8vw,110px);
  line-height:1.1;letter-spacing:-1px;color:var(--fg);
  text-shadow: 0 0 40px rgba(255,255,255,0.2);
}
.hero-h1 span{display:block}
.hero-h1 .hl-gold{color:var(--primary); text-shadow: 0 0 40px var(--primary-glow); font-style: italic;}
.hero-desc{
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size:clamp(18px,2vw,24px);color:rgba(255,255,255,.7);
  line-height:1.6;max-width:600px;
}
.hero-btns{display:flex;gap:20px; justify-content: center;}
.btn-primary{
  font-family:'Inter',sans-serif;font-weight:500;font-size:13px;letter-spacing:2px;text-transform:uppercase;
  padding:16px 40px;background:var(--primary);color:var(--bg); border: none;
  border-radius:30px; cursor:none; transition:all .3s; text-decoration:none;
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow: 0 10px 30px var(--primary-glow); }
.btn-secondary{
  font-family:'Inter',sans-serif;font-weight:500;font-size:13px;letter-spacing:2px;text-transform:uppercase;
  padding:16px 40px;background:transparent;color:var(--fg); border: 1px solid var(--glass-border);
  border-radius:30px; cursor:none; transition:all .3s; text-decoration:none;
}
.btn-secondary:hover{ border-color: var(--primary); color: var(--primary); background: var(--glass); }

/* ══ CHARACTERS SECTION ═══════════════════════════════════ */
#chars{padding:120px 0;}
.chars-head{
  padding:0 clamp(24px,5vw,64px);margin-bottom:60px;
  text-align: center;
}
.sec-h2{
  font-size:clamp(36px,5vw,64px);letter-spacing:1px; color:var(--fg);
  margin-bottom: 16px;
}
.sec-desc {
  font-family: 'Inter', sans-serif; font-size: 16px; color: rgba(255,255,255,0.6);
  max-width: 600px; margin: 0 auto;
}

.chars-scroll{
  display:flex;gap:32px;overflow-x:auto;padding:20px clamp(24px,5vw,64px) 60px;
  scroll-snap-type:x mandatory;scrollbar-width:none;
}
.chars-scroll::-webkit-scrollbar{display:none;}
.char-card{
  scroll-snap-align:center;flex-shrink:0;
  width:280px; height: 400px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 16px; position:relative; overflow: hidden;
  transition: transform 0.4s, border-color 0.4s, box-shadow 0.4s;
  cursor: none;
}
.char-card:hover {
  transform: translateY(-10px);
  border-color: var(--primary-glow);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 20px var(--primary-glow);
}
.char-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0.5; transition: opacity 0.4s, transform 0.4s; z-index: 1;
}
.char-card:hover .char-bg { opacity: 0.8; transform: scale(1.05); }
.char-grad {
  position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 0%, transparent 60%); z-index: 2;
}
.char-info {
  position: absolute; bottom: 0; left: 0; width: 100%; padding: 32px 24px; z-index: 3;
}
.char-name{
  font-family:'Playfair Display',serif;font-size:28px; color:var(--fg); margin-bottom: 8px;
}
.char-role{
  font-family:'Inter',sans-serif;font-size:11px;letter-spacing:3px;
  text-transform:uppercase;color:var(--primary);
}

/* ══ EPISODES SECTION ════════════════════════════════════ */
#episodes{
  padding:120px clamp(24px,5vw,64px); background: #080808;
}
.eps-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:40px; margin-top:60px;
}
.ep-card{
  background:var(--glass); border: 1px solid var(--glass-border); border-radius: 16px;
  overflow:hidden; cursor:none; transition:all 0.4s;
}
.ep-card:hover{
  transform:translateY(-8px); border-color: var(--primary-glow);
  box-shadow: 0 15px 35px rgba(0,0,0,0.6), 0 0 15px rgba(255,215,0,0.2);
}
.ep-thumb{
  height: 200px; display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden; background: #111;
}
.ep-thumb img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: opacity 0.4s, transform 0.4s;
}
.ep-card:hover .ep-thumb img { opacity: 1; transform: scale(1.05); }
.ep-badge{
  position:absolute;top:16px;left:16px; z-index:3;
  font-family:'Inter',sans-serif;font-size:10px;letter-spacing:2px; text-transform: uppercase;
  background:var(--primary);color:var(--bg); padding:4px 12px; border-radius: 20px; font-weight: 600;
}
.ep-body{padding:24px;}
.ep-title{
  font-family:'Playfair Display',serif;font-size:22px; color:var(--fg); margin-bottom:12px;
}
.ep-desc{font-family: 'Inter', sans-serif; font-size:14px;color:rgba(255,255,255,0.6);line-height:1.6;margin-bottom:24px;}
.ep-link{
  font-family:'Inter',sans-serif;font-size:12px;letter-spacing:2px; text-transform: uppercase;
  color:var(--primary);display:flex;align-items:center;gap:8px; transition:gap .3s;
}
.ep-card:hover .ep-link { gap: 12px; }

/* ══ FOOTER ════════════════════════════════════════════════ */
footer{
  background:var(--bg); border-top: 1px solid var(--glass-border);
  padding:80px clamp(24px,5vw,64px) 40px; text-align: center;
}
.foot-logo{
  font-family:'Playfair Display',serif;font-size:36px;letter-spacing:4px;
  color:var(--fg); margin-bottom: 24px; text-transform: uppercase;
}
.foot-desc{
  font-family:'Inter',sans-serif;font-size:14px;color:rgba(255,255,255,.5);line-height:1.8;max-width:500px; margin: 0 auto 40px;
}
.foot-copy{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:1px;color:rgba(255,255,255,.3)}

/* ══ VIDEO POPUP ══════════════════════════════════════════ */
#video-popup {
  position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px);
  z-index: 99990; display: flex; align-items: center; justify-content: center;
}
.vid-box {
  background: var(--bg); border: 1px solid var(--primary-glow); border-radius: 16px;
  padding: 40px; max-width: 500px; width: 90%; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(255,215,0,0.1);
}
.vid-box h3 {
  font-size: 28px; color: var(--primary); margin-bottom: 16px;
}
.vid-box p {
  font-family: 'Inter', sans-serif; font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.6; margin-bottom: 32px;
}
.vid-box button {
  font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  background: transparent; color: var(--fg); border: 1px solid var(--glass-border);
  padding: 12px 32px; border-radius: 30px; cursor: pointer; transition: all 0.3s;
}
.vid-box button:hover {
  background: var(--primary); color: var(--bg); border-color: var(--primary);
}