/* Garage motion studies: a full-bleed screening room for the two AI films.
   Without JavaScript both films stack with native controls; garage JS adds
   .is-enhanced (one film on stage, reel switcher, autoplay in view). */
.garage-films {
  width: min(1400px, 100vw);
  margin: 0 0 clamp(116px, 15vw, 190px) 50%;
  transform: translateX(-50%);
  padding-block: clamp(56px, 7vw, 92px) 18px;
  border-block: 1px solid var(--film-line);
  color: var(--film-ink-2);
  /* A dark screening room inside the light observatory page: local inks. */
  --film-ink: #e9ece2;
  --film-ink-2: rgb(233 236 226 / 0.74);
  --film-ink-3: rgb(233 236 226 / 0.56);
  --film-line: rgb(233 236 226 / 0.16);
  /* The observatory theme darkens this accent for paper; the dark room needs the light one. */
  --garage-terracotta-light: #cf7a58;
  background: radial-gradient(120% 70% at 50% 0%, rgb(18 52 41 / 0.55), transparent 70%), #040a08;
}

.garage-films-head,
.garage-film figcaption,
.garage-films-note,
.garage-reels {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.garage-films-head {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px 28px;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.garage-films .garage-films-head > p:first-child {
  grid-row: span 2;
  margin: 7px 0 0;
  color: var(--garage-terracotta-light);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

.garage-story .garage-films .garage-films-head h2 {
  margin: 0;
  padding: 0;
  color: var(--film-ink);
  font: 400 clamp(2.35rem, 5vw, 4.9rem) / 0.98 var(--font-display);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.garage-films .garage-films-head > p:last-child {
  max-width: 58ch;
  margin: 10px 0 0;
  color: var(--film-ink-2);
  text-wrap: pretty;
}

.garage-films-stage {
  display: grid;
  gap: 44px;
  /* Keep a 16:9 frame inside the viewport height on wide screens. */
  width: min(100%, calc(76svh * 16 / 9));
  margin-inline: auto;
}

.garage-film {
  margin: 0;
}

.garage-film-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-block: 1px solid var(--film-line);
  background: #000;
}

.garage-film video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.garage-film figcaption {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 28px;
  margin-top: 14px;
  color: var(--film-ink-3);
  font-size: 0.76rem;
  line-height: 1.55;
}

.garage-film figcaption span,
.garage-films-note {
  color: var(--garage-terracotta-light);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

.garage-films .garage-films-note.mono {
  margin: 28px auto 0;
  color: var(--film-ink-3);
  font-size: 0.75rem;
}

.garage-films-note a {
  color: var(--garage-terracotta-light);
  text-underline-offset: 4px;
}

/* Enhanced: one stage, films cross-fade in the same grid cell. */
.garage-films.is-enhanced .garage-films-stage {
  gap: 0;
}

.garage-films.is-enhanced .garage-film {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transition: opacity 700ms var(--ease-out), visibility 0s linear 700ms;
}

.garage-films.is-enhanced .garage-film.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 700ms var(--ease-out);
}

/* Letterbox bars part when a film first plays. */
.garage-films.is-enhanced .garage-film-frame::before,
.garage-films.is-enhanced .garage-film-frame::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  height: 12.5%;
  background: #000;
  pointer-events: none;
  transition: transform 1400ms var(--ease-cine, var(--ease-out));
}

.garage-films.is-enhanced .garage-film-frame::before { top: 0; transform-origin: top; }
.garage-films.is-enhanced .garage-film-frame::after { bottom: 0; transform-origin: bottom; }
.garage-films.is-enhanced .garage-film.has-played .garage-film-frame::before,
.garage-films.is-enhanced .garage-film.has-played .garage-film-frame::after { transform: scaleY(0); }

.garage-film-hud {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 48px clamp(14px, 2.4vw, 28px) 16px;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.62));
  color: var(--film-ink);
}

.garage-film-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(233 236 226 / 0.45);
  border-radius: 50%;
  background: rgb(4 10 8 / 0.5);
  color: inherit;
  cursor: pointer;
}

.garage-film-toggle:hover { border-color: var(--garage-terracotta-light); }
.garage-film-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.garage-film-toggle svg { width: 14px; height: 14px; fill: currentColor; }

.garage-film-time {
  margin-left: auto;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

.garage-film-progress {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--garage-terracotta-light);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

.garage-reels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 28px;
  border: 1px solid var(--film-line);
  background: var(--film-line);
}

.garage-reel {
  position: relative;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 12px;
  border: 0;
  background: #040a08;
  color: var(--film-ink-3);
  text-align: left;
  cursor: pointer;
  transition: color var(--t-hover, 200ms) var(--ease-hover, ease), background var(--t-hover, 200ms) var(--ease-hover, ease);
}

.garage-reel img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: 0.55;
  transition: opacity 400ms var(--ease-out);
}

.garage-reel strong {
  display: block;
  color: inherit;
  font: 400 clamp(1.1rem, 2vw, 1.5rem) / 1.1 var(--font-display);
}

.garage-reel small {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

.garage-reel:hover,
.garage-reel[aria-pressed="true"] { color: var(--film-ink); background: #0b1913; }
.garage-reel:hover img,
.garage-reel[aria-pressed="true"] img { opacity: 1; }
.garage-reel:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.garage-reel[aria-pressed="true"] small { color: var(--garage-terracotta-light); }

.garage-reel .garage-film-progress { inset: auto 0 0; }

@media (max-width: 680px) {
  .garage-films-head,
  .garage-film figcaption {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .garage-films .garage-films-head > p:first-child { grid-row: auto; }

  .garage-reels { width: 100%; border-inline: 0; }
  .garage-reel { grid-template-columns: 1fr; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .garage-films.is-enhanced .garage-film,
  .garage-films.is-enhanced .garage-film-frame::before,
  .garage-films.is-enhanced .garage-film-frame::after { transition: none; }
}

html[data-motion="reduced"] .garage-films.is-enhanced .garage-film,
html[data-motion="reduced"] .garage-films.is-enhanced .garage-film-frame::before,
html[data-motion="reduced"] .garage-films.is-enhanced .garage-film-frame::after { transition: none; }