:root{
  --glow-left-x: 33;  --glow-left-y: 41;
  --glow-right-x: 40; --glow-right-y: 42;
  --hand-x: 48; --hand-y: 78;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:#fff; background:#080316; overflow:hidden}
.stage{position:fixed; inset:0; z-index:-1}
.swirl{position:absolute; inset:-15vmax; background: conic-gradient(from 0deg, #7c3aed, #06b6d4, #f59e0b, #ec4899, #22c55e, #7c3aed); filter: blur(120px) saturate(170%); animation: swirl 28s linear infinite; opacity:.30}
@keyframes swirl{to{transform:rotate(360deg)}}
.grid{position:absolute; inset:0; background-image:radial-gradient(circle at 50% 60%, rgba(255,255,255,.06), rgba(0,0,0,0) 40%), linear-gradient(transparent 97%, rgba(255,255,255,.06) 97%), linear-gradient(90deg, transparent 97%, rgba(255,255,255,.06) 97%); background-size: 100% 100%, 50px 50px, 50px 50px; transform: perspective(900px) rotateX(55deg) translateY(18vh); filter: drop-shadow(0 -20px 60px rgba(124,58,237,.45)); opacity:.32}
#geo{position:absolute; inset:0; pointer-events:none}
.film{position:absolute; inset:0; background: radial-gradient(120% 100% at 50% 62%, rgba(0,0,0,0), rgba(0,0,0,.55)); pointer-events:none}
.layout{height:100dvh; display:grid; grid-template-rows: 1fr; align-content:center; justify-items:center; padding: clamp(16px, 3vw, 24px); text-align:center}
.poster{position:relative; max-width: min(95vw, 1000px); height: min(72dvh, 900px); aspect-ratio: 2/3; display:grid; place-items:center; overflow:hidden; margin-inline:auto; -webkit-mask-image: radial-gradient(120% 85% at 50% 50%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 90%); mask-image: radial-gradient(120% 85% at 50% 50%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 90%)}
.poster img{width:100%; height:100%; object-fit:cover; object-position:30% center; mix-blend-mode: screen; opacity:.95; filter: contrast(112%) saturate(124%) brightness(108%)}
.poster .glow{position:absolute; inset:-5%; background: radial-gradient(60% 40% at 65% 70%, rgba(255,140,64,.28), rgba(255,140,64,0) 60%), radial-gradient(80% 50% at 35% 30%, rgba(124,58,237,.28), rgba(124,58,237,0) 70%); filter: blur(8px); pointer-events:none; animation: pulse 6s ease-in-out infinite; mix-blend-mode: screen}
@keyframes pulse{0%,100%{opacity:.65; transform:scale(1)} 50%{opacity:.98; transform:scale(1.03)}}
.posterFx{position:absolute; inset:0; width:100%; height:100%; opacity:.22; mix-blend-mode: screen; pointer-events:none}
.copy{ position: fixed; left:50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 20; }
.copy .msg{display:inline-block; background: rgba(8,3,22,.62); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 40px rgba(0,0,0,.5), inset 0 0 40px rgba(124,58,237,.16); border-radius: 16px; padding: clamp(12px, 2.5vw, 20px) clamp(16px, 3.5vw, 28px); backdrop-filter: blur(6px); max-width: min(92vw, 900px)}
.copy h1{margin:0; font-size: clamp(22px, 4.2vw, 40px); font-weight: 900; line-height: 1.15; text-shadow: 0 10px 40px rgba(0,0,0,.6)}
.btn-cta{display:inline-block; margin: clamp(8px, 1.2vw, 12px) 0 0 0; padding: 10px 18px; border-radius: 999px; font-weight: 800; letter-spacing:.02em; text-decoration:none; color:#0b0218; background: linear-gradient(135deg, #f59e0b, #22c55e 40%, #06b6d4 80%); box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.15) inset}
.btn-cta:hover{ filter: brightness(1.05) saturate(1.1) }
.btn-cta:active{ transform: translateY(1px) }