/* =========================================================
   PREMIERE: the main pages take on the newest film.
   Swap the images and --pr-accent when a new film is added.
   ========================================================= */
:root{--pr-accent:#ec5a8a;--pr-glow:rgba(236,90,138,.55);--pr-ink:#ffe9f0}

/* ---------- shared pieces ---------- */
.pr-shot{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.6s cubic-bezier(.4,0,.2,1);overflow:hidden}
.pr-shot.on{opacity:1}
.pr-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pr-shot.live img{will-change:transform}
.pr-grain{position:absolute;inset:-40%;pointer-events:none;opacity:.12;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(5) infinite}
.pr-petals,.pr-hearts,.pr-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pr-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 55%,rgba(255,120,175,.5),rgba(110,10,60,.35) 60%,rgba(0,0,0,.6))}
.pr-flash.go{animation:prFlash .9s ease-out}
@keyframes prFlash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.pr-flare{position:absolute;left:-20%;right:-20%;height:2px;top:46%;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,120,110,.0) 20%,rgba(255,190,180,.9) 50%,rgba(255,120,110,0) 80%,transparent);
  box-shadow:0 0 18px 4px rgba(255,70,60,.45);filter:blur(.6px)}
.pr-flare.go{animation:prFlare 1.6s ease-out}
@keyframes prFlare{0%{opacity:0;transform:translateX(-25%) scaleX(.6)}25%{opacity:.9}100%{opacity:0;transform:translateX(25%) scaleX(1.2)}}

/* opening: two black bars part to reveal the scene, once per visit */
.pr-open{position:absolute;inset:0;z-index:20;pointer-events:none}
.pr-open i{position:absolute;left:0;right:0;height:50.5%;background:#000;animation:prOpen 1.2s cubic-bezier(.77,0,.18,1) .1s forwards}
.pr-open i:first-child{top:0;transform-origin:top}
.pr-open i:last-child{bottom:0;transform-origin:bottom}
@keyframes prOpen{to{transform:scaleY(0)}}
.pr-open.seen{display:none}

/* =========================================================
   HOME: "The Opening Scene", a living trailer
   ========================================================= */
.home-hero.premiere{min-height:100vh;min-height:100svh;align-items:center;background:#050203}
.home-hero.premiere::before{z-index:-1;background:
  linear-gradient(90deg,rgba(5,1,3,.9) 0,rgba(5,1,3,.62) 30%,rgba(5,1,3,.08) 62%,rgba(5,1,3,.25)),
  linear-gradient(180deg,rgba(5,1,3,.55) 0,transparent 20%,transparent 72%,var(--bg) 100%),
  radial-gradient(ellipse 120% 90% at 60% 50%,transparent 45%,rgba(0,0,0,.6))}
.pr-reel{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#050203}
/* every shot has its own camera move */
.pr-shot.live.cam-push img{animation:camPush 9s linear forwards}
.pr-shot.live.cam-pan img{animation:camPan 9s linear forwards}
.pr-shot.live.cam-pull img{animation:camPull 9s linear forwards}
.pr-shot.live.cam-drift img{animation:camDrift 9s linear forwards}
@keyframes camPush{from{transform:scale(1.04)}to{transform:scale(1.2) translate(-2%,1%)}}
@keyframes camPan{from{transform:scale(1.18) translateX(4%)}to{transform:scale(1.18) translateX(-4%)}}
@keyframes camPull{from{transform:scale(1.25) translateY(3%)}to{transform:scale(1.06) translateY(0)}}
@keyframes camDrift{from{transform:scale(1.12) translate(-3%,2%) rotate(-.6deg)}to{transform:scale(1.2) translate(3%,-1%) rotate(.6deg)}}
.pr-shot img{object-position:var(--pos,50% 50%)}
@media (min-width:861px){
  .pr-shot.side{background:radial-gradient(ellipse 70% 90% at 75% 45%,#4a0a0c,#120204 60%,#050203)}
  .pr-shot.side img{left:auto;right:0;width:62%;-webkit-mask:linear-gradient(90deg,transparent,#000 35%);mask:linear-gradient(90deg,transparent,#000 35%)}
  .pr-shot.side.wide img{width:76%}
}
/* a glint of light travels along the blade */
.pr-shot.glint::after{content:"";position:absolute;inset:-30%;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:linear-gradient(115deg,transparent 42%,rgba(255,235,225,.0) 46%,rgba(255,225,215,.55) 50%,rgba(255,235,225,0) 54%,transparent 58%)}
.pr-shot.glint.live::after{animation:glint 3.4s cubic-bezier(.5,0,.3,1) 1.2s 2}
@keyframes glint{0%{opacity:0;transform:translateX(-35%)}20%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translateX(35%)}}
/* scene ticks */
.pr-ticks{position:absolute;right:clamp(16px,4vw,56px);bottom:clamp(26px,5vh,54px);display:flex;gap:8px;z-index:3}
.pr-ticks button{width:34px;height:14px;padding:5px 0;border:0;background:none;cursor:pointer}
.pr-ticks button i{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden}
.pr-ticks button i::after{content:"";display:block;height:100%;width:100%;background:var(--pr-accent);box-shadow:0 0 10px var(--pr-glow);transform:scaleX(0);transform-origin:left}
.pr-ticks button.done i::after{transform:scaleX(1)}
.pr-ticks button.now i::after{animation:tick var(--dur,7s) linear forwards}
@keyframes tick{to{transform:scaleX(1)}}
.pr-now{position:absolute;left:clamp(16px,4vw,56px);bottom:clamp(22px,5vh,50px);z-index:3;display:flex;align-items:center;gap:10px;
  font:700 10.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:rgba(255,233,228,.75)}
.pr-now::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pr-accent);box-shadow:0 0 0 0 var(--pr-glow);animation:rec 1.6s infinite}
@keyframes rec{0%{box-shadow:0 0 0 0 var(--pr-glow)}70%{box-shadow:0 0 0 10px rgba(236,90,138,0)}100%{box-shadow:0 0 0 0 rgba(236,90,138,0)}}
.home-hero.premiere h1 .gold-text{text-shadow:0 0 40px rgba(236,90,138,.35)}

@media (max-width:860px){
  .home-hero.premiere::before{background:
    linear-gradient(180deg,rgba(5,1,3,.55) 0,rgba(5,1,3,.05) 22%,rgba(5,1,3,.15) 38%,rgba(5,1,3,.78) 55%,rgba(5,1,3,.86) 80%,var(--bg) 100%)}
  .home-hero.premiere .hero-copy{margin-top:30vh}
  .pr-now{bottom:auto;top:calc(var(--nav-h) + 14px)}
  .pr-ticks{bottom:auto;right:auto;left:12px;top:calc(var(--nav-h) + 32px)}
  .pr-ticks button{width:24px}
  /* gentler camera on phones so faces are never cropped too tight */
  .pr-reel .pr-shot img{object-position:50% 0%!important;transform-origin:50% 20%}
  @keyframes camPush{from{transform:scale(1.02)}to{transform:scale(1.1)}}
  @keyframes camPan{from{transform:scale(1.08) translateX(2%)}to{transform:scale(1.08) translateX(-2%)}}
  @keyframes camPull{from{transform:scale(1.12)}to{transform:scale(1.02)}}
  @keyframes camDrift{from{transform:scale(1.04) translate(-1%,0)}to{transform:scale(1.1) translate(1%,-1%)}}
}

/* =========================================================
   FILM ACCESS: "Now Showing", a private screening room
   ========================================================= */
.access-hero.room{--scr-w:min(64vw,880px);--scr-h:calc(var(--scr-w) / 2.39);min-height:100vh;min-height:100svh;align-items:flex-start;padding:calc(var(--nav-h) + 4vh + 54px + var(--scr-h) + 34px) 0 120px;background:#060203}
.access-hero.room::before{display:none}
.pr-room{position:absolute;inset:0;z-index:-1;overflow:hidden;perspective:1200px;
  background:radial-gradient(ellipse 90% 60% at 50% 18%,#2a0508 0,#140205 45%,#060203 80%)}
/* curtains at the sides, lit from the screen */
.pr-room::before,.pr-room::after{content:"";position:absolute;top:0;bottom:0;width:15%;z-index:1;
  background:repeating-linear-gradient(90deg,#1b0306 0,#3a060c 3.2%,#5c0b13 5%,#2a0408 7.4%,#14020400 8%),linear-gradient(90deg,#0d0103,#2c040a);
  filter:brightness(.75) saturate(1.1);box-shadow:inset 0 -120px 120px -40px #000}
.pr-room::before{left:0;mask:linear-gradient(90deg,#000 55%,transparent);-webkit-mask:linear-gradient(90deg,#000 55%,transparent)}
.pr-room::after{right:0;mask:linear-gradient(270deg,#000 55%,transparent);-webkit-mask:linear-gradient(270deg,#000 55%,transparent)}
.pr-ambient{position:absolute;inset:-10%;z-index:0}
.pr-ambient img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(30px) saturate(1.4);transform:scale(1.1);transition:opacity 1.6s}
.pr-ambient img.on{opacity:.38}
.pr-stage{perspective:1400px;position:absolute;left:50%;top:calc(var(--nav-h) + 4vh);width:var(--scr-w);transform:translateX(-50%);z-index:2}
.pr-marquee{display:flex;justify-content:center;margin:0 auto 14px}
.pr-marquee span{position:relative;padding:8px 22px;border-radius:4px;font:800 11px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:#ffe3c2;
  background:#1a0306;border:1px solid rgba(226,184,102,.45);text-shadow:0 0 12px rgba(255,190,120,.7)}
.pr-marquee span::before{content:"";position:absolute;inset:-5px;border-radius:7px;pointer-events:none;
  background:radial-gradient(circle,#ffd98f 0 1.6px,transparent 2.4px) 0 0/12px 12px;
  -webkit-mask:linear-gradient(#000,#000) content-box exclude,linear-gradient(#000,#000);mask:linear-gradient(#000,#000) content-box exclude,linear-gradient(#000,#000);
  padding:3px;animation:bulbs 1s steps(2) infinite;filter:drop-shadow(0 0 3px #ffb84d)}
@keyframes bulbs{50%{background-position:6px 0}}
.pr-screen{position:relative;aspect-ratio:2.39/1;border-radius:6px/18px;overflow:hidden;background:#000;
  transform:rotateX(4deg);transform-origin:50% 100%;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 60px 6px var(--pr-glow),0 30px 120px -10px rgba(236,90,138,.45)}
.pr-screen .pr-shot img{object-position:var(--pos,50% 45%)}
.pr-screen .pr-shot.live img{animation:camScreen 8s linear forwards}
@keyframes camScreen{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.pr-screen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.45)),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.pr-screen .pr-flicker{position:absolute;inset:0;background:#fff;mix-blend-mode:overlay;opacity:0;animation:flick 5s infinite steps(1)}
@keyframes flick{0%,100%{opacity:0}47%{opacity:.06}48%{opacity:0}83%{opacity:.04}84%{opacity:0}}
.pr-reflect{height:90px;margin-top:6px;overflow:hidden;opacity:.28;transform:scaleY(-1);filter:blur(6px);
  -webkit-mask:linear-gradient(0deg,#000,transparent 80%);mask:linear-gradient(0deg,#000,transparent 80%)}
.pr-reflect img{width:100%;height:100%;object-fit:cover;transition:opacity 1.6s}
.pr-beam{position:absolute;left:50%;top:-30%;width:200%;height:110%;transform:translateX(-50%);z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(255,220,200,0),rgba(255,210,190,.09) 35%,rgba(255,170,150,0) 56%);
  clip-path:polygon(49.4% 0,50.6% 0,76% 58%,24% 58%);animation:beam 4s ease-in-out infinite alternate}
@keyframes beam{from{opacity:.65}to{opacity:1}}
.pr-dust{z-index:1}
.pr-seats{position:absolute;left:-2%;right:-2%;bottom:0;height:17%;z-index:3;pointer-events:none}
.pr-seats svg{width:100%;height:100%;display:block}
.access-hero.room .shell{position:relative;z-index:4}
.access-hero.room h1 .gold-text{text-shadow:0 0 40px rgba(236,90,138,.4)}
.access-hero.room + main .panel:first-of-type{margin-top:-70px}

@media (max-width:860px){
  .access-hero.room{--scr-w:92vw;--scr-h:calc(92vw / 1.6);padding-top:calc(var(--nav-h) + 3vh + 54px + var(--scr-h) + 26px);padding-bottom:110px}
  .pr-stage{top:calc(var(--nav-h) + 3vh)}
  .pr-screen{aspect-ratio:16/10;transform:none}
  .pr-reflect{height:60px}
  .pr-room::before,.pr-room::after{width:7%}
  .pr-seats{height:22%}
  .pr-beam{clip-path:polygon(49% 0,51% 0,98% 40%,2% 40%)}
}

/* =========================================================
   FILM LIBRARY: "The Archive", reels of every film,
   with the newest one running in full colour through the middle
   ========================================================= */
.page-hero.archive{overflow:hidden;min-height:min(82vh,760px);display:flex;align-items:center;padding:calc(var(--nav-h) + 40px) 0 90px;background:#060203}
.pr-archive{position:absolute;inset:0;z-index:-2;overflow:hidden}
.pr-strips{position:absolute;left:-30%;right:-30%;top:50%;transform:translateY(-50%) rotate(-9deg);display:flex;flex-direction:column;gap:3.2vh}
.pr-strip{position:relative;height:clamp(110px,19vh,190px);background:#0a0506;padding:18px 0;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.pr-strip::before,.pr-strip::after{content:"";position:absolute;left:0;right:0;height:9px;z-index:2;
  background:radial-gradient(ellipse 4px 3.4px at 50% 50%,#d7c7b0 92%,transparent 100%) 0 0/22px 9px repeat-x;opacity:.55}
.pr-strip::before{top:5px}.pr-strip::after{bottom:5px}
.pr-track{display:flex;gap:10px;height:100%;width:max-content;animation:roll var(--speed,70s) linear infinite}
.pr-strip.rev .pr-track{animation-direction:reverse}
.pr-track img{height:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px}
.pr-strip.past img{filter:grayscale(1) sepia(.45) brightness(.4) contrast(1.1)}
.pr-strip.lead{z-index:2;transform:scale(1.06);box-shadow:0 0 0 1px rgba(236,90,138,.35),0 0 70px rgba(236,90,138,.45),0 30px 80px rgba(0,0,0,.7)}
.pr-strip.lead img{filter:saturate(1.15) contrast(1.05)}
@keyframes roll{to{transform:translateX(-50%)}}
.pr-leak{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.0;
  background:radial-gradient(ellipse 40% 70% at 30% 50%,rgba(255,60,40,.55),transparent 70%);animation:leak 11s ease-in-out infinite}
@keyframes leak{0%,100%{opacity:0;transform:translateX(-30%)}35%{opacity:.7}60%{opacity:.25;transform:translateX(60%)}}
.page-hero.archive::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,rgba(6,2,3,.94) 0,rgba(6,2,3,.72) 38%,rgba(6,2,3,.2) 70%,rgba(6,2,3,.35)),
  linear-gradient(180deg,rgba(6,2,3,.55),transparent 25%,transparent 70%,var(--bg))}
.pr-reelnote{display:inline-flex;align-items:center;gap:10px;margin-top:6px;font:700 10.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:rgba(255,233,228,.7)}
.pr-reelnote::before{content:"";width:22px;height:2px;background:var(--pr-accent);box-shadow:0 0 10px var(--pr-glow)}
@media (max-width:860px){
  .page-hero.archive{min-height:calc(100svh - 30px);align-items:flex-end;padding-bottom:70px}
  .pr-strips{top:26%;transform:translateY(-50%) rotate(-12deg);gap:2.4vh}
  .pr-strip{height:clamp(84px,13vh,120px);padding:14px 0}
  .page-hero.archive::after{background:linear-gradient(180deg,rgba(6,2,3,.55) 0,rgba(6,2,3,.05) 18%,rgba(6,2,3,.1) 40%,rgba(6,2,3,.82) 56%,rgba(6,2,3,.94) 75%,var(--bg))}
}

/* Samsung Internet and other browsers that repaint gradient text: solid gold */
.gold-text{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:#e9b965!important;-webkit-text-fill-color:#e9b965!important}

@media (prefers-reduced-motion:reduce){
  .pr-shot img,.pr-track,.pr-leak,.pr-beam,.pr-grain,.pr-marquee span::before{animation:none!important}
  .pr-open{display:none}
}

/* =========================================================
   HOME, SOFT ZOOM: the classic full-bleed opening scene,
   with each shot framed and zoomed so no lead is cut off.
   Per shot: --w box width, --pos framing, --fade edge (laptop);
             --ph image height, --ppos framing (phone).
   ========================================================= */
.premiere.soft .pr-shot.live img{animation:softPush 9s linear forwards!important}
.premiere.soft .pr-shot.live.cam-pan img{animation:softPan 9s linear forwards!important}
.premiere.soft .pr-shot.live.cam-pull img{animation:softPull 9s linear forwards!important}
@keyframes softPush{from{transform:scale(1)}to{transform:scale(1.05)}}
@keyframes softPan{from{transform:scale(1.03) translateX(.8%)}to{transform:scale(1.03) translateX(-.8%)}}
@keyframes softPull{from{transform:scale(1.05)}to{transform:scale(1)}}
@media (min-width:861px){
  .premiere.soft .pr-shot{background:radial-gradient(ellipse 70% 90% at 75% 45%,#4a0a0c,#120204 60%,#050203)}
  .premiere.soft .pr-shot img{left:auto;right:0;width:var(--w,54%);object-position:var(--pos,50% 40%);
    -webkit-mask:linear-gradient(90deg,transparent,#000 var(--fade,20%));mask:linear-gradient(90deg,transparent,#000 var(--fade,20%))}
}
@media (max-width:860px){
  .premiere.soft .pr-reel .pr-shot img{height:var(--ph,100%);bottom:auto;object-position:var(--ppos,50% 0%)!important;transform-origin:50% 30%;
    -webkit-mask:linear-gradient(180deg,#000 72%,transparent);mask:linear-gradient(180deg,#000 72%,transparent)}
}

/* =========================================================
   FIT MODE: the whole frame is always visible.
   The sharp shot sits in its own box (sized to the shot's own shape)
   over a blurred, darkened copy of itself, so no one is ever cut off.
   Add class "fit" to the hero; give each .pr-shot style="--ar:<w/h>".
   ========================================================= */
.fit .pr-shot .fr{position:absolute;z-index:1;overflow:hidden;aspect-ratio:var(--ar,1.5);border-radius:10px;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 24px 80px -12px rgba(0,0,0,.75),0 0 70px -10px var(--pr-glow)}
.fit .pr-shot .fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:50% 50%}
.fit .pr-shot img.bg{transform:scale(1.12);filter:saturate(1.15)}
.fit .pr-shot.live .fr img{animation:frPush 9s linear forwards!important}
@keyframes frPush{from{transform:scale(1)}to{transform:scale(1.03)}}
/* soft light sweeping across the frame, once per shot */
.fit .pr-shot .fr::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,220,235,.22) 50%,transparent 60%)}
.fit .pr-shot.live .fr::after{animation:glint 3.6s cubic-bezier(.5,0,.3,1) 1s 1}

/* ---------- Home, laptop and desktop ---------- */
.home-hero.premiere.fit::before{background:
  linear-gradient(90deg,rgba(5,1,3,.86) 0,rgba(5,1,3,.6) 34%,rgba(5,1,3,.12) 52%,rgba(5,1,3,.1)),
  linear-gradient(180deg,rgba(5,1,3,.55) 0,transparent 20%,transparent 74%,var(--bg) 100%)}
.home-hero.premiere.fit .hero-copy{padding-left:0}
@media (min-width:861px){.home-hero.premiere.fit .hero-copy{max-width:min(580px,44vw)}}
@media (min-width:861px){
  .fit .pr-reel .fr{right:max(24px,3vw);top:calc(50% + var(--nav-h) / 2 - 10px);transform:translateY(-50%);
    width:min(45vw,900px,calc((100vh - var(--nav-h) - 200px) * var(--ar,1.5)))}
}
/* ---------- Home, phone ---------- */
@media (max-width:860px){
  .home-hero.premiere.fit{--slot:calc(100vw / 1.5);align-items:flex-start;padding-top:calc(var(--nav-h) + 50px + var(--slot) + 6px)}
  .home-hero.premiere.fit .hero-copy{margin-top:0}
  .fit .pr-reel .fr{left:12px;right:12px;width:auto;border-radius:12px;
    top:calc(var(--nav-h) + 50px + (var(--slot) - (100vw - 24px) / var(--ar,1.5)) / 2)}
  .home-hero.premiere.fit::before{background:
    linear-gradient(180deg,rgba(5,1,3,.5) 0,rgba(5,1,3,.12) 12%,rgba(5,1,3,.12) 42%,rgba(5,1,3,.72) 54%,rgba(5,1,3,.86) 80%,var(--bg) 100%)}
  /* the camera moves only the blurred backdrop, never the shot */
  .fit .pr-reel .pr-shot img.bg{object-position:50% 30%!important}
}

/* ---------- Film Access: a 16:9 screen for this film ---------- */
.access-hero.room.fit{--scr-w:min(52vw,740px);--scr-h:calc(var(--scr-w) * 9 / 16)}
.fit .pr-screen{aspect-ratio:16/9}
.fit .pr-screen .fr{inset:0;aspect-ratio:auto;border-radius:0;box-shadow:none}
.fit .pr-screen .fr img{object-fit:contain}
@media (max-width:860px){
  .access-hero.room.fit{--scr-w:92vw;--scr-h:calc(92vw * 9 / 16)}
  .fit .pr-screen{aspect-ratio:16/9}
}