/* Apocalypse Optional — motion layer. Everything here is decoration: content is visible without it,
   and prefers-reduced-motion switches it off. */
:root{--ao-lime:#d8ff62}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hero: title rises in, OPTIONAL breathes, stars drift, posters float */
.hero-v2 .ht-line{display:inline-block;animation:ht-rise .9s cubic-bezier(.2,.8,.2,1) both}
.hero-v2 .ht-glow{animation:ht-rise .9s .18s cubic-bezier(.2,.8,.2,1) both,ht-breathe 4.5s 1.4s ease-in-out infinite}
.hero-v2 .hero-subtitle,.hero-v2 .hero-description,.hero-v2 .hero-actions,.hero-v2 .hero-host{animation:ht-fade .8s both}
.hero-v2 .hero-subtitle{animation-delay:.35s}.hero-v2 .hero-description{animation-delay:.5s}.hero-v2 .hero-actions{animation-delay:.65s}.hero-v2 .hero-host{animation-delay:.8s}
@keyframes ht-rise{from{opacity:0;transform:translateY(40px) skewY(4deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes ht-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ht-breathe{0%,100%{text-shadow:0 0 0 rgba(216,255,98,0)}50%{text-shadow:0 0 28px rgba(216,255,98,.45)}}
.hero-art img{animation:hero-drift 26s ease-in-out infinite alternate;transform-origin:60% 40%}
@keyframes hero-drift{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1.5%,-1%)}}
.hero-stars{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;background-image:radial-gradient(1px 1px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 32% 68%,#dfe,transparent),radial-gradient(1.5px 1.5px at 58% 18%,#fff,transparent),radial-gradient(1px 1px at 72% 44%,#ffd,transparent),radial-gradient(1px 1px at 86% 76%,#fff,transparent),radial-gradient(1.5px 1.5px at 44% 88%,#d8ff62,transparent),radial-gradient(1px 1px at 92% 12%,#fff,transparent);background-size:600px 600px;animation:stars 90s linear infinite}
@keyframes stars{to{background-position:600px -600px}}
.hero-posters{position:absolute;right:max(3vw,20px);top:50%;width:min(34vw,440px);height:460px;transform:translateY(-50%);pointer-events:none;z-index:0}
.hero-poster{position:absolute;width:44%;aspect-ratio:2/3;border-radius:6px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(216,255,98,.25);animation:float 9s ease-in-out infinite;opacity:0;animation-fill-mode:both}
.hero-poster img{width:100%;height:100%;object-fit:cover;display:block}
.hp-0{left:30%;top:6%;z-index:3;--r:-3deg;animation-delay:.2s}.hp-1{left:2%;top:22%;z-index:2;--r:-11deg;animation-delay:.5s}.hp-2{left:58%;top:24%;z-index:2;--r:9deg;animation-delay:.8s}.hp-3{left:14%;top:52%;z-index:1;--r:6deg;animation-delay:1.1s}.hp-4{left:48%;top:56%;z-index:1;--r:-7deg;animation-delay:1.4s}
@keyframes float{0%{opacity:0;transform:translateY(40px) rotate(var(--r))}12%{opacity:.95}50%{transform:translateY(-12px) rotate(calc(var(--r) * -.4))}100%{opacity:.95;transform:translateY(0) rotate(var(--r))}}
@media (max-width:900px){.hero-posters{display:none}}

/* How it works */
.how-it-works{padding:34px max(4vw,24px) 10px}
.how-it-works ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:step}
.how-step{display:flex;flex-direction:column;gap:6px;height:100%;padding:20px;border:1px solid #2a3036;background:linear-gradient(160deg,#12171b,#0c0f12);color:#f4f3e9;text-align:left;text-decoration:none;font:inherit;cursor:pointer;transition:border-color .25s,transform .25s,background .25s;position:relative;overflow:hidden;width:100%}
.how-step::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--ao-lime);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.how-step:hover,.how-step:focus-visible{border-color:#4d5a2c;transform:translateY(-3px)}.how-step:hover::after,.how-step:focus-visible::after{transform:scaleX(1)}
.how-num{font:700 .8rem/1 ui-monospace,Menlo,monospace;color:var(--ao-lime);letter-spacing:.12em}
.how-step strong{font-size:1.15rem}.how-step span:last-child{color:#aeb3b3;font-size:.92rem;line-height:1.45}
@media (max-width:900px){.how-it-works ol{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.how-it-works ol{grid-template-columns:1fr}.how-step{padding:16px}}

/* Starter shelf: endless poster marquee */
.start-shelf{padding:56px 0 24px}
.start-shelf .section-heading{padding:0 max(4vw,24px)}
.shelf-marquee{overflow:hidden;padding:18px 0 30px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.shelf-track{display:flex;gap:22px;width:max-content;padding-left:max(4vw,24px);animation:marquee 70s linear infinite}
.shelf-marquee:hover .shelf-track,.shelf-marquee:focus-within .shelf-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(calc(-50% - 11px))}}
.shelf-poster{flex:0 0 auto;width:188px;background:none;border:0;padding:0;color:#f4f3e9;text-align:left;cursor:pointer;font:inherit}
.shelf-frame{position:relative;display:block;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:#15191d;box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.shelf-frame img{width:100%;height:100%;object-fit:cover;display:block}
.shelf-fallback{display:flex;align-items:flex-end;height:100%;padding:14px;font:600 1.1rem/1.2 Georgia,serif;background:radial-gradient(circle at 30% 20%,#2b3a1a,#0c0f12)}
.shelf-path{position:absolute;left:10px;top:10px;padding:3px 7px;background:rgba(9,11,14,.82);color:var(--ao-lime);font:700 .62rem/1.2 Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;border-radius:3px}
.shelf-poster.path-warning .shelf-path{color:#ff9b73}
.shelf-poster:hover .shelf-frame,.shelf-poster:focus-visible .shelf-frame{transform:translateY(-8px) scale(1.03);box-shadow:0 26px 50px rgba(0,0,0,.6),0 0 0 2px var(--ao-lime),0 0 30px rgba(216,255,98,.25)}
.shelf-title{display:block;margin-top:12px;font:600 1rem/1.25 Georgia,serif}
.shelf-meta{display:block;margin-top:3px;color:#98a0a0;font-size:.8rem}
@media (max-width:600px){.shelf-poster{width:142px}.shelf-track{gap:14px}}

/* Club: now showing + next night */
.now-showing{padding:40px max(4vw,24px)}
.now-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:stretch}
.now-grid .featured-night-invite{margin:0}
.next-night{padding:24px;border:1px dashed #56613a;background:repeating-linear-gradient(135deg,rgba(216,255,98,.04) 0 12px,transparent 12px 24px),#0e1215;position:relative;overflow:hidden}
.next-night h3{font-size:1.5rem;margin:.3rem 0 .5rem}.next-night p{color:#c1c5c3}
.next-night::before{content:"?";position:absolute;right:-10px;top:-30px;font:900 11rem/1 Georgia,serif;color:rgba(216,255,98,.07);animation:q 6s ease-in-out infinite}
@keyframes q{50%{transform:rotate(8deg) translateY(8px)}}
@media (max-width:900px){.now-grid{grid-template-columns:1fr}}

/* House tally */
.house-tally{display:block;margin-top:4px;color:var(--ao-lime);font:700 .7rem/1.2 Arial,sans-serif;letter-spacing:.06em}
.house-tally[hidden]{display:none}

/* Scroll reveal (only when JS turned motion on) */
html.motion [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
html.motion [data-reveal].is-in{opacity:1;transform:none}

/* Cards: tilt, glare, lift */
.film-card,.featured-night-invite,.next-night{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;transform-style:preserve-3d}
.film-card.tilting,.featured-night-invite.tilting,.next-night.tilting{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-4px);box-shadow:0 24px 50px rgba(0,0,0,.45)}
.film-card{position:relative}
.film-card.tilting::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(216,255,98,.12),transparent 45%)}
.catalog-art.cover-art img,.film-detail-art.cover-art img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.film-card:hover .catalog-art.cover-art img{transform:scale(1.05)}
.journey-cover{object-fit:cover;object-position:center 20%}

/* Buttons: shimmer on primary */
.button.primary{position:relative;overflow:hidden}
.button.primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s}
.button.primary:hover::after,.button.primary:focus-visible::after{left:120%}

/* Seals pop when earned; dialogs zoom in */
.seal.earned .seal-ring{animation:seal-pop .7s cubic-bezier(.2,1.6,.4,1) both,seal-glow 3s 1s ease-in-out infinite}
@keyframes seal-pop{from{transform:scale(.4) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
@keyframes seal-glow{50%{box-shadow:0 0 0 4px rgba(216,255,98,.12),0 0 24px rgba(216,255,98,.35)}}
dialog[open]{animation:dlg-in .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes dlg-in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.watch-count::before{animation:pulse-dot 2.4s ease-in-out infinite}
@keyframes pulse-dot{50%{box-shadow:0 0 0 6px rgba(216,255,98,0)}}

@media (prefers-reduced-motion: reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .hero-poster{opacity:.95}
 .shelf-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
 html.motion [data-reveal]{opacity:1;transform:none}
}
@media (min-width:901px){.hero-v2 .hero-copy{width:min(60%,780px);position:relative;z-index:1}}
.night-q{font-family:Georgia,serif;font-style:italic;color:#e7e9dc}
.next-film{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start;margin:.6rem 0 1rem}
.next-cover{padding:0;border:0;background:none;cursor:pointer;border-radius:6px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 0 1px rgba(216,255,98,.3)}
.next-cover img{display:block;width:100%;height:auto}
.next-night.revealed{border-style:solid;border-color:#4d5a2c}
.featured-night-invite .discussion-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-start}

/* Movie night pages (/night/NN/) */
.night-page{max-width:1080px;margin:0 auto;padding:36px max(4vw,20px) 60px}
.night-page h1{font-family:var(--display,Anton,Impact,sans-serif);font-weight:400;text-transform:uppercase;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;margin:.4rem 0 .8rem}
.night-lede{font-size:1.15rem;color:#d7dad5;max-width:640px}
.night-hero{display:grid;grid-template-columns:minmax(160px,300px) 1fr;gap:clamp(20px,4vw,48px);align-items:start;margin:22px 0 10px}
.night-hero-cover{border-radius:10px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(216,255,98,.3);animation:ht-fade .8s both}
.night-hero-cover img{display:block;width:100%;height:auto}
.night-meta{color:#9ea5a4;font-size:.9rem;margin:.2rem 0 1.2rem}
.night-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:.4rem 0}
.night-actions.small{gap:20px;margin-top:14px}
.night-block{margin-top:34px;padding:26px;border:1px solid #262c31;background:#0e1215}
.night-block h2{margin:.2rem 0 .7rem}
.night-qlist{margin:0;padding-left:1.3rem;display:grid;gap:12px;font:1.2rem/1.4 Georgia,serif;color:#eef0e6}
.night-qlist li::marker{color:var(--ao-lime);font-family:ui-monospace,monospace}
.night-done{display:flex;flex-wrap:wrap;align-items:center;gap:14px}.night-done h2,.night-done .eyebrow{width:100%;margin:0}
.night-secret{text-align:left;min-height:50vh}
@media (max-width:700px){.night-hero{grid-template-columns:1fr}.night-hero-cover{max-width:240px}}