/* Figma 997-3765: a right-column list and an edge-to-edge background view.
   Keep the existing sidebar's typography, geometry and hover masks intact. */
#motion-page[hidden], .motion-backdrop[hidden], .motion-flipper[hidden] { display: none; }
.motion-page { position: relative; }
.motion-header { width: calc((100% - 20px) / 2); }
.motion-intro { margin: 0; }
.motion-view-switch { display: flex; gap: 4px; margin-top: 20px; width: max-content; }
.motion-view-switch button {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: color 180ms ease;
}
.motion-view-switch svg { width: 16px; height: 16px; fill: currentColor; }
.motion-view-switch button[aria-pressed="true"],
.motion-view-switch button:hover,
.motion-view-switch button:focus-visible { color: var(--ink); }
.motion-view-switch button:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.motion-stream {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}
.motion-item { min-width: 0; margin: 0; }
.motion-preview { aspect-ratio: var(--motion-aspect-ratio); }
.motion-preview video { width: 100%; height: 100%; object-fit: cover; }

/* The immersive stage stays fixed behind both columns. Only this mode locks
   the document; switching to list or leaving Motion restores native scrolling. */
html.has-motion-immersive,
html.has-motion-immersive body {
  overflow: hidden;
  overscroll-behavior-y: none;
}
.is-motion-immersive { isolation: isolate; }
.motion-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.motion-backdrop-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #fff;
  transition: opacity 480ms cubic-bezier(0.23, 0.98, 0.56, 1);
}
.motion-backdrop-layer.is-current { opacity: 1; }
.motion-backdrop-layer video { width: 100%; height: 100%; object-fit: cover; }
[data-motion-view="immersive"] .motion-header {
  position: sticky;
  top: var(--page-padding);
  z-index: 1;
}
[data-motion-view="immersive"] .motion-stream {
  display: none;
}

/* Same 44px targets, 20px arrows and hairlines as the inline case flipper.
   Align the outside edge to the eighth grid column; keep the pair gapless.
   Each artwork supplies a hue at the default blue's pale color tier.
   Borders always use the shared 6% black, independent of the scene's hue. */
.motion-flipper {
  position: fixed;
  z-index: 2;
  top: 50%;
  right: var(--page-padding);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--motion-control-fill, var(--blue));
  transition: background-color 480ms cubic-bezier(0.23, 0.98, 0.56, 1);
}
/* Match the case flipper's body type, tabular digits and two-tone count.
   Position it below the controls so the arrow pair stays vertically centered. */
.motion-flipper-count {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font: normal 400 14px/normal var(--font-sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--muted);
}
.motion-flipper-count [data-motion-current] { color: var(--ink); }
.motion-flipper button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  transition: background-color 180ms ease, color 180ms ease;
}
.motion-flipper button + button { border-top: 1px solid var(--line); }
.motion-flipper svg { width: 20px; height: 20px; }
.motion-flipper button[aria-disabled="true"] { color: var(--muted); cursor: default; }
@media (hover: hover) {
  /* A neutral overlay follows the surface's live crossfade, never a separate
     hard-coded blue that would clash with another artwork's theme. */
  .motion-flipper button:not([aria-disabled="true"]):hover { background: rgb(0 0 0 / 3%); }
}
.motion-flipper button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

@media (min-width: 761px) {
  /* Use the sidebar's measured starting row, not a fixed header reservation.
     Both measurements follow font loading, wrapping and language changes. */
  [data-motion-view="list"] .motion-stream {
    margin-top: calc(var(--navigation-offset, var(--masthead-height)) - var(--motion-header-height, 108px));
  }
  .is-motion-page .introduction[hidden] {
    display: grid;
    position: absolute;
    inset: 0 0 auto;
    opacity: 0;
    pointer-events: none;
  }
}
@media (max-width: 760px) {
  .motion-header { width: 100%; }
  .motion-stream { margin-top: 40px; }
  /* Keep the existing text/control placement directly over the artwork,
     without a mobile-only surface behind the header. */
  [data-motion-view="immersive"] .motion-header {
    padding: 12px;
    margin: -12px;
    width: calc(100% + 24px);
  }
}
@media (pointer: coarse) {
  .motion-view-switch button { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-view-switch button, .motion-backdrop-layer, .motion-flipper,
  .motion-flipper button { transition: none; }
}
@media print {
  html.has-motion-immersive,
  html.has-motion-immersive body { overflow: visible; }
  .motion-flipper { display: none; }
}