/* The start page's film plays by itself (assets/film/auto.js): a round X to close it, a pause button, and "Watch the film"
   on the landing. Added 2026-10-07 on Alex's feedback (scrolling through the film takes too long; serve it like a
   commercial that can be closed with an X). The film itself is the scroll film, untouched (film.css, film.js). */

@layer sections {
  .film-auto-ui[hidden] { display: none; }
  .film-x, .film-pp {
    position: fixed; z-index: 80; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
    background: color-mix(in srgb, var(--color-night) 55%, transparent); color: var(--color-snow); cursor: pointer;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-snow) 28%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: background-color var(--duration-hover) var(--ease-hover), box-shadow var(--duration-hover) var(--ease-hover), color var(--duration-hover) var(--ease-hover), transform var(--duration-press) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  .film-x { top: calc(env(safe-area-inset-top, 0px) + 18px); right: max(18px, env(safe-area-inset-right, 0px)); }
  .film-pp { bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); right: max(18px, env(safe-area-inset-right, 0px)); }
  .film-pp[hidden] { display: none; }
  .film-x svg, .film-pp svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .film-pp .i-play { display: none; }
  .film-pp[data-state="paused"] .i-play { display: block; }
  .film-pp[data-state="paused"] .i-pause { display: none; }
  .film-x:active, .film-pp:active { transform: scale(var(--motion-press-scale)); }
  .film-x:focus-visible, .film-pp:focus-visible { outline: var(--line-focus) solid var(--color-lime); outline-offset: 3px; }
  @media (hover: hover) and (pointer: fine) {
    .film-x:hover, .film-pp:hover { background: var(--color-snow); color: var(--color-night); box-shadow: none; }
  }

  /* phones and tablets: the film's own Sound button is at the top right (film.css), so it steps aside for the X */
  @media (max-width: 1023.98px) {
    html.film-auto .film-sound { right: calc(max(18px, env(safe-area-inset-right, 0px)) + 60px); top: calc(env(safe-area-inset-top, 0px) + 18px + 6px); }
  }

  /* "Watch the film": on the landing, for whoever closed it or arrives again */
  .film-replay {
    display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; margin-top: var(--space-2); padding: 0 18px 0 14px; border: 0; border-radius: var(--radius-pill);
    background: transparent; color: var(--color-snow-2); cursor: pointer; font: 500 1rem/1 var(--font-text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-snow) 22%, transparent);
    transition: color var(--duration-hover) var(--ease-hover), box-shadow var(--duration-hover) var(--ease-hover), transform var(--duration-press) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }
  .film-replay svg { width: 18px; height: 18px; fill: currentColor; }
  .film.is-acting .film-about .film-replay { pointer-events: auto; }   /* film.css lets only links through on the landing */
  .film-replay:active { transform: scale(var(--motion-press-scale)); }
  .film-replay:focus-visible { outline: var(--line-focus) solid var(--color-lime); outline-offset: 3px; }
  @media (hover: hover) and (pointer: fine) { .film-replay:hover { color: var(--color-snow); box-shadow: inset 0 0 0 1px var(--color-snow); } }
  /* the static page (reduced motion, Save-Data, a small window) has no film to play */
  .film:not(.is-live) .film-replay { display: none; }
}