/* Hero (v2): the launch film as it is, on the same table under the same lamp, beside the page's own title slip.
   The film carries its own text, so nothing of the page's sits over it. */
.act-film { position: relative; height: 100vh; min-height: 620px; overflow: hidden;
  background: linear-gradient(rgba(16,10,6,.35), rgba(16,10,6,.5)), url(../assets/table.webp) center 70% / cover var(--sc-canvas); }
.act-film::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 8% 0%, rgba(232,181,106,.22), transparent 60%); }
/* the floor fades into the room before the book's table arrives: no hard edge between the two */
.act-film::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; pointer-events: none;
  background: linear-gradient(rgba(26,18,12,0), var(--sc-canvas) 95%); }
/* v2g light pass: the title card keeps its tilt (book.css -1.2deg) and v1's higher place; the film tilts the same
   way, rising to the right (operator: never a downward slope). The rotated edges are antialiased. */
.act-film .slip--title { top: 13vh; z-index: 3; }

.film { position: absolute; z-index: 2; margin: 0; left: 37vw; top: 50%; width: min(52vw, 132vh); translate: 0 -54%;
  rotate: -.8deg; backface-visibility: hidden; outline: 1px solid transparent; background: #F6F0E2; padding: .7rem .7rem 0; box-shadow: -6px 18px 30px rgba(6,3,1,.6), 0 1px 2px rgba(6,3,1,.5); }
.film__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0e0a07; object-fit: cover; }
.film figcaption { display: flex; justify-content: flex-end; min-height: 2.6rem; align-items: center; }
.film__toggle { font: italic 1rem/1 var(--sc-font-text); color: var(--ink-soft); background: none; border: 0; padding: .7rem .4rem;
  min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.film__toggle:hover { color: var(--ink); text-decoration-thickness: 2px; }
.film__toggle:active { transform: translateY(1px); }
.film__toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* the book's own stage: its top edge fades in from the room while it scrolls up under the hero */
.feather--top { top: 0; bottom: auto; height: 18vh; opacity: var(--featherTopOp, 1);
  background: linear-gradient(var(--sc-canvas), rgba(26,18,12,0)); }


/* ---------- phone: LAST ---------- */
@media (max-width: 700px) {
  .act-film { height: auto; min-height: 0; padding: 3vh 13vw 14vh 4vw; box-sizing: border-box; display: flex; flex-direction: column; gap: 1.6rem; }
  .act-film .slip--title { position: relative; left: auto; right: auto; top: auto; width: auto; }
  .film { position: relative; left: auto; top: auto; translate: none; width: auto; rotate: -.6deg; padding: .45rem .45rem 0; }
  .film figcaption { min-height: 2.4rem; }
}

/* Scroll cue (v2e light pass): small, low-opacity, a slow bounce; gone once the reader scrolls; still under
   reduced motion. */
.scroll-cue { position: absolute; left: 50%; bottom: 3.2vh; z-index: 4; translate: -50% 0; display: grid; place-items: center;
  width: 44px; height: 44px; color: var(--paper); opacity: .5; border-radius: 50%;
  transition: opacity .5s ease, visibility .5s; animation: cue-bob 2.6s ease-in-out infinite; }
.scroll-cue:hover, .scroll-cue:focus-visible { opacity: .85; }
.scroll-cue:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.scroll-cue.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; transition: none; } }
@media (max-width: 700px) { .scroll-cue { bottom: 2.4vh; } }

/* v2f light pass: 701-1000 px - the hero title fits its card (it overhung 22 px at 701, 4 px at 768). */
@media (min-width: 701px) and (max-width: 1000px) {
  .act-film .slip--title { padding: 1.5rem 1.3rem 1.4rem; }
  .act-film .slip--title h1 { font-size: 4vw; }
}
/* v2f light pass: phone - the hero takes the whole first screen, so the book's title card (same title) never
   shares a screen with it. */
@media (max-width: 700px) {
  .act-film { min-height: 100vh; min-height: 100svh; }
}