/* Home films (review copy, 2026-10-09): the integration film in #film and the Doors Are Open film in #philosophy. */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.codex-film-frame video,.codex-doors-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--th-caviar,#2c2f32)}
.film-ctl{position:absolute;top:14px;inset-inline-end:14px;display:flex;gap:8px;z-index:2}
.film-btn{font:500 12px/1 "Rimini Sans","DM Mono",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#d7e8bc;background:rgba(44,47,50,.78);border:1px solid rgba(215,232,188,.35);border-radius:999px;padding:9px 14px;cursor:pointer;min-height:36px}
.film-btn:hover,.film-btn:focus-visible{border-color:#e9f056;color:#e9f056;outline:none}
.film-btn[aria-pressed="true"]{background:#e9f056;color:#2c2f32;border-color:#e9f056}
.codex-doors-film{position:relative;width:min(100%,1100px);aspect-ratio:16/9;margin:0 auto clamp(2rem,5vh,3.5rem);border-radius:4px;overflow:hidden;background:var(--th-caviar,#2c2f32)}
@media (max-width:560px){.codex-doors-film{width:100%}}

/* Doors Open ending (2026-10-09): after two plays the film holds on its last frame (the cards),
   the door sketch draws on over it and "Enter the practice" appears. Replaces the old closing lines. */
.film-end-dim,.film-end-sketch,.film-end-enter{position:absolute;opacity:0;pointer-events:none}
.film-end-dim{inset:0;background:rgba(20,22,24,.42);transition:opacity .8s ease}
.film-end-sketch{inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 55%);mask-image:linear-gradient(to bottom,#000 45%,transparent 55%);-webkit-mask-size:100% 220%;mask-size:100% 220%;-webkit-mask-position:0 100%;mask-position:0 100%}
.film-end-enter{left:50%;bottom:clamp(14px,6%,40px);transform:translate(-50%,10px);font:500 13px/1 "Rimini Sans","DM Mono",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#d7e8bc;background:rgba(44,47,50,.55);border:1px solid #d7e8bc;border-radius:999px;padding:14px 26px;cursor:pointer;backdrop-filter:blur(6px);transition:opacity .7s ease 1.7s,transform .7s ease 1.7s,background .25s,color .25s}
.film-end-enter:hover,.film-end-enter:focus-visible{background:#e9f056;color:#2c2f32;border-color:#e9f056;outline:none}
.is-done .film-end-dim{opacity:1}
.is-done .film-end-sketch{opacity:1;animation:film-sketch-draw 1.5s cubic-bezier(.45,0,.2,1) .35s both}
.is-done .film-end-enter{opacity:1;transform:translate(-50%,0);pointer-events:auto}
@keyframes film-sketch-draw{from{-webkit-mask-position:0 100%;mask-position:0 100%}to{-webkit-mask-position:0 0;mask-position:0 0}}
@media (prefers-reduced-motion:reduce){.is-done .film-end-sketch{animation:none;-webkit-mask-image:none;mask-image:none}.film-end-enter,.film-end-dim{transition:none}}
@media (max-width:560px){.film-end-enter{padding:10px 16px;font-size:11px}}

/* Chapter III circle (2026-10-09): the circle sits beside the text box instead of over it.
   Desktop: box on the left, circle to the right overlapping only the box's edge.
   Tablet and phone: circle drops below the box, centred, never covering text. */
#supernova .supernova-box{position:relative;z-index:1;max-width:min(58%,44rem)}
#supernova .supernova-window{right:clamp(1rem,4vw,4.5rem);top:auto;bottom:clamp(3rem,8.5vw,9rem);transform:none;width:clamp(300px,34vw,520px);height:clamp(300px,34vw,520px);border:6px solid var(--acid,#e9f056)}
@media (max-width:1100px){
  #supernova .supernova-box{max-width:100%}
  #supernova .supernova-window{position:relative;right:auto;bottom:auto;transform:none;margin:2rem auto 0;justify-self:center;align-self:center;grid-column:1 / -1;width:min(78vw,380px);height:min(78vw,380px);display:block}
}

/* Chapter III circle, sketch to rendering (2026-10-09): each slide starts as a wasabi pencil sketch on caviar
   that draws on top to bottom, then the finished rendering washes in through the lines. */
#supernova .supernova-window{background:#2c2f32}
#supernova .sw-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
#supernova .sw-slide.is-on{opacity:1}
#supernova .sw-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#supernova .sw-real{opacity:0;filter:saturate(.85);transition:opacity 1.6s ease,filter 1.6s ease}
#supernova .sw-slide img.sw-sketch{-webkit-mask-image:linear-gradient(to bottom,#000 45%,transparent 55%);mask-image:linear-gradient(to bottom,#000 45%,transparent 55%);-webkit-mask-size:100% 220%;mask-size:100% 220%;-webkit-mask-position:0 100%;mask-position:0 100%;transition:-webkit-mask-position 1.4s cubic-bezier(.45,0,.2,1),mask-position 1.4s cubic-bezier(.45,0,.2,1),opacity 1.6s ease}
#supernova .sw-slide.is-drawn .sw-sketch{-webkit-mask-position:0 0;mask-position:0 0}
#supernova .sw-slide.is-real .sw-real{opacity:1;filter:none}
#supernova .sw-slide.is-real img.sw-sketch{opacity:0}
@media (prefers-reduced-motion:reduce){#supernova .sw-slide img.sw-sketch{display:none}#supernova .sw-real{opacity:1;transition:none}}

/* Grid paper + hand sketch + shape morph (2026-10-09).
   Sketch phase: the yellow section becomes grid paper and the frame shows graphite lines on paper.
   Rendering phase: paper fades back to yellow as the finished rendering washes in.
   Frame shape changes per set: circle, square, tall rectangle (same footprint, so the page never shifts). */
#supernova{isolation:isolate}
#supernova::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.1s ease;
  background-color:#f3f1ea;
  background-image:linear-gradient(rgba(44,47,50,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(44,47,50,.14) 1px,transparent 1px),
                   linear-gradient(rgba(44,47,50,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(44,47,50,.06) 1px,transparent 1px);
  background-size:110px 110px,110px 110px,22px 22px,22px 22px}
#supernova.sn-sketch::before{opacity:1}
#supernova > span,#supernova > h2,#supernova > .supernova-box{z-index:1}
#supernova .supernova-window{z-index:2;border:0;border-radius:0;box-shadow:none;overflow:visible;background:transparent;
  clip-path:inset(0 round 50%);transition:clip-path 1.2s cubic-bezier(.65,0,.35,1)}
#supernova .supernova-window[data-shape="square"]{clip-path:inset(4% round 14px)}
#supernova .supernova-window[data-shape="tall"]{clip-path:inset(0 17% round 14px)}
#supernova .sw-slide{background:transparent} /* the section's own grid paper shows through, so the lines line up */
@media (prefers-reduced-motion:reduce){#supernova::before{display:none}#supernova .supernova-window{transition:none}}

/* Wide sketch (2026-10-09): during the paper phase the hand sketch spreads out wide, about 1.5x the frame's height
   in landscape, then shrinks into the frame as the rendering arrives. A wide-rectangle shape joins the cycle. */
#supernova{overflow:hidden}
#supernova .sw-slide img.sw-sketch{inset:auto;left:50%;top:50%;width:calc(150% * 16 / 9);height:150%;max-width:none;object-fit:contain;
  transform:translate(-50%,-50%) scale(1);transition:transform 1.2s cubic-bezier(.65,0,.35,1),-webkit-mask-position 1.4s cubic-bezier(.45,0,.2,1),mask-position 1.4s cubic-bezier(.45,0,.2,1),opacity 1.2s ease}
#supernova .sw-slide.is-real img.sw-sketch{transform:translate(-50%,-50%) scale(.6667)}
#supernova.sn-sketch .supernova-window[data-shape]{clip-path:inset(-60% -140% round 0);z-index:0}
#supernova .supernova-window[data-shape="wide"]{clip-path:inset(18% 0 round 14px)}
@media (max-width:1100px){#supernova .sw-slide img.sw-sketch{width:calc(125% * 16 / 9);height:125%}#supernova .sw-slide.is-real img.sw-sketch{transform:translate(-50%,-50%) scale(.8)}}