/* ==========================================================================
   ASTER — playback corrections (1.6.0, additive)

   Loaded after aster-design.css. Every selector here is either new or a
   deliberate correction; no existing rule is restyled.
   ========================================================================== */

/* --- 1. the video warm-up container ---------------------------------------
   aster-public.js creates .aster-video-preload-home and fills it with <video>
   elements so a film is already buffered when it is opened. Nothing in the
   project ever styled it, so it sat at the end of <body> as an ordinary block
   and every warmed film rendered at full width underneath the footer. It is
   pinned out of the flow here as well as inline in the script, so a stale
   stylesheet or a stale script cannot bring the problem back on its own. */

.aster-video-preload-home {
  position: fixed !important;
  left: -10000px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  max-width: 1px !important;
  max-height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.aster-video-preload-home > * {
  width: 1px !important;
  height: 1px !important;
  max-width: 1px !important;
  max-height: 1px !important;
}

/* --- 2. full-screen film playback -----------------------------------------
   Turning a phone to landscape used to leave the film in the same letterboxed
   window, just larger. These rules let the projector give the film the whole
   screen while keeping its own aspect ratio. */

.reel-fullscreen {
  position: absolute;
  top: clamp(14px, 2.4vw, 30px);
  right: calc(clamp(14px, 2.4vw, 30px) + 56px);
  z-index: 6;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line, #2a2e36);
  background: rgba(4, 5, 6, .6);
  color: var(--ivory, #f2ede2);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}

.reel-fullscreen:hover,
.reel-fullscreen:focus-visible {
  border-color: var(--gold, #c8aa6a);
  color: var(--gold, #c8aa6a);
}

.reel-fullscreen svg { width: 19px; height: 19px; display: block; }

/* Landscape fill: used on its own when the browser refuses a native
   full-screen request (rotating a device is not a user gesture), and it is
   what makes the rotate-to-fill behaviour reliable everywhere. */
.reel-modal.aster-fill-screen {
  padding: 0 !important;
  background: #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.reel-modal.aster-fill-screen .reel-frame {
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  background: #000 !important;
}

/* The film keeps its own shape inside that full-screen box. */
.reel-modal.aster-fill-screen .reel-frame > video,
.reel-modal.aster-fill-screen .reel-frame .aster-cms-media,
.reel-modal.aster-fill-screen .reel-frame .aster-media-shell,
.reel-modal.aster-fill-screen .reel-frame .aster-media-stage,
.reel-modal.aster-fill-screen .reel-frame > iframe {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  translate: none !important;
  transform: none !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  aspect-ratio: auto !important;
}

/* Chrome on the slate: the decorative frame furniture would overlap the film. */
.reel-modal.aster-fill-screen .reel-frame__slate,
.reel-modal.aster-fill-screen .reel-frame__meta,
.reel-modal.aster-fill-screen .reel-frame__placeholder { display: none !important; }

.reel-modal.aster-fill-screen .reel-close,
.reel-modal.aster-fill-screen .reel-fullscreen {
  top: max(12px, env(safe-area-inset-top));
  background: rgba(0, 0, 0, .55);
}

/* Native full screen: the same shape guarantee, whatever element is promoted. */
.reel-frame:fullscreen,
.reel-frame:-webkit-full-screen { width: 100vw; height: 100vh; background: #000; aspect-ratio: auto; }

.reel-frame:fullscreen > video,
.reel-frame:fullscreen .aster-cms-media,
.reel-frame:-webkit-full-screen > video {
  width: 100%; height: 100%; object-fit: contain; transform: none; translate: none;
}

video:fullscreen, video:-webkit-full-screen { object-fit: contain; background: #000; }

/* A phone held in landscape has very little height; drop the padding so the
   film is not squeezed into the middle third of the screen. */
@media (orientation: landscape) and (max-height: 560px) {
  .reel-modal { padding: 0; }
  .reel-modal .reel-frame { max-height: 100vh; max-height: 100dvh; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-fullscreen { transition: none; }
}

/* --- 3. projector frame size and position --------------------------------
   The reel now carries the same frame controls as every other video frame:
   a width per device and a left / centre / right position. */

/* aster-design.css sizes the projector with a carefully built
     width: min(1280px, 100%, (viewport height - padding) * ratio)
   which keeps the film's aspect ratio authoritative at every ratio. That rule
   is left exactly as it is; the width setting composes with it as an extra cap
   via max-width, and is only applied at all when it has been moved off 100%.
   At the default the projector is therefore pixel-identical to before. */
.reel-modal[data-aster-reel-sized="1"] .reel-frame { max-width: var(--aster-reel-width, 100%); }

.reel-modal[data-aster-align="left"]  { justify-items: start; }
.reel-modal[data-aster-align="right"] { justify-items: end; }

.reel-modal.aster-fill-screen[data-aster-align] { justify-items: center; }
