/* ---------- A24-style cold open ---------- */
.op{display:none}
html.intro,html.intro body{overflow:hidden;height:100%}
html.intro .op{display:block;position:fixed;inset:0;z-index:100;background:#0c0a08;color:#efe6d6;
  transition:opacity .9s ease, background-color .9s ease}
.op.out{opacity:0;pointer-events:none}

/* letterboxed frame, 2.39:1 on landscape screens */
.op .frame{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);width:100%;aspect-ratio:2.39/1;max-height:100%;overflow:hidden}
@media (min-aspect-ratio:239/100){.op .frame{top:0;transform:none;height:100%;aspect-ratio:auto}}
@media (orientation:portrait){.op .frame{top:7vh;bottom:7vh;transform:none;height:auto;aspect-ratio:auto}}
.op video{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);object-fit:cover;opacity:0;transition:opacity .25s;
  animation:weave .5s steps(1,end) infinite}
.op.playing video{opacity:1}
@keyframes weave{0%{transform:translate(0,0)}25%{transform:translate(.6px,-.5px)}50%{transform:translate(-.4px,.6px)}75%{transform:translate(.3px,.2px)}}

/* grain + gentle flicker */
.op .grain{position:absolute;inset:-60%;pointer-events:none;opacity:.17;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(5) infinite}
.op .flick{position:absolute;inset:0;pointer-events:none;background:#000;opacity:0;animation:flick 2.3s steps(1,end) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(4%,4%)}}
@keyframes flick{0%{opacity:0}31%{opacity:.05}34%{opacity:0}71%{opacity:.035}73%{opacity:0}}

/* titles — small, centred, unhurried */
.op .card{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;opacity:0;transition:opacity 1s ease;pointer-events:none;padding:0 24px;
  text-shadow:0 1px 18px rgba(0,0,0,.35)}
.op .card.on{opacity:1}
.op .card .sm{font-family:"Jost",system-ui,sans-serif;font-size:11px;letter-spacing:.42em;text-transform:uppercase;padding-left:.42em}
.op .card .ttl{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:clamp(30px,4.4vw,64px);letter-spacing:.01em;line-height:1.1}
.op .card .ttl + .sm{margin-top:16px;opacity:.85}

.op .skip{position:absolute;right:22px;bottom:18px;z-index:2;background:none;border:0;color:rgba(239,230,214,.72);cursor:pointer;
  font-family:"Jost",system-ui,sans-serif;font-size:10px;letter-spacing:.3em;text-transform:uppercase;padding:8px 0}
.op .skip:hover{color:#fff}
.op .slate{position:absolute;left:22px;bottom:18px;z-index:2;color:rgba(239,230,214,.5);font-family:"Jost",system-ui,sans-serif;font-size:10px;letter-spacing:.3em;text-transform:uppercase;padding:8px 0}

/* the page arriving after the film */
html.arrive .hero h1,html.arrive .hero .sub,html.arrive .hero .status,html.arrive .hero .tidy,html.arrive nav{animation:arrive 1.2s cubic-bezier(.2,.7,.1,1) both}
html.arrive .hero .sub{animation-delay:.12s}html.arrive .hero .status{animation-delay:.22s}html.arrive .hero .tidy{animation-delay:.3s}
html.arrive .table{animation:arrive 1.4s .15s cubic-bezier(.2,.7,.1,1) both}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
button.replay{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;border-bottom:1px solid rgba(43,30,21,.25)}
button.replay:hover{color:var(--olive)}

@media (prefers-reduced-motion:reduce){html.intro .op{display:none}html.intro,html.intro body{overflow:auto}}
.op video::-internal-media-controls-overlay-cast-button{display:none}
.op .card[data-card="title"]::before{content:"";position:absolute;left:50%;top:50%;width:min(780px,92vw);height:260px;transform:translate(-50%,-50%);z-index:-1;
  background:radial-gradient(closest-side,rgba(18,12,8,.42),rgba(18,12,8,0));pointer-events:none}
.op .card[data-card="title"] .sm{font-weight:500}