/*
 * A08 Projection Booth, on the shared core (rebuild on the generated art, Nov 7, 2026).
 *
 * A projection booth for a film restoration archive. A plain dark band (as in the winning render)
 * holds the booth's own buttons: dark lens-barrel discs with amber glyphs, cut from the Gemini sheet
 * (sheets/a08-booth-sheet.jpg; the aperture discs for play and pause). Under it, edge to edge, the
 * seek is the 35mm film strip harvested from the winning render itself (set-a/A08-projection-booth.jpg):
 * film-unplayed.png and film-played.png are one 3-frame period of its dark run and its lit amber run,
 * cut at the same phase, so the two tile frame for frame and the played run is clipped at the fill.
 * The playhead is the sheet's brass knob. The center play is the sheet's aperture lens.
 *
 * Signature: the aperture opens as the film starts. The lens art turns a quarter of a blade (24deg) and
 * opens out while it fades, and turns back on pause (a rotation of the art, never redrawn blades).
 *
 * Contrast note: the render's unplayed frames sit at about 1.4:1 on the film base, under the 3:1 the
 * unplayed track aims for, so the unplayed tile is lifted by a CSS brightness filter (2.5x, about 3.2:1);
 * buffered frames are lifted further (3.4x). A filter tint on the PNG, not a recolored drawing.
 */

@font-face {
  font-family: "Barlow Condensed";
  src: url(fonts/BarlowCondensed-600.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.sk-root[data-skin="a08"] {
  --media-accent-color: #f2b45a;
  --media-accent-text-color: #1a1612;
  --media-border-radius: 14px;
  --media-font-family: "Barlow Condensed", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --pb-ivory: #f3ead8;
  --pb-ivory-2: #c9bea8;
  --pb-amber: #f2b45a;
  --pb-film: #0b0a09;
  --pb-ink: #1a1612;
  --pb-unplayed-lift: 2.5;
  --pb-buffered-lift: 3.4;

  --sk-pad: 6px;
  --sk-btn-radius: 50%;
  --sk-hit: 52px;
  --sk-icon: 52px;
  --sk-ink: var(--pb-ivory);
  --sk-ink-2: var(--pb-ivory-2);
  --sk-surface: rgb(11 10 9 / .86);
  --sk-surface-solid: #0b0a09;
  --sk-blur: 8px;
  --sk-hairline: rgb(243 234 216 / .14);
  --sk-hairline-strong: rgb(243 234 216 / .3);
  --sk-shadow: 0 -1px 0 rgb(0 0 0 / .3), 0 -10px 28px rgb(0 0 0 / .28);
  --sk-cc-on: var(--pb-amber);
  --sk-focus: var(--pb-amber);
  --sk-focus-gap: #0b0a09;
  --sk-error-accent: var(--pb-amber);
  --sk-scrim: none;
  --sk-cue-clearance: 128px;

  --pb-band-h: 64px;
  --pb-strip-h: 48px;
}

/* ---------- Layout: the deck sits at the bottom; the band stays unpositioned so fullscreen can
   move to the player's top-right at narrow widths ---------- */

.sk-root[data-skin="a08"]:not([data-empty]) .sk-controls {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.pb-deck {
  display: flex;
  flex-direction: column;
  box-shadow: var(--sk-shadow);
}
.pb-band {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--pb-band-h);
  padding: var(--sk-pad) 14px;
  background: var(--sk-surface);
  -webkit-backdrop-filter: blur(var(--sk-blur));
  backdrop-filter: blur(var(--sk-blur));
  box-shadow: inset 0 1px 0 var(--sk-hairline);
  color: var(--sk-ink);
}
.pb-spacer {
  flex: 1 1 auto;
}

/* The booth's discs: the art is the whole button; on hover the amber glyph warms, pressed it dims */
.sk-root[data-skin="a08"] .sk-btn {
  transition: none;
}
.sk-root[data-skin="a08"] .sk-btn .sk-icon {
  transition: filter var(--sk-exit) linear;
}
.sk-root[data-skin="a08"] .sk-btn:hover .sk-icon {
  filter: brightness(1.18) drop-shadow(0 0 6px rgb(242 180 90 / .35));
  transition-duration: var(--sk-enter);
}
.sk-root[data-skin="a08"] .sk-btn:active .sk-icon {
  filter: brightness(.9);
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="a08"] .sk-btn:active .sk-icon {
    scale: .95;
  }
}

/* Captions: on = an amber bar under the disc (shape and position) at full glow; off = the disc dimmed */
.sk-root[data-skin="a08"] .sk-cc::after {
  bottom: -5px;
  width: 18px;
  height: 3px;
}
.sk-root[data-skin="a08"] .sk-cc:not([data-active]) .sk-icon {
  filter: saturate(.3) brightness(.72);
}

/* Time: condensed grotesk, tabular, reserved width (core) */
.pb-band .sk-time {
  padding: 0 10px 0 12px;
  font: 600 20px/1 var(--media-font-family);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.pb-band .sk-time media-time[data-type="duration"],
.pb-band .sk-time media-time-separator {
  color: var(--sk-ink-2);
}

/* ---------- Seek: the film strip from the render ---------- */

.pb-strip {
  --sk-seek-hit: var(--pb-strip-h);
  --sk-seek-radius: 0px;
  flex: none;
  width: 100%;
  height: var(--pb-strip-h);
  background: var(--pb-film);
}
.sk-root[data-skin="a08"] .pb-strip .sk-track,
.sk-root[data-skin="a08"] .pb-strip[data-interactive] .sk-track {
  height: var(--pb-strip-h);
  border-radius: 0;
  transition: none;
}
.sk-root[data-skin="a08"] .sk-track {
  background: none;
}
/* the unplayed run, tiled at its own height; ::before so the filter lifts only the film */
.sk-root[data-skin="a08"] .sk-track::before,
.sk-root[data-skin="a08"] .sk-track > :is(.sk-buffer, .sk-fill) {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  border-radius: 0;
  background: url(art/film-unplayed.png) 0 0 / auto 100% repeat-x;
}
.sk-root[data-skin="a08"] .sk-track::before {
  filter: brightness(var(--pb-unplayed-lift));
}
.sk-root[data-skin="a08"] .sk-track > .sk-buffer {
  filter: brightness(var(--pb-buffered-lift));
  clip-path: inset(0 calc(100% - var(--media-slider-buffer, 0%)) 0 0);
}
/* the lit amber run, same phase, clipped at the fill: each frame lights as playback passes it */
.sk-root[data-skin="a08"] .sk-track > .sk-fill {
  background-image: url(art/film-played.png);
  clip-path: inset(0 calc(100% - var(--media-slider-fill, 0%)) 0 0);
}

/* Tungsten halation: the lit stretch glows faintly into the band above it, brighter while playing */
.pb-strip::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: var(--media-slider-fill);
  height: 12px;
  background: linear-gradient(to top, rgb(242 180 90 / .26), rgb(242 180 90 / 0));
  pointer-events: none;
  transition: opacity 400ms linear;
  opacity: .6;
}
.sk-root[data-skin="a08"][data-playing] .pb-strip::before {
  opacity: 1;
}

/* Playhead: the brass knob from the sheet, on the frame line */
.sk-root[data-skin="a08"] .pb-strip .sk-thumb {
  --sk-thumb: 36px;
  background: url(art/knob.png) center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / .6));
}
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="a08"] .pb-strip .sk-thumb {
    transition: scale var(--sk-exit) var(--sk-ease);
  }
  .sk-root[data-skin="a08"] .pb-strip[data-interactive] .sk-thumb {
    scale: 1.15;
    transition-duration: var(--sk-enter);
  }
}

/* Volume: a short run of the same film beside the speaker, the brass knob as its thumb */
.pb-band .sk-volume {
  gap: 0;
}
.sk-root[data-skin="a08"] .sk-volume-slider {
  --sk-vol-w: 92px;
  margin-inline: 8px 10px;
}
.sk-root[data-skin="a08"] .sk-volume-slider .sk-track {
  height: 22px;
  border-radius: 2px;
}
.sk-root[data-skin="a08"] .sk-volume-slider .sk-thumb {
  --sk-thumb: 24px;
  background: url(art/knob.png) center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .6));
}

/* Preview: one frame lifted out of the strip. The shell is a window cut in the
   strip's own film: the tile's sprocket bands run along the top and bottom, its
   amber window fills the sides, and the thumbnail sits in the frame window.
   Bands are the tile at strip height (48px of its 132): sprockets y 0-7% and
   93-100% of the tile, so a 48px-tall strip-scaled copy, offset to each edge. */
.pb-strip .sk-preview {
  bottom: calc(100% + 16px);
}
.pb-strip .sk-preview-image {
  --sk-preview-radius: 2px;
  position: relative;
  border: 0;
  background: var(--pb-film);
  box-shadow: 0 0 0 1px rgb(243 234 216 / .3), 0 8px 24px rgb(0 0 0 / .45);
}
.pb-strip .sk-preview-image::before,
.pb-strip .sk-preview-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url(art/film-played.png) 0 0 / auto 48px repeat-x;
  pointer-events: none;
}
.pb-strip .sk-preview-image::before {
  clip-path: inset(0 0 calc(100% - 4px) 0);
}
.pb-strip .sk-preview-image::after {
  clip-path: inset(calc(100% - 4px) 0 0 0);
  background-position: 0 -44px;
}
/* The component sizes its host from the sprite math and clears that inline
   size whenever the pointer time crosses into a fresh second, so no CSS
   width or max-width survives on the shell. The stable lever is the sprite
   itself: at hover the component rebuilds it from the current frame, sized
   to the shell's constraints. Padding the shell's own box does not move the
   sprite (it is the shell's only child, cleared inline), so the frame
   treatment stays a shell treatment: sprocket bands proud of the picture,
   top and bottom, which is also how a frame sits in the projector gate. */
.pb-strip .sk-preview-time {
  padding: 5px 9px 4px;
  border-radius: 4px;
  background: var(--pb-film);
  box-shadow: inset 0 0 0 1px var(--sk-hairline-strong);
  font: 600 15px/1 var(--media-font-family);
  letter-spacing: .03em;
}

/* ---------- Center play: the aperture lens (decorative; the band's Play is the real one) ---------- */

.sk-root[data-skin="a08"] .sk-center {
  padding-bottom: calc(var(--pb-band-h) + var(--pb-strip-h));
}
.sk-root[data-skin="a08"] .pb-lens {
  --sk-icon: 140px;
  display: grid;
  place-items: center;
  width: var(--sk-icon);
  height: var(--sk-icon);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.sk-root[data-skin="a08"] .pb-lens .sk-icon {
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / .45));
  transition: filter var(--sk-exit) linear;
}
.sk-root[data-skin="a08"] .pb-lens:hover .sk-icon {
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / .45)) drop-shadow(0 0 14px rgb(242 180 90 / .35)) brightness(1.08);
}
/* The iris opens: on play the lens turns 24deg and opens out as it fades; on pause it turns back */
@media (prefers-reduced-motion: no-preference) {
  .sk-root[data-skin="a08"] .pb-lens .sk-icon {
    transition: filter var(--sk-exit) linear, rotate 120ms var(--sk-ease), scale 120ms var(--sk-ease);
  }
  .sk-root[data-skin="a08"]:not([data-paused]) .pb-lens .sk-icon {
    rotate: 24deg;
    scale: 1.08;
    transition: rotate 180ms var(--sk-ease), scale 180ms var(--sk-ease);
  }
  .sk-root[data-skin="a08"]:not([data-paused]) .pb-lens {
    scale: 1;
    transition: opacity 140ms linear 120ms;
  }
  .sk-root[data-skin="a08"] .pb-lens:active .sk-icon {
    scale: .97;
  }
}

/* ---------- Designed states ---------- */

/* Loading: the booth's gear disc turns */
.sk-root[data-skin="a08"] .sk-spinner {
  width: 64px;
  height: 64px;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.sk-root[data-skin="a08"] .sk-spinner .sk-icon {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / .5));
}

/* Error: 14px card, a full-width amber button with 8px corners on the 6px pad (14 - 6 = 8) */
.sk-root[data-skin="a08"] .sk-error {
  gap: 8px;
  padding: 22px 6px 6px;
  border-radius: 14px;
  background: rgb(16 14 12 / .94);
}
.sk-root[data-skin="a08"] .sk-error-title {
  padding-inline: 14px;
  font: 600 21px/1.15 var(--media-font-family);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.sk-root[data-skin="a08"] .sk-error-text {
  padding-inline: 14px;
  color: var(--pb-ivory-2);
  font-family: "Inter", system-ui, sans-serif;
}
.sk-root[data-skin="a08"] .sk-error-close {
  width: 100%;
  margin-top: 10px;
  border-radius: 8px;
  background: var(--pb-amber);
  color: var(--pb-ink);
  font: 600 17px/1 var(--media-font-family);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sk-root[data-skin="a08"] .sk-error-close:focus-visible {
  outline-color: var(--pb-ivory);
}
.sk-root[data-skin="a08"] .sk-empty p {
  padding: 12px 20px;
  border-radius: 8px;
  background: var(--pb-film);
  box-shadow: inset 0 0 0 1px var(--sk-hairline-strong);
  font: 600 16px/1 var(--media-font-family);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- Mid widths ---------- */

@container sk (max-width: 819px) {
  .sk-root[data-skin="a08"] :is(.sk-controls, .sk-center) {
    --sk-hit: 48px;
    --sk-icon: 48px;
    --pb-band-h: 58px;
    --pb-strip-h: 44px;
  }
  .sk-root[data-skin="a08"] .pb-lens {
    --sk-icon: 112px;
  }
}
@container sk (max-width: 679px) {
  .sk-root[data-skin="a08"] .sk-volume-slider {
    display: none;
  }
}

/* ---------- Narrow: the same band and strip, tighter; fullscreen moves to the top-right ---------- */

@container sk (max-width: 519px) {
  .sk-root[data-skin="a08"] :is(.sk-controls, .sk-center) {
    --sk-hit: 44px;
    --sk-icon: 44px;
    --pb-band-h: 54px;
    --pb-strip-h: 40px;
  }
  .pb-band {
    gap: 4px;
    padding: 5px 8px;
    /* a backdrop filter would make the band the containing block and trap fullscreen inside it */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgb(11 10 9 / .92);
  }
  .pb-band .sk-time {
    padding: 0 6px;
    font-size: 17px;
  }
  .sk-root[data-skin="a08"] .sk-fs {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .sk-root[data-skin="a08"] .pb-strip .sk-thumb {
    --sk-thumb: 30px;
  }
  .sk-root[data-skin="a08"] .pb-lens {
    --sk-icon: 84px;
  }
  /* before the first play and at the end only, so a paused caption keeps the little room there is */
  .sk-root[data-skin="a08"][data-started]:not([data-ended]) .pb-lens {
    opacity: 0;
    pointer-events: none;
  }
}

/* The root can't query its own width, so the caption lift follows the viewport (player ~ viewport - 32px) */
@media (max-width: 551px) {
  .sk-root[data-skin="a08"] {
    --sk-cue-clearance: 108px;
  }
}

/* ---------- Preference fallbacks ---------- */

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sk-root[data-skin="a08"] {
    --sk-surface: var(--sk-surface-solid);
    --sk-blur: 0px;
    --sk-hairline: var(--sk-hairline-strong);
  }
  .pb-band {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  .sk-root[data-skin="a08"] {
    --pb-unplayed-lift: 3;
    --pb-buffered-lift: 4;
    --sk-focus-w: 3px;
  }
}

/* Forced colors: the art stays; the strip falls back to a bordered track with patterned progress */
@media (forced-colors: active) {
  .pb-band {
    border-top: 1px solid CanvasText;
    background: Canvas;
  }
  .pb-strip::before {
    display: none;
  }
  .pb-strip {
    background: Canvas;
  }
  .sk-root[data-skin="a08"] .pb-strip .sk-track {
    border: 1px solid CanvasText;
  }
  .sk-root[data-skin="a08"] .sk-track > .sk-buffer {
    background: repeating-linear-gradient(90deg, CanvasText 0 1px, Canvas 1px 4px);
    filter: none;
    forced-color-adjust: none;
  }
  .sk-root[data-skin="a08"] .sk-track > .sk-fill {
    background: Highlight;
    forced-color-adjust: none;
  }
}