/* scene-hotspots */
.scene {
  --scene-ar: 1.7778;
  position: relative;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  background-color: var(--color-bg);
  isolation: isolate;
}
.scene__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
}
/* The frame covers the stage and keeps the image's aspect ratio, so hotspot % always match the art. */
.scene__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 100cqh * var(--scene-ar));
  aspect-ratio: var(--scene-ar);
  translate: -50% -50%;
}
.scene__img, .scene__clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-slow, 600ms) var(--ease, ease);
}
.scene__img.is-current { opacity: 1; z-index: 1; }
.scene__img.no-fade { transition: none; }
.scene__clip { z-index: 2; transition-duration: var(--dur-fast, 180ms); pointer-events: none; }
.scene__clip.is-playing { opacity: 1; }
.scene__spots { position: absolute; inset: 0; z-index: 3; }

/* Narrow portrait screens: the scene keeps its full width and pans sideways (native scroll). */
@media (max-aspect-ratio: 4/5) {
  .scene__stage { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
  .scene__stage::-webkit-scrollbar { display: none; }
  .scene__frame { position: relative; left: 0; top: 0; translate: none; height: 100cqh; width: auto; }
}

/* ---------- hotspots ---------- */
.spot-wrap { position: absolute; width: 0; height: 0; }
.spot {
  position: absolute;
  left: -22px;
  top: -22px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  text-decoration: none;
}
.spot__dot {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}
.spot__dot::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--color-ink);
  outline: 2px solid var(--color-bg);
}
.spot__label {
  white-space: nowrap;
  font-size: var(--size-small);
  font-weight: 500;
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-bg);
  color: var(--color-ink);
  opacity: 0;
  transition: opacity var(--dur-fast, 180ms) var(--ease, ease);
}
.spot:hover .spot__label,
.spot:focus-visible .spot__label,
.spot[aria-expanded="true"] .spot__label,
.spot--link .spot__label { opacity: 1; }
.spot:hover .spot__dot::before, .spot[aria-expanded="true"] .spot__dot::before { background-color: var(--color-accent); }
@media (hover: none) { .spot__label { opacity: 1; } }

.is-flipped .spot { flex-direction: row-reverse; left: auto; right: -22px; }

.spot__detail {
  position: absolute;
  top: 26px;
  left: 22px;
  width: max-content;
  max-width: min(18rem, 70vw);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg);
  color: var(--color-ink);
  border-top: 1px solid var(--color-accent);
  font-size: var(--size-small);
}
.is-flipped .spot__detail { left: auto; right: 22px; }

/* ---------- title + film-strip ---------- */
.scene__title {
  position: absolute;
  z-index: 4;
  left: max(var(--space-5), env(safe-area-inset-left));
  bottom: calc(var(--strip-h, 120px) + var(--space-4));
  pointer-events: none;
}
.scene__name {
  margin: 0;
  font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-3);
  background-color: var(--color-scrim);
}
.scene__name:focus { outline: none; }

.scene__strip {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-3) max(var(--space-5), env(safe-area-inset-left)) calc(var(--space-3) + env(safe-area-inset-bottom));
  background-color: var(--color-scrim);
  overflow-x: auto;
  scrollbar-width: thin;
}
.scene__strip-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-3); }
.scene__thumb {
  display: block;
  width: 160px;
  text-decoration: none;
  font-size: var(--size-small);
  color: var(--color-muted);
}
.scene__thumb img { width: 160px; height: 90px; object-fit: cover; opacity: 0.7; transition: opacity var(--dur-fast, 180ms) var(--ease, ease); }
.scene__thumb span { display: block; padding-top: var(--space-1); }
.scene__thumb:hover img, .scene__thumb[aria-current="page"] img { opacity: 1; }
.scene__thumb[aria-current="page"] { color: var(--color-ink); }
.scene__thumb[aria-current="page"] span { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.3em; }

@media (max-width: 700px) {
  .scene__thumb, .scene__thumb img { width: 112px; }
  .scene__thumb img { height: 63px; }
  .scene { --strip-h: 100px; }
}