/* ================================================
   CINEVERSE 3.0 — NEON REVOLUTION
   HTML/CSS/JS thuần • responsive • GitHub Pages
   ================================================ */
:root {
  --navy: #21244D;
  --purple: #4A26AB;
  --violet: #9543A7;
  --pink: #E350A8;
  --cyan: #B8E7EA;
  --ink: #0b0c1c;
  --ink-2: #12132b;
  --white: #f6f4ff;
  --muted: #a9a9c6;
  --border: rgba(184,231,234,.16);
  --font-tech: 'Orbitron', 'Segoe UI', sans-serif;
  --font-main: 'Inter', 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; background: var(--ink); color: var(--white); font: 400 15px/1.65 var(--font-main); overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse at 12% 5%,rgba(74,38,171,.18),transparent 47%),radial-gradient(ellipse at 85% 85%,rgba(227,80,168,.11),transparent 48%),var(--ink); }
a { color: inherit; text-decoration: none; }
button,input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:focus-visible,a:focus-visible,input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
img { max-width: 100%; }
::selection { background: var(--pink); color: var(--ink); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--purple),var(--pink)); border-radius: 9px; }
.shell { width: min(1240px,calc(100% - 80px)); margin: auto; }
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position: fixed; left: 12px; top: -70px; z-index: 1000; background: var(--cyan); padding: 10px; color: var(--ink); }
.skip-link:focus { top: 12px; }
#ambient { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.background-grid { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .2; background-image: linear-gradient(rgba(184,231,234,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(184,231,234,.08) 1px,transparent 1px); background-size: 62px 62px; mask-image: linear-gradient(transparent 2%,black 40%,transparent 100%); animation: grid-drift 30s linear infinite; }
@keyframes grid-drift { to { background-position: 62px 62px; } }

/* Header */
.header { height: 76px; position: fixed; top: 0; left: 0; right: 0; z-index: 50; border-bottom: 1px solid rgba(184,231,234,.10); background: rgba(10,11,29,.57); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: background .3s,border-color .3s,box-shadow .3s; }
.header.scrolled { background: rgba(11,12,28,.94); border-color: rgba(227,80,168,.24); box-shadow: 0 10px 35px rgba(0,0,0,.28); }
.nav-shell { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.brand { display:inline-flex; align-items:center; gap:10px; font:800 19px/1 var(--font-tech); letter-spacing:.06em; white-space:nowrap; }
.brand-accent { color: var(--cyan); text-shadow: 0 0 18px rgba(184,231,234,.55); }
.brand-glyph { font-size: 33px; color: var(--pink); text-shadow: 0 0 20px rgba(227,80,168,.7); animation: brand-glow 4s ease-in-out infinite; }
@keyframes brand-glow { 50% { filter: drop-shadow(0 0 12px var(--pink)); transform: rotate(90deg); } }
.desktop-nav { display:flex; align-items:center; gap:27px; }
.nav-item { position:relative; padding: 28px 0; color: #b6b5ce; font-weight: 700; font-size: 12px; transition: color .2s; }
.nav-item:hover,.nav-item.active { color: var(--cyan); }
.nav-item::after { content:''; position:absolute; bottom:19px; left:0; right:100%; height:2px; background:linear-gradient(90deg,var(--cyan),var(--pink)); box-shadow:0 0 12px var(--cyan); transition:right .25s; }
.nav-item:hover::after,.nav-item.active::after { right:0; }
.nav-tools { display:flex; gap:11px; align-items:center; }
.search { height:40px; min-width: 240px; display:flex; align-items:center; gap:9px; padding:0 13px; border:1px solid rgba(149,67,167,.35); background:rgba(74,38,171,.22); border-radius:6px; transition:border-color .3s,box-shadow .3s; }
.search:focus-within { border-color:var(--cyan); box-shadow:0 0 18px rgba(184,231,234,.18); }
.search svg { fill:none; stroke:var(--cyan); stroke-width:2; }
.search input { width: 155px; flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--white); font-size:12px; }
.search input::placeholder { color: #9290b0; }
.search kbd { font:10px var(--font-tech); color:#7d7c9f; }
.favorites-trigger,.menu-trigger { flex-shrink:0; height:40px; border:1px solid var(--border); border-radius:6px; background:rgba(255,255,255,.04); color:var(--cyan); }
.favorites-trigger { min-width:49px; display:flex; align-items:center; gap:3px; justify-content:center; font-size:22px; transition:.2s; }
.favorites-trigger:hover,.favorites-trigger.active { background:rgba(227,80,168,.12); border-color:var(--pink); color:var(--pink); }
.favorite-count { font:700 11px var(--font-main); }
.menu-trigger { width:42px; display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; }
.menu-trigger span { width:19px; height:2px; background:var(--cyan); }
.mobile-menu { position:absolute; top:76px; left:0; right:0; padding:14px 25px 22px; background:#11132e; border-bottom:1px solid var(--border); box-shadow:0 18px 35px rgba(0,0,0,.4); }
.mobile-menu[hidden] { display:none!important; }
.mobile-menu a { display:block; padding:12px; border-bottom:1px solid rgba(255,255,255,.06); }
.mobile-menu a:hover { color:var(--cyan); }

/* Hero */
.hero { position:relative; min-height: min(880px,100svh); min-height: 800px; padding-top:76px; display:flex; align-items:center; isolation:isolate; overflow:hidden; background:linear-gradient(115deg,#131535,#252154 55%,#301b4a); }
.hero-art { position:absolute; inset:0; z-index:-3; background-position:76% 40%; background-size:cover; filter:saturate(.85); transition:background-image .5s; --hero-a:#e28a61; --hero-b:#4A26AB; }
.hero-art::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 45%,var(--hero-a),transparent 38%),linear-gradient(110deg,#111530,transparent 80%),radial-gradient(circle at 90% 90%,var(--hero-b),transparent 60%); mix-blend-mode:screen; opacity:.25; }
.hero-art::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(0,0,0,.10) 5px 6px); opacity:.18; }
.hero-orb { position:absolute; width:min(58vw,720px); aspect-ratio:1; right:4%; top:8%; border-radius:50%; border:1px solid rgba(184,231,234,.18); box-shadow:0 0 90px rgba(227,80,168,.17),inset 0 0 70px rgba(74,38,171,.12); animation:orb-float 14s ease-in-out infinite alternate; }
.hero-rings { position:absolute; width:400px; height:400px; right:13%; top:25%; border-radius:50%; border:1px dashed rgba(184,231,234,.18); box-shadow:0 0 30px rgba(184,231,234,.10); animation:ring-turn 35s linear infinite; }
.hero-rings::before,.hero-rings::after { content:''; position:absolute; inset:40px; border-radius:50%; border:1px solid rgba(227,80,168,.23); }
.hero-rings::after { inset:92px; border-style:dotted; }
.hero-shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(8,10,28,.98) 0%,rgba(13,14,39,.92) 28%,rgba(16,15,41,.60) 57%,rgba(12,11,31,.26) 100%),linear-gradient(0deg,var(--ink),transparent 28%,transparent 77%,rgba(10,10,28,.44)); }
.hero-shell { position:relative; padding-top:45px; padding-bottom:95px; }
.hero-content { width:min(670px,100%); }
.hero-enter { animation:hero-enter .7s cubic-bezier(.2,.75,.25,1) both; }
@keyframes hero-enter { from { opacity:.35; transform:translateY(19px); } to { opacity:1; transform:translateY(0); } }
.eyebrow,.kicker,.hero-hud,.section-index,.results-note { font:700 10px/1.6 var(--font-tech); letter-spacing:.17em; }
.eyebrow { color:var(--cyan); display:flex; align-items:center; gap:9px; margin-bottom:22px; }
.eyebrow-line { width:42px; height:1px; background:linear-gradient(90deg,var(--pink),transparent); }
.status-dot { width:7px; height:7px; display:inline-block; flex-shrink:0; border-radius:50%; background:#7cfcc5; box-shadow:0 0 10px #7cfcc5; animation:dot-pulse 2.5s infinite; }
.hero-tag { display:inline-block; border:1px solid rgba(227,80,168,.5); background:rgba(227,80,168,.14); color:#ffb3df; padding:7px 13px; letter-spacing:.12em; font:700 10px var(--font-tech); box-shadow:inset 0 0 15px rgba(227,80,168,.10); }
.glitch-title { position:relative; font:900 clamp(40px,5.5vw,79px)/1.1 var(--font-tech); letter-spacing:-.04em; text-transform:uppercase; margin:22px 0; text-shadow:0 0 38px rgba(184,231,234,.13); }
.glitch-title::after { content:attr(data-text); position:absolute; inset:0; color:var(--pink); opacity:0; pointer-events:none; }
.hero-enter .glitch-title::after { animation:glitch .7s steps(2,end) 1; }
.hero-meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:13px; font-weight:700; color:#d4d1e3; }
.meta-dot { width:3px; height:3px; background:var(--pink); border-radius:50%; }
.hero-rating { margin-left:6px; color:var(--cyan); font-family:var(--font-tech); }
.hero-rating small { font:500 11px var(--font-main); color:#b7b3c9; }
.hero-description { max-width:540px; color:#cbc8dd; margin:24px 0 29px; font-size:15px; line-height:1.9; }
.hero-actions { display:flex; gap:13px; flex-wrap:wrap; }
.btn { position:relative; display:inline-flex; justify-content:center; align-items:center; gap:15px; min-height:48px; padding:13px 19px; border-radius:4px; border:1px solid transparent; overflow:hidden; font:800 11px/1.2 var(--font-tech); letter-spacing:.08em; transition:transform .25s,border-color .25s,box-shadow .25s,background .25s; white-space:nowrap; }
.btn::before { content:''; position:absolute; inset:0 auto 0 -70%; width:40%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent); transform:skewX(-22deg); transition:left .5s; }
.btn:hover::before { left:130%; }
.btn:hover { transform:translateY(-3px); }
.btn-primary { color:#150b24; background:linear-gradient(100deg,var(--pink),#f775c6); box-shadow:0 0 24px rgba(227,80,168,.24); }
.btn-primary:hover { box-shadow:0 0 40px rgba(227,80,168,.55); }
.btn-ghost { color:var(--cyan); border-color:rgba(184,231,234,.5); background:rgba(184,231,234,.06); }
.btn-ghost:hover { border-color:var(--cyan); box-shadow:0 0 26px rgba(184,231,234,.18); }
.hero-hint { color:rgba(184,231,234,.56); font:700 10px var(--font-tech); letter-spacing:.17em; margin-top:62px; }
.hero-hint span { display:inline-block; animation:arrow-float 1.6s infinite; }
.hero-hud { position:absolute; left:5%; right:5%; z-index:2; color:rgba(184,231,234,.42); display:flex; justify-content:space-between; pointer-events:none; }
.hud-top { top:104px; }.hud-bottom { bottom:33px; }
.hero-hud::before { content:''; position:absolute; left:0; top:-12px; width:30px; height:18px; border-top:1px solid rgba(184,231,234,.45); border-left:1px solid rgba(184,231,234,.45); }
.hero-controls { position:absolute; bottom:35px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:12px; z-index:5; }
.hero-arrow,.hero-pause { color:var(--cyan); background:rgba(11,12,28,.7); border:1px solid var(--border); width:35px; height:35px; border-radius:50%; transition:.2s; }
.hero-arrow:hover,.hero-pause:hover { border-color:var(--pink); color:var(--pink); box-shadow:0 0 14px rgba(227,80,168,.25); }
.hero-dots { display:flex; align-items:center; gap:9px; }
.hero-dot { border:0; width:8px; height:8px; padding:0; border-radius:8px; background:rgba(184,231,234,.35); transition:.25s; }
.hero-dot.active { width:30px; background:var(--pink); box-shadow:0 0 13px var(--pink); }
.hero-timer { position:absolute; bottom:0; left:0; width:0; height:2px; background:linear-gradient(90deg,var(--purple),var(--pink),var(--cyan)); box-shadow:0 0 16px var(--pink); }
.hero-timer.running { animation:timer 7s linear both; }
@keyframes timer { to { width:100%; } }
@keyframes orb-float { to { transform:translateY(-22px) scale(1.04); } }
@keyframes ring-turn { to { transform:rotate(360deg); } }
@keyframes dot-pulse { 50% { opacity:.35; box-shadow:0 0 3px #7cfcc5; } }
@keyframes arrow-float { 50% { transform:translateY(6px); } }
@keyframes glitch { 0%,100% { opacity:0; transform:translate(0); clip-path:inset(0 0 100% 0); } 18% { opacity:.8; transform:translate(-4px,1px); clip-path:inset(20% 0 45% 0); } 35% { opacity:.7; transform:translate(4px,-2px); clip-path:inset(56% 0 20% 0); } 48% { opacity:.9; transform:translate(-3px,2px); clip-path:inset(12% 0 72% 0); } 60% { opacity:0; } }

/* Ticker */
.ticker { overflow:hidden; padding:13px 0; border-block:1px solid rgba(227,80,168,.22); background:linear-gradient(90deg,rgba(74,38,171,.23),rgba(227,80,168,.16),rgba(74,38,171,.23)); }
.ticker-track { font:700 11px var(--font-tech); letter-spacing:.18em; white-space:nowrap; width:max-content; color:rgba(184,231,234,.67); animation:marquee 35s linear infinite; }
.ticker-track span { color:var(--pink); margin:0 28px; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* Sections */
.section { padding-block:105px; position:relative; }
.section-alt { background:linear-gradient(180deg,rgba(74,38,171,.10),rgba(10,11,28,.26)); border-block:1px solid rgba(184,231,234,.06); }
.section-header { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:34px; }
.kicker { color:var(--cyan); margin:0 0 13px; }
.section-title { font:800 clamp(27px,3.5vw,42px)/1.28 var(--font-tech); letter-spacing:-.025em; margin:0; }
.section-title em { font-style:normal; color:var(--pink); text-shadow:0 0 27px rgba(227,80,168,.25); }
.section-subtitle { margin:12px 0 0; color:var(--muted); }
.section-index { color:rgba(184,231,234,.4); white-space:nowrap; }
.results-note { margin:27px 0 17px; color:rgba(184,231,234,.7); }
.filter-bar { display:flex; flex-wrap:wrap; gap:9px; }
.filter-chip { background:rgba(255,255,255,.025); color:#b3b3cf; border:1px solid var(--border); padding:10px 17px; border-radius:5px; font-weight:700; font-size:12px; transition:.2s; }
.filter-chip:hover { color:var(--cyan); border-color:var(--cyan); }
.filter-chip.selected { color:#fff; background:rgba(227,80,168,.16); border-color:var(--pink); box-shadow:inset 0 0 18px rgba(227,80,168,.1),0 0 18px rgba(227,80,168,.14); }

/* Cards */
.movie-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.latest-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.movie-card { min-width:0; }
.card-poster { --tilt-x:0deg; --tilt-y:0deg; --spot-x:50%; --spot-y:50%; position:relative; aspect-ratio:2/3; border:1px solid rgba(184,231,234,.14); border-radius:10px; overflow:hidden; background:var(--ink-2); transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition:transform .25s,border-color .28s,box-shadow .28s; will-change:transform; }
.card-poster::after { content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at var(--spot-x) var(--spot-y),rgba(184,231,234,.23),transparent 45%); opacity:0; transition:opacity .3s; }
.movie-card:hover .card-poster,.movie-card:focus-within .card-poster { border-color:rgba(227,80,168,.7); box-shadow:0 18px 38px rgba(0,0,0,.36),0 0 25px rgba(227,80,168,.15); }
.movie-card:hover .card-poster::after { opacity:1; }
.poster-art { position:relative; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:18px; overflow:hidden; text-align:center; background:radial-gradient(circle at 75% 25%,var(--poster-a),transparent 45%),linear-gradient(135deg,#141331,var(--poster-b) 65%,#0b0b22); }
.poster-art::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(105deg,transparent 0 22px,rgba(255,255,255,.05) 23px 24px); pointer-events:none; }
.poster-fallback-art { font-size:75px; color:rgba(255,255,255,.14); font-family:var(--font-tech); text-shadow:0 0 30px var(--poster-a); }
.poster-fallback-name { z-index:1; color:#fff; font:800 clamp(14px,1.2vw,20px)/1.5 var(--font-tech); text-transform:uppercase; text-shadow:0 2px 10px rgba(0,0,0,.7); }
.poster-art img { position:absolute; width:100%; height:100%; inset:0; object-fit:cover; z-index:2; transition:transform .55s,filter .55s; }
.movie-card:hover .poster-art img { transform:scale(1.06); filter:saturate(1.12); }
.card-label { position:absolute; left:11px; top:12px; z-index:3; background:rgba(9,10,26,.83); border:1px solid rgba(184,231,234,.33); color:var(--cyan); padding:5px 8px; font:700 9px var(--font-tech); letter-spacing:.05em; backdrop-filter:blur(8px); }
.card-heart { position:absolute; right:10px; top:10px; z-index:4; width:33px; height:33px; border-radius:50%; background:rgba(10,10,29,.7); border:1px solid rgba(255,255,255,.25); color:white; font-size:23px; line-height:1; }
.card-heart:hover,.card-heart.loved { color:var(--pink); border-color:var(--pink); box-shadow:0 0 16px rgba(227,80,168,.35); }
.card-open { position:absolute; left:15px; right:15px; bottom:15px; z-index:4; border:1px solid var(--cyan); background:rgba(10,12,32,.88); color:var(--cyan); padding:12px 6px; font:800 10px var(--font-tech); letter-spacing:.1em; transform:translateY(65px); opacity:0; transition:transform .25s,opacity .25s; backdrop-filter:blur(10px); }
.movie-card:hover .card-open,.movie-card:focus-within .card-open { transform:translateY(0); opacity:1; }
.card-open:hover { background:rgba(184,231,234,.18); }
.card-info { padding:14px 2px 5px; }
.card-title-row { display:flex; justify-content:space-between; gap:7px; align-items:start; }
.card-title-row h3 { font:700 14px/1.4 var(--font-main); margin:0; }
.card-title-row span { flex-shrink:0; color:#f7c86e; font:800 12px var(--font-main); }
.card-info p { margin:7px 0 0; color:var(--muted); font-size:12px; }
.card-info p span { color:var(--pink); margin:0 5px; }
.empty-state { border:1px dashed rgba(184,231,234,.3); background:rgba(184,231,234,.035); padding:60px 20px; text-align:center; }
.empty-state[hidden] { display:none; }
.empty-icon { color:var(--cyan); font-size:75px; }
.empty-state h3 { font:800 18px var(--font-tech); }
.empty-state p { color:var(--muted); }

/* Genres */
.genre-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.genre-tile { position:relative; min-height:185px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:22px; border:1px solid var(--border); text-align:left; border-radius:8px; color:var(--white); background:linear-gradient(135deg,rgba(74,38,171,.17),rgba(227,80,168,.04)); overflow:hidden; transition:border-color .3s,transform .3s,box-shadow .3s; }
.genre-tile::before { content:''; position:absolute; width:130px; height:130px; right:-42px; top:-42px; border:1px solid rgba(184,231,234,.12); border-radius:50%; transition:transform .4s; }
.genre-tile:hover { transform:translateY(-6px); border-color:var(--pink); box-shadow:0 12px 30px rgba(227,80,168,.13); }
.genre-tile:hover::before { transform:scale(1.5); }
.genre-icon { font:700 42px var(--font-tech); color:var(--pink); text-shadow:0 0 25px rgba(227,80,168,.4); }
.genre-label { font:800 12px/1.5 var(--font-tech); letter-spacing:.02em; max-width:90%; }
.genre-arrow { position:absolute; right:20px; bottom:20px; color:var(--cyan); font-size:23px; }

/* Outro + footer */
.outro { position:relative; overflow:hidden; padding:120px 0; border-block:1px solid rgba(227,80,168,.18); background:radial-gradient(circle at 65% 50%,rgba(227,80,168,.14),transparent 40%),radial-gradient(circle at 30% 50%,rgba(74,38,171,.3),transparent 55%),linear-gradient(120deg,#10102a,#19153c); }
.outro::before { content:''; position:absolute; width:500px; height:500px; right:-70px; top:50%; transform:translateY(-50%); border:1px solid rgba(184,231,234,.15); border-radius:50%; box-shadow:0 0 0 90px rgba(184,231,234,.018),0 0 0 180px rgba(227,80,168,.012); }
.outro-inner { position:relative; }
.outro h2 { font:900 clamp(30px,5vw,65px)/1.2 var(--font-tech); margin:15px 0; }
.outro h2 span { color:var(--pink); text-shadow:0 0 28px rgba(227,80,168,.3); }
.outro p:not(.kicker) { color:#c4c2dd; margin-bottom:25px; }
.footer { background:#090a19; padding:53px 0 20px; }
.footer-inner { display:flex; justify-content:space-between; gap:30px; padding-bottom:38px; border-bottom:1px solid var(--border); }
.footer-inner p { color:var(--muted); font-size:13px; }
.footer-links { display:flex; align-items:start; flex-wrap:wrap; gap:25px; font-size:12px; color:#b9b6ce; }
.footer-links a:hover { color:var(--cyan); }
.footer-bottom { display:flex; justify-content:space-between; gap:15px; flex-wrap:wrap; padding:21px 0 0; color:#8d8aa7; font-size:11px; }
.attribution { color:#66647f; font-size:10px; padding-top:8px; }
.back-top { position:fixed; right:24px; bottom:24px; z-index:25; width:45px; height:45px; color:var(--cyan); background:rgba(19,19,46,.9); border:1px solid var(--cyan); border-radius:7px; box-shadow:0 0 20px rgba(184,231,234,.12); opacity:0; transform:translateY(20px); pointer-events:none; transition:.25s; }
.back-top.visible { opacity:1; transform:none; pointer-events:auto; }
.toast { position:fixed; z-index:90; right:20px; bottom:80px; max-width:min(380px,calc(100% - 40px)); padding:13px 18px; border:1px solid var(--pink); background:rgba(24,16,45,.96); box-shadow:0 0 28px rgba(227,80,168,.2); border-radius:6px; color:var(--white); font-weight:700; font-size:12px; opacity:0; transform:translateY(20px); pointer-events:none; transition:.25s; }
.toast.visible { opacity:1; transform:none; }

/* Details dialog */
.movie-dialog { position:fixed; inset:0; margin:auto; width:min(850px,calc(100% - 24px)); max-height:calc(100% - 36px); padding:0; border:1px solid rgba(184,231,234,.4); background:#13142e; border-radius:12px; color:var(--white); overflow:auto; box-shadow:0 0 75px rgba(149,67,167,.3); }
.movie-dialog::backdrop { background:rgba(2,3,12,.86); backdrop-filter:blur(8px); }
.dialog-close { position:absolute; right:17px; top:15px; z-index:5; width:38px; height:38px; border:1px solid var(--border); border-radius:5px; background:rgba(10,10,24,.85); color:var(--white); }
.dialog-grid { display:grid; grid-template-columns:33% 1fr; gap:28px; padding:32px; }
.dialog-poster { aspect-ratio:2/3; min-width:0; border-radius:7px; overflow:hidden; }
.dialog-poster .poster-fallback-name { font-size:15px; }
.dialog-copy { padding:30px 12px 20px 0; }
.dialog-copy h2 { margin:10px 0; font:900 clamp(22px,3vw,35px)/1.24 var(--font-tech); }
.dialog-meta { color:var(--cyan); font-weight:700; font-size:12px; }
.dialog-overview { color:#c2c1d8; line-height:1.95; margin:23px 0 28px; }
.dialog-actions { display:flex; flex-wrap:wrap; gap:10px; }
.dialog-disclaimer { font-size:11px; color:#8f8ca9; margin-top:25px; }

/* Reveal only after JS confirms it can animate safely */
.reveal { opacity:1; transform:none; }
body.js-enabled .reveal:not(.is-visible) { opacity:0; transform:translateY(21px); }
.reveal.is-visible { opacity:1; transform:translateY(0); transition:opacity .65s ease,transform .65s ease; transition-delay:var(--delay,0ms); }

@media (hover:none) {
  .card-open { transform:none; opacity:1; }
  .movie-card .card-poster { transform:none; }
}
@media (max-width:1140px) {
  .shell { width:min(1120px,calc(100% - 48px)); }
  .desktop-nav { gap:16px; }
  .search { min-width:190px; }
  .search input { width:115px; }
  .movie-grid,.latest-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:800px) {
  .header { height:68px; }
  .desktop-nav { display:none; }
  .menu-trigger { display:flex; }
  .mobile-menu { top:68px; }
  .hero { min-height:740px; padding-top:68px; }
  .hero-hud { display:none; }
  .hero-shell { padding-bottom:100px; }
  .hero-content { max-width:630px; }
  .hero-shade { background:linear-gradient(90deg,rgba(8,10,28,.96),rgba(10,12,30,.78) 65%,rgba(8,10,28,.38)),linear-gradient(0deg,var(--ink),transparent 35%); }
  .hero-orb { right:-30%; width:90vw; }
  .hero-rings { right:-120px; }
  .genre-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:580px) {
  .shell { width:calc(100% - 34px); }
  .brand { font-size:15px; gap:5px; }
  .brand-glyph { font-size:25px; }
  .nav-shell { gap:8px; }
  .nav-tools { gap:7px; }
  .search { min-width:0; width:37px; padding:0 9px; transition:width .25s; }
  .search:focus-within { width:min(190px,42vw); }
  .search input { width:0; }
  .search:focus-within input { width:100%; }
  .search kbd { display:none; }
  .favorites-trigger { min-width:42px; }
  .hero { min-height:690px; }
  .hero-shell { padding-top:70px; }
  .hero-description { font-size:13px; line-height:1.8; }
  .glitch-title { font-size:clamp(31px,9vw,53px); overflow-wrap:anywhere; }
  .hero-hint { display:none; }
  .hero-controls { bottom:21px; }
  .hero-actions { gap:8px; }
  .btn { font-size:10px; min-height:44px; padding:12px 13px; }
  .section { padding-block:70px; }
  .section-header { align-items:start; }
  .section-index { display:none; }
  .section-title { font-size:clamp(23px,7vw,31px); }
  .section-subtitle { font-size:13px; }
  .movie-grid,.latest-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
  .card-title-row { display:block; }
  .card-title-row h3 { font-size:12px; }
  .card-title-row span { display:inline-block; margin-top:3px; }
  .card-info p { font-size:11px; }
  .card-label { font-size:7px; }
  .genre-grid { gap:9px; }
  .genre-tile { min-height:145px; padding:14px; }
  .genre-label { font-size:10px; }
  .genre-icon { font-size:31px; }
  .outro { padding:85px 0; }
  .outro h2 { font-size:clamp(29px,7vw,40px); }
  .footer-inner { flex-direction:column; }
  .footer-links { gap:16px; }
  .dialog-grid { grid-template-columns:1fr; padding:20px; gap:12px; }
  .dialog-poster { width:140px; aspect-ratio:2/3; }
  .dialog-copy { padding:0 0 10px; }
  .dialog-copy h2 { font-size:22px; }
  .dialog-overview { font-size:13px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
  .reveal,.reveal:not(.is-visible),body.js-enabled .reveal:not(.is-visible) { opacity:1!important; transform:none!important; }
  .card-open { opacity:1; transform:none; }
}