/* theater: a showroom you sit in. The screen's light colours the room (--glow, per film). */
.theaterpage body{background:#030304;overflow:hidden;height:100svh}
.room{position:fixed;inset:0;overflow:hidden;--glow:#8f86ff;--dim:1;transition:--dim .8s ease}
.room::before{content:"";position:absolute;inset:-10%;background:radial-gradient(60% 45% at 50% 38%,color-mix(in srgb,var(--glow) 22%,transparent),transparent 70%);
  opacity:calc(.55 + .45 * var(--dim));transition:background .9s ease,opacity .8s ease;pointer-events:none}
/* curtains: velvet folds that open on arrival and frame the screen */
.curtain{position:absolute;top:0;bottom:0;width:52vw;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(90deg,#1a0508 0 2.2vw,#2b0a0f 3.4vw,#14040a 5vw),linear-gradient(#000 0,transparent 30%,#000 100%);
  background-blend-mode:multiply;box-shadow:inset 0 -40px 80px #000;transition:transform 1.6s cubic-bezier(.7,0,.2,1)}
.curtain.l{left:0;transform:translateX(0)}.curtain.r{right:0;transform:translateX(0)}
html.open .curtain.l{transform:translateX(-86%)}html.open .curtain.r{transform:translateX(86%)}
.valance{position:absolute;left:0;right:0;top:0;height:7vh;z-index:5;background:repeating-linear-gradient(90deg,#1d0609 0 1.4vw,#2e0b10 2.2vw,#16050a 3vw);
  box-shadow:0 10px 30px #000;border-bottom:1px solid #3a1015}
/* the projector beam, from behind the audience to the screen */
.beam{position:absolute;left:50%;bottom:-10vh;width:140vw;height:120vh;transform:translateX(-50%);z-index:1;pointer-events:none;
  background:conic-gradient(from 180deg at 50% 100%,transparent 168deg,color-mix(in srgb,var(--glow) 18%,transparent) 176deg,color-mix(in srgb,#fff 10%,transparent) 180deg,color-mix(in srgb,var(--glow) 18%,transparent) 184deg,transparent 192deg);
  opacity:calc(.25 + .5 * (1 - var(--dim)));filter:blur(8px);mix-blend-mode:screen;transition:opacity .8s ease}
/* the screen */
.screen-wrap{position:absolute;left:50%;top:12vh;width:min(62vw,98vh);aspect-ratio:16/9;transform:translateX(-50%) perspective(1600px) rotateX(3deg);z-index:2;transition:top .6s var(--ease),width .6s var(--ease)}
.the-screen{position:absolute;inset:0;background:#000;border-radius:6px;overflow:hidden;
  box-shadow:0 0 0 1px rgb(255 255 255/.05),0 0 140px -10px color-mix(in srgb,var(--glow) 70%,transparent),0 40px 120px #000;transition:box-shadow .9s ease}
.the-screen video,.the-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.the-screen img{object-fit:cover;filter:brightness(.55) saturate(1.1);transition:opacity .5s ease}
.the-screen.playing img{opacity:0}
.screen-glare{position:absolute;inset:0;background:linear-gradient(170deg,rgb(255 255 255/.05),transparent 40%);pointer-events:none}
.floor{position:absolute;left:50%;top:calc(12vh + min(62vw,98vh) * .5625 + 10px);width:min(90vw,150vh);height:30vh;transform:translateX(-50%);z-index:1;pointer-events:none;
  background:radial-gradient(50% 40% at 50% 0%,color-mix(in srgb,var(--glow) 30%,transparent),transparent 70%);filter:blur(20px);transition:background .9s ease}
/* marquee */
.marquee{position:absolute;left:50%;top:calc(7vh + 10px);transform:translateX(-50%);z-index:6;text-align:center;white-space:nowrap;transition:opacity .6s ease}
.marquee small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:color-mix(in srgb,var(--glow) 60%,#fff)}
.marquee b{display:block;font-size:clamp(14px,1.3vw,18px);font-weight:600;letter-spacing:-.01em;margin-top:2px}
/* seats: rows of seat backs in silhouette */
.seats{position:absolute;left:0;right:0;bottom:0;height:24vh;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 2.1vw 3.2vh at 50% 100%,#050506 98%,transparent 100%) 0 100%/4.6vw 7vh repeat-x,
    radial-gradient(ellipse 2.4vw 3.6vh at 50% 100%,#08080a 98%,transparent 100%) 2.3vw calc(100% - 8vh)/5.2vw 7.6vh repeat-x,
    radial-gradient(ellipse 2.7vw 4vh at 50% 100%,#0b0b0e 98%,transparent 100%) 0 calc(100% - 17vh)/5.9vw 8.4vh repeat-x;
  -webkit-mask:linear-gradient(transparent,#000 40%);mask:linear-gradient(transparent,#000 40%)}
.seats::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgb(3 3 4/.8));}
/* programme drawer */
.programme{position:absolute;left:0;right:0;bottom:0;z-index:8;padding:18px var(--g) 22px;
  background:linear-gradient(transparent,rgb(3 3 4/.92) 30%);transition:transform .5s var(--ease),opacity .5s ease}
html.watching .programme{transform:translateY(calc(100% - 46px));opacity:.0}
html.watching.ui .programme{opacity:1}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs button{height:34px;padding:0 14px;border-radius:999px;font-size:13px;color:var(--muted);background:rgb(255 255 255/.05);box-shadow:inset 0 0 0 1px rgb(255 255 255/.1);transition:color .2s ease,background-color .2s ease}
.tabs button.on{color:#000;background:var(--ink)}
.tabs button span{font-family:var(--mono);font-size:10px;margin-left:6px;opacity:.6}
.row-films{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 10px;scrollbar-width:none}
.row-films::-webkit-scrollbar{display:none}
.card{flex:0 0 auto;width:220px;scroll-snap-align:start;text-align:left;transition:transform .3s var(--ease)}
.card .pi{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#111;box-shadow:0 10px 30px rgb(0 0 0/.5)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),filter .3s ease;filter:brightness(.85)}
.card .tag{position:absolute;right:8px;bottom:8px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;padding:3px 7px;border-radius:6px;background:rgb(0 0 0/.6)}
.card .vt{position:absolute;left:8px;top:8px;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;padding:3px 6px;border-radius:6px;background:rgb(0 0 0/.55);color:var(--muted)}
.card b{display:block;margin-top:8px;font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card small{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.card.now .pi{box-shadow:0 0 0 2px var(--ink),0 10px 30px rgb(0 0 0/.5)}
@media (hover:hover) and (pointer:fine){ .card:hover{transform:translateY(-4px)} .card:hover img{transform:scale(1.05);filter:none} }
/* controls while watching */
.controls{position:absolute;left:50%;bottom:26px;z-index:9;transform:translate(-50%,10px);display:flex;align-items:center;gap:8px;padding:6px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s var(--ease)}
html.watching.ui .controls{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.controls button{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;padding:12px;color:var(--ink)}
.controls button:hover{background:rgb(255 255 255/.1)}
.controls .prog-btn{width:auto;padding:0 16px;font-size:13px;border-radius:999px}
.controls .bar{width:min(320px,30vw);height:3px;border-radius:3px;background:rgb(255 255 255/.15);overflow:hidden;cursor:pointer}
.controls .bar u{display:block;height:100%;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(var(--t,0));text-decoration:none}
html.watching .room{--dim:0}
html.watching .marquee{opacity:.0}html.watching.ui .marquee{opacity:1}
html.watching .valance{filter:brightness(.4)}html.watching .curtain{filter:brightness(.45)}
html.watching .top{opacity:0;transition:opacity .4s ease}html.watching.ui .top{opacity:1}
.top{transition:opacity .4s ease}
@media (max-width:820px){
  .theaterpage body{overflow:auto;height:auto}
  .room{position:relative;min-height:100svh}
  .curtain{width:30vw}html.open .curtain.l{transform:translateX(-80%)}html.open .curtain.r{transform:translateX(80%)}
  .screen-wrap{top:86px;width:94vw;transform:translateX(-50%)}
  .floor{top:calc(86px + 94vw * .5625);}
  .marquee{top:60px}
  .seats{display:none}
  .programme{position:relative;margin-top:calc(110px + 94vw * .5625);background:none;padding:0 14px 40px}
  .row-films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:12px}
  .card{width:auto;min-width:0}
  html.watching .programme{transform:none;opacity:1}
  .controls{position:fixed}
}
@media (prefers-reduced-motion:reduce){.curtain{transition:none}html .curtain.l{transform:translateX(-86%)}html .curtain.r{transform:translateX(86%)}}

/* programme row: arrows + wheel + drag (founder: "how do i scroll to the sides") */
.row-wrap{position:relative}
.row-arrow{position:absolute;top:calc(50% - 30px);z-index:2;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;padding:13px;color:var(--ink);
  background:rgb(10 10 14/.75);box-shadow:inset 0 0 0 1px rgb(255 255 255/.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .2s ease,transform .2s ease}
.row-arrow:hover{transform:scale(1.06)}.row-arrow.l{left:-8px}.row-arrow.r{right:-8px}
.row-arrow[disabled]{opacity:0;pointer-events:none}
.row-films.drag{cursor:grabbing;scroll-snap-type:none}
.row-films.drag .card{pointer-events:none}
@media (max-width:820px){.row-arrow{display:none}}
/* close: an X back to the home page, always reachable */
.th-x{position:fixed;z-index:30;top:calc(env(safe-area-inset-top,0px) + 74px);right:max(var(--g),env(safe-area-inset-right,0px));width:46px;height:46px;border-radius:50%;display:grid;place-items:center;padding:13px;color:var(--ink);
  background:rgb(10 10 14/.7);box-shadow:inset 0 0 0 1px rgb(255 255 255/.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .2s ease,background-color .2s ease}
.th-x:hover{transform:scale(1.06);background:rgb(30 30 38/.8)}
html.watching .th-x{opacity:0;transition:opacity .4s ease}html.watching.ui .th-x{opacity:1}
/* phone: the programme is one row you swipe sideways, like on the computer */
@media (max-width:820px){
  .th-x{top:calc(env(safe-area-inset-top,0px) + 64px);width:42px;height:42px;padding:12px}
  .row-films{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;gap:12px;padding:4px 14px 12px;margin:0 -14px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .card{flex:0 0 64vw;width:64vw;scroll-snap-align:center}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px 14px;padding:0 14px}.tabs::-webkit-scrollbar{display:none}.tabs button{flex:0 0 auto}
}