.cinema-page { background:#090b10; color:#fff; }
.cinema { --cinema-accent:#a4edc6; position:relative; isolation:isolate; min-height:100svh; display:flex; flex-direction:column; overflow:hidden; background:#090b10; }
.cinema-media,.cinema-shade { position:absolute; inset:0; z-index:-2; }
.cinema-media { background:#090b10 url('/assets/city-poster.jpg') center/cover; }
.cinema-media video { width:100%; height:100%; object-fit:cover; opacity:.83; }
.cinema-shade { z-index:-1; background:linear-gradient(90deg,rgba(5,8,14,.84),rgba(5,8,14,.38) 65%,rgba(5,8,14,.2)),linear-gradient(0deg,#090b10 0%,transparent 37%,rgba(9,11,16,.28)); }
.cinema-top { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.5rem 5vw; }
.cinema-logo { display:block; width:clamp(125px,12vw,190px); height:auto; }
.cinema-top-actions { display:flex; align-items:center; gap:2rem; font-size:.875rem; }
.cinema a { color:inherit; text-decoration:none; }
.cinema-skip { padding:.75rem 0; border-bottom:1px solid #ffffff60; }
.cinema-skip span { margin-left:1rem; }
.cinema-sequence { flex:1; display:grid; padding:clamp(2rem,6vh,5.5rem) 8vw 3rem; align-items:center; }
.cinema-chapter { max-width:1260px; }
.cinema-chapter[hidden] { display:none; }
.cinema-kicker { text-transform:uppercase; letter-spacing:.15em; font-size:.875rem; font-weight:600; margin:0 0 2rem; color:#d9e3e7; }
.cinema-chapter h1,.cinema-chapter h2 { color:#fff; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; font-weight:750; font-size:clamp(3rem,7.8vw,8.6rem); letter-spacing:-.065em; line-height:.98; margin:0 0 2rem; max-width:none; }
.cinema-chapter em { font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:400; color:var(--cinema-accent); letter-spacing:-.06em; }
.cinema-body { max-width:620px; font-size:clamp(1rem,1.3vw,1.25rem); line-height:1.65; color:#e1e6ea; margin:0; }
.cinema-invitation { margin-top:1.75rem; }
.cinema-invitation-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem 1.75rem; }
.cinema-request { padding:.75rem 0; border-bottom:1px solid #ffffff60; font-size:.875rem; }
.cinema-room { display:inline-flex; gap:3rem; align-items:center; padding:1.05rem 1.3rem; background:var(--cinema-accent); color:#0b2017!important; font-size:1rem; font-weight:650; border-radius:2px; }
.cinema-room:hover { background:#c7ffdf; }
.cinema-invitation p { font-size:.875rem; color:#c8d3d8; margin-top:.8rem; max-width:540px; }
.cinema-bottom { padding:0 5vw 1.5rem; }
.cinema-chapters { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.cinema-chapters button { appearance:none; position:relative; color:#b9c5cd; background:none; border:0; padding:1.2rem 0; text-align:left; display:flex; gap:.9rem; cursor:pointer; font:inherit; font-size:.875rem; min-height:48px; }
.chapter-track { position:absolute; left:0; top:0; right:0; height:2px; background:#ffffff35; overflow:hidden; }
.chapter-track::after { content:''; display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left; background:var(--cinema-accent); }
.cinema-chapters button[aria-pressed=true] { color:#fff; }
.cinema-chapters button[aria-pressed=true] .chapter-track::after { transform:scaleX(1); }
.cinema.is-playing .cinema-chapters button[aria-pressed=true] .chapter-track::after { animation:cinema-progress 7s linear both; }
.chapter-number { color:var(--cinema-accent); }
.cinema-utilities { border-top:1px solid #ffffff25; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:.9rem; font-size:.875rem; color:#bdc7cf; flex-wrap:wrap; }
.cinema-playback { display:flex; align-items:center; gap:.7rem; min-height:44px; }
.cinema-playback button { appearance:none; border:1px solid #ffffff50; background:transparent; color:white; padding:.65rem .9rem; border-radius:2px; font:inherit; font-size:.875rem; cursor:pointer; min-height:44px; }
.cinema-playback button:hover { border-color:var(--cinema-accent); }
.cinema-status { font-size:.75rem; }
.cinema a:focus-visible,.cinema button:focus-visible { outline:2px solid var(--cinema-accent); outline-offset:6px; }
.cinema.is-playing .cinema-chapter:not([hidden]) { animation:cinema-enter 850ms ease-out both; }
.cinema-nojs { padding:2rem 8vw; max-width:800px; }
@keyframes cinema-enter { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes cinema-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media(max-width:760px) {
  .cinema-top { padding:1rem 6vw; gap:1rem; }
  .cinema-top-actions { gap:1rem; }
  .cinema-top .share-trigger span { display:none; }
  .cinema-skip { font-size:.875rem; }
  .cinema-skip span { margin-left:.3rem; }
  .cinema-sequence { padding:3.3rem 7vw; min-height:490px; }
  .cinema-chapter h1,.cinema-chapter h2 { font-size:clamp(2.9rem,10.5vw,5rem); line-height:1.04; }
  .cinema-kicker { font-size:.75rem; margin-bottom:1.5rem; }
  .cinema-body { font-size:1rem; }
  .cinema-bottom { padding:0 6vw 1.2rem; }
  .cinema-chapters { gap:.7rem; }
  .cinema-chapters button { font-size:.75rem; display:block; line-height:1.5; padding-top:.8rem; }
  .chapter-number { display:block; margin-bottom:.15rem; }
  .cinema-utilities { gap:.6rem 1.4rem; }
  .cinema-playback { width:100%; }
  .cinema-credit { font-size:.75rem; }
  .cinema-shade { background:linear-gradient(90deg,#05080ecc,#05080e70),linear-gradient(0deg,#090b10 0%,transparent 50%); }
}
@media(prefers-reduced-motion:reduce) { .cinema * { animation:none!important; transition:none!important; } }