/* The unenhanced catalog is a complete, linked index. */
.catalog { position: relative; }
.wordmark { display: none; }
.particle-wordmark { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Plain text is a failure fallback, never a loading placeholder. */
.wordmark > span { visibility: hidden; }
.wordmark.particles-failed > span { visibility: visible; }
.wordmark.particles-failed > canvas { visibility: hidden; }
.catalog-pending .film-ring { visibility: hidden; }
.film-ring { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; padding: 48px 40px 60px; }
.film-card { display: block; min-width: 0; }
.film-card-image { position: relative; background: var(--theme-placeholder); aspect-ratio: 1.65; overflow: hidden; }
.film-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; }
.film-card video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* Fade decoded video over its still; return to the still immediately on stop. */
  .film-card video.is-playing { transition: opacity 180ms ease-out; }
}
.film-number, .film-open { position: absolute; bottom: 9px; color: white; font: 9px var(--font-mono); text-shadow: 0 1px 5px #000a; }
.film-number { left: 10px; }
.film-open { right: 10px; font-size: 17px; line-height: 1; }
.film-caption { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 11px; line-height: 1.5; }
.film-caption__title { min-width: 0; }
.film-caption__client { flex-shrink: 0; color: var(--theme-muted); font-size: 9px; }

/* Controls remain hidden until JavaScript initializes. */
.catalog-toolbar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 40px; padding: 16px 0 24px; }
.catalog-toolbar[hidden], .view-switch[hidden] { display: none; }
/* Offset the inset glyphs, retaining the full 44px click targets. */
.view-switch { position: sticky; top: 8px; z-index: 6; display: flex; align-self: flex-end; width: max-content; margin: 0 40px 0 auto; translate: 8px 0; border-radius: 8px; background: transparent; }
.catalog[data-view="grid"] .view-switch { background: var(--theme-page); }
.view-switch button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: var(--theme-muted); }
.view-switch button[aria-pressed="true"], .view-switch button:enabled:hover { color: var(--theme-brand); }
.view-switch button[aria-pressed="true"]::after { content: ""; position: absolute; bottom: 5px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.interaction-hint { color: var(--theme-muted); font: 10px var(--font-mono); opacity: 0; visibility: hidden; transition: opacity 180ms ease-out; }
.interaction-hint[data-idle="true"] { opacity: 1; visibility: visible; }
.interaction-hint .hint-divider { margin: 0 9px; color: var(--theme-hint-divider); }
.interaction-hint-touch { display: none; }
.interaction-hint-touch svg { flex: none; }
@media (pointer: coarse) {
  .interaction-hint-desktop { display: none; }
  .interaction-hint-touch { display: inline-flex; align-items: center; gap: 5px; }
  .interaction-hint-touch .hint-divider { margin: 0 4px; }
}
/* Align with the visible footer icons, inset from their larger hit areas. */
.motion-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-inline: auto 8px; }
.motion-controls button { border: 0; background: transparent; padding: 10px 0; font-size: 10px; }

/* Orbit is a catalog state; the homepage separately sizes its surrounding frame. */
.catalog[data-view="orbit"] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.catalog[data-view="orbit"] .catalog-stage { position: relative; flex: 1; min-height: 0; perspective: 1100px; overflow: visible; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.catalog[data-view="orbit"] .catalog-stage.is-dragging { cursor: grabbing; }
.catalog[data-view="orbit"] .wordmark { position: absolute; display: grid; place-items: center; inset: 0 0 70px; font-size: clamp(70px, 16vw, 290px); text-align: center; font-weight: 680; letter-spacing: -.08em; line-height: 1; color: var(--theme-wordmark); pointer-events: none; white-space: nowrap; }
.catalog[data-view="orbit"] .film-ring {
  position: absolute;
  left: 44%;
  top: calc(50% - 22px);
  width: 0;
  height: 0;
  padding: 0;
  display: block;
  transform-style: preserve-3d;
  transform: translate(var(--offset-x, 0px), var(--offset-y, 0px)) rotateX(var(--tilt-x, 10deg)) rotateY(var(--tilt-y, -45deg)) rotateZ(var(--tilt-z, -10deg));
}
.catalog[data-view="orbit"] .film-card { position: absolute; left: 0; top: 0; width: calc(var(--card-width, 170px) * var(--zoom, 1)); transform-style: preserve-3d; will-change: transform; outline-offset: 5px; }
.catalog[data-view="orbit"] .film-card-image { box-shadow: 0 3px 12px var(--theme-card-shadow); transition: box-shadow 200ms; }
.catalog[data-view="orbit"] .film-card:hover .film-card-image,
.catalog[data-view="orbit"] .film-card:focus-visible .film-card-image { box-shadow: 0 0 0 3px var(--theme-page), 0 0 0 4px var(--theme-brand); }
.catalog[data-view="orbit"] .film-caption {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 220px;
  padding: 5px 7px;
  margin-top: 8px;
  background: var(--theme-page);
  color: var(--theme-brand);
  opacity: 0;
  white-space: normal;
  pointer-events: none;
  transition: opacity 150ms;
}
.catalog[data-view="orbit"] .catalog-stage[aria-busy="true"] .film-card .film-caption { opacity: 0; }
.catalog[data-view="orbit"] .film-caption__client { display: none; }
.catalog[data-view="orbit"] .film-card:hover .film-caption,
.catalog[data-view="orbit"] .film-card:focus-visible .film-caption { opacity: 1; }
.catalog[data-view="orbit"] .film-number, .catalog[data-view="orbit"] .film-open { bottom: calc(9px * var(--zoom, 1)); opacity: 0; transition: opacity 150ms; }
.catalog[data-view="orbit"] .film-number { left: calc(10px * var(--zoom, 1)); font-size: calc(9px * var(--zoom, 1)); }
.catalog[data-view="orbit"] .film-open { right: calc(10px * var(--zoom, 1)); font-size: calc(17px * var(--zoom, 1)); }
.catalog[data-view="orbit"] .film-card:hover .film-number,
.catalog[data-view="orbit"] .film-card:hover .film-open,
.catalog[data-view="orbit"] .film-card:focus-visible .film-open { opacity: 1; }

@media (max-width: 700px) {
  .catalog[data-view="orbit"] .wordmark { font-size: 17vw; }
  .film-ring { grid-template-columns: minmax(0, 1fr); padding: 30px 20px; gap: 28px 14px; }
  .film-caption { flex-direction: column; gap: 3px; font-size: 10px; }
  .view-switch { margin-right: 20px; }
  .catalog-toolbar { flex-wrap: wrap; gap: 4px; margin: 0 20px; padding: 10px 0 18px; }
  .interaction-hint { order: 3; width: 100%; text-align: center; font-size: 8px; margin: 15px 0 0; }
}