.movie-hero{position:relative;display:grid;align-items:end;isolation:isolate;overflow:hidden;min-height:clamp(570px,76vh,820px);background:#071711}
.movie-hero-art,.movie-hero-glow{position:absolute;inset:0;z-index:-2;pointer-events:none}
.movie-hero-art{background:linear-gradient(90deg,#071711 3%,rgba(7,23,17,.93) 28%,rgba(7,23,17,.27) 68%,transparent),linear-gradient(0deg,#071711,transparent 40%),url('doomsday-poster.webp') right 44%/auto 100% no-repeat;animation:movie-art-in 1.3s ease-out both}
.movie-hero-glow{z-index:-1;background:radial-gradient(ellipse at 55% 25%,rgba(147,240,98,.20),transparent 47%);animation:movie-glow-in 2.1s ease-out both}
.movie-hero-content,.movie-night{width:min(1160px,calc(100% - 64px));margin-inline:auto}
.movie-hero-content{padding-block:96px 72px;animation:movie-content-in .75s ease-out both}
.movie-kicker{color:#bce99c;font-size:.77rem;letter-spacing:.14em;text-transform:uppercase;font-weight:750}
.movie-hero h1{max-width:9ch;margin:.24em 0 .2em;font-size:clamp(3rem,8vw,7.4rem);line-height:.91;letter-spacing:-.064em;text-wrap:balance}
.movie-intro{font-size:clamp(1rem,2.15vw,1.35rem);color:#e4ebe5}
.movie-facts{display:flex;flex-wrap:wrap;gap:18px 28px;margin:28px 0}
.movie-facts div{border-left:2px solid #8cb867;padding-left:13px}
.movie-facts dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:#bce99c;font-weight:700}
.movie-facts dd{margin:4px 0 0;font-weight:650}
.movie-actions{display:flex;flex-wrap:wrap;gap:12px}
.movie-actions .btn,.movie-payment .btn{transition:transform .18s ease,box-shadow .18s ease}
.movie-actions .btn:hover,.movie-payment .btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px #a6ed8129}
.movie-night{padding-block:62px 80px;scroll-margin-top:24px}
.movie-night-header{max-width:58ch;margin-bottom:24px}
.movie-night h2{margin:0 0 10px 0;font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-.045em;line-height:110%}
.movie-night-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,1fr);gap:20px}
.movie-guide,.movie-payment{padding:clamp(20px,3vw,34px);border:1px solid var(--line);border-radius:20px;background:var(--panel)}
.movie-guide ol{padding-left:1.5rem;margin:0}
.movie-guide li{padding-left:.45rem}
.movie-guide li::marker{color:var(--green);font-weight:750}
.movie-guide li+li{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.movie-guide h3,.movie-payment h3{margin:0}
.movie-guide p,.movie-payment p{margin:.4rem 0 0;color:#c2d1c9}
.movie-guide a{text-decoration:underline;text-underline-offset:3px;color:var(--green)}
.movie-payment{text-align:center;background:radial-gradient(ellipse at 50% 0%,#294629,var(--panel) 73%)}
.movie-payment figure{margin:15px auto;width:min(100%,230px)}
.movie-payment img{display:block;width:100%;height:auto;border-radius:8px}
.movie-payment .btn{margin-top:16px}
@keyframes movie-art-in{from{opacity:.55;transform:scale(1.055)}to{opacity:1;transform:scale(1)}}
@keyframes movie-glow-in{from{opacity:0;transform:translateX(9%)}to{opacity:1;transform:translateX(0)}}
@keyframes movie-content-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.movie-hero{min-height:0}.movie-hero-art{background:linear-gradient(0deg,#071711 6%,#071711 24%,rgba(7,23,17,.76) 45%,transparent 78%),url('doomsday-poster.webp') center top/auto clamp(310px,75vw,550px) no-repeat}.movie-hero-content,.movie-night{width:calc(100% - 36px)}.movie-hero-content{padding-block:clamp(210px,53vw,350px) 35px}.movie-night-grid{grid-template-columns:1fr}.movie-night{padding-block:38px 48px}}
@media(prefers-reduced-motion:reduce){.movie-hero-art,.movie-hero-glow,.movie-hero-content{animation:none}.movie-actions .btn,.movie-payment .btn{transition:none}}
.movie-guide .movie-facebook{margin-top:12px;text-decoration:none}