/* fx.css · depth/cube-gallery, photographs on the faces of a cube that turns with the scroll · owner: Lizzy East · all rights reserved */

/* Four photographs, one per side of a cube. While the stage is pinned, scrolling
   turns the cube a quarter at a time, resting on each face (a CSS scroll timeline):
   the wheel is never captured. Without scroll timelines, or with motion off, the
   four photographs sit in a plain two-by-two grid. */
[data-fx~="depth/cube-gallery"] [data-fx-cube] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.5vw, 1rem);
  max-width: var(--fx-cube-grid, 56rem);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 5rem) var(--fx-cube-gutter, 1.5rem);
  list-style: none;
}
[data-fx~="depth/cube-gallery"] [data-fx-cube] > * { margin: 0; }
[data-fx~="depth/cube-gallery"] img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.fx-still) [data-fx~="depth/cube-gallery"] { height: 300vh; view-timeline-name: --fx-cube; }
    html:not(.fx-still) [data-fx~="depth/cube-gallery"] [data-fx-stage] {
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100svh;
      display: grid;
      place-items: center;
      overflow: clip;
      perspective: var(--fx-cube-perspective, 1800px);
    }
    html:not(.fx-still) [data-fx~="depth/cube-gallery"] [data-fx-cube] {
      --fx-s: var(--fx-cube-size, min(62vmin, 30rem));
      display: block;
      position: relative;
      width: var(--fx-s);
      height: var(--fx-s);
      max-width: none;
      margin: 0;
      padding: 0;
      transform-style: preserve-3d;
      animation: fx-cube-turn linear both;
      animation-timeline: --fx-cube;
      animation-range: contain 0% contain 100%;
    }
    html:not(.fx-still) [data-fx~="depth/cube-gallery"] [data-fx-cube] > * { position: absolute; inset: 0; backface-visibility: hidden; }
    html:not(.fx-still) [data-fx~="depth/cube-gallery"] [data-fx-cube] > :nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--fx-s) / 2)); }
    html:not(.fx-still) [data-fx~="depth/cube-gallery"] [data-fx-cube] > :nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--fx-s) / 2)); }
    html:not(.fx-still) [data-fx~="depth/cube-gallery"] [data-fx-cube] > :nth-child(4) { transform: rotateY(270deg) translateZ(calc(var(--fx-s) / 2)); }
    html:not(.fx-still) [data-fx~="depth/cube-gallery"] [data-fx-cube] > :nth-child(1) { transform: translateZ(calc(var(--fx-s) / 2)); }
    html:not(.fx-still) [data-fx~="depth/cube-gallery"] img { height: 100%; }
    html:not(.fx-still) [data-fx~="depth/cube-gallery"] [data-fx-stage]::after {
      content: "";
      position: absolute;
      left: 50%;
      top: calc(50% + var(--fx-cube-size, min(62vmin, 30rem)) * 0.62);
      width: calc(var(--fx-cube-size, min(62vmin, 30rem)) * 1.3);
      height: calc(var(--fx-cube-size, min(62vmin, 30rem)) * 0.14);
      translate: -50% 0;
      background: radial-gradient(closest-side, rgb(0 0 0 / 0.22), transparent);
      pointer-events: none;
    }
  }
}
@keyframes fx-cube-turn {
  0%, 10% { transform: translateZ(calc(var(--fx-s) / -2)) rotateY(0deg); }
  30%, 40% { transform: translateZ(calc(var(--fx-s) / -2)) rotateY(-90deg); }
  60%, 70% { transform: translateZ(calc(var(--fx-s) / -2)) rotateY(-180deg); }
  90%, 100% { transform: translateZ(calc(var(--fx-s) / -2)) rotateY(-270deg); }
}