/* Shared host chrome for the homepage and /demo. Scene styles live in the player. */
/* Product demo — lightweight chapters and poster; the player waits for activation. */
.film-chapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; width: 100%; margin: 0 auto 18px; }
.film-chapters[hidden] { display: none; }
.film-chapters button { position: relative; min-width: 0; min-height: 62px; padding: 14px 4px; border: 0; border-bottom: 1px solid #4b435d; background: transparent; color: #b9b5c8; font: inherit; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.3; text-align: center; white-space: normal; cursor: pointer; }
.film-chapters button[aria-selected="true"] { color: #f3edff; border-bottom: 2px solid transparent; }
.film-chapters button[aria-selected="true"]::after { content: ""; position: absolute; inset: auto 0 -2px; height: 2px; background: var(--grad); }
.film-chapters button:hover { color: #fff; }
.film-chapters button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
@media (max-width: 639px) {
  .film-chapters { gap: 0 10px; width: min(100%, 50vh); }
  .film-chapters button { min-height: 84px; padding: 12px 2px; font-size: 15px; }
}
.film-frame {
  position: relative; aspect-ratio: 16 / 9;
  border: 1px solid rgba(150,120,235,0.22); border-radius: 18px;
  overflow: hidden; background: #05040b;
  box-shadow: 0 30px 90px rgba(0,0,0,0.55), 0 0 120px rgba(124,77,216,0.10);
}
.film-frame[data-demo-ready] { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.film-player { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 639px) { .film-frame { aspect-ratio: 3 / 4; } }
.film-note { margin: 1rem 0 0; font-size: 0.9rem; color: var(--ink-3); }
.film-note a { color: var(--cyan); }
/* Full column width, like every other block on the page.
   This used to be sized by HEIGHT — the lesser of the column and what the
   viewport could show — so heading, film and note landed inside one screen
   on a 13-inch laptop. The cost was a film narrower than the section above
   it at almost every desktop size (about 1060px against the column's
   1140px), which reads as a misaligned page rather than as a considered
   fit. Matching the column wins: the film is what people came to watch, and
   a page that scrolls is ordinary where a ragged edge is not. Short and
   landscape viewports keep their own rules below. */
.film-frame { width: 100%; margin-inline: auto; }
.film-poster { position: absolute; inset: 0; display: block; }
.film-poster[hidden], .film-launch[hidden] { display: none; }
.film-launch { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: transparent; color: var(--ink); cursor: pointer; font: inherit; }
.film-launch:focus-visible { outline: 3px solid var(--cyan); outline-offset: -6px; border-radius: 16px; }
.film-launch-label { position: absolute; top: calc(50% + 58px); left: 50%; transform: translateX(-50%); padding: 0.55rem 1rem; border-radius: 999px; background: #100c1d; color: #EDEAF6; font-size: 1rem; font-weight: 600; white-space: nowrap; }
.film-status { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; margin: 0; padding: 0.75rem 1rem; border-radius: 8px; background: #100c1d; color: #EDEAF6; font-size: 0.9rem; }
.film-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-launch .film-play {
  position: absolute; inset: 0; margin: auto; width: 84px; height: 84px;
  border-radius: 50%; background: linear-gradient(#080610eb, #080610eb) padding-box, var(--grad) border-box;
  border: 1px solid transparent; backdrop-filter: blur(8px);
}
.film-launch .film-play::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; margin-left: 34px;
  border-left: 24px solid rgba(237,234,246,0.95);
  border-top: 15px solid transparent; border-bottom: 15px solid transparent;
}
.film-launch:hover .film-play { background: linear-gradient(#181228eb, #181228eb) padding-box, var(--grad) border-box; }


/* Phones keep the portrait poster compact; the loaded player reports its
   full height, including controls, without changing the section spacing. */
@media (max-width: 639px) {
  .film-frame { aspect-ratio: 3 / 4; width: min(100%, 50vh); margin-inline: auto; }
}