/* fx.css · depth/scroll-spin, the object turns a full circle as it passes through the view · owner: Lizzy East · all rights reserved */

/* A square card with a front (the photograph) and a back (a label, decoration only)
   turns once around its upright axis as it crosses the screen, facing you square on
   at the middle. The scroll itself drives it (a CSS scroll timeline): the wheel is
   never captured. Without scroll timelines, or with motion off, it simply faces you. */
[data-fx~="depth/scroll-spin"] {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  margin: 0;
  overflow-x: clip;
  perspective: var(--fx-spin-perspective, 1400px);
}
[data-fx~="depth/scroll-spin"] [data-fx-spin] {
  display: grid;
  width: var(--fx-spin-size, min(72vw, 26rem));
  aspect-ratio: 1;
  transform-style: preserve-3d;
}
[data-fx~="depth/scroll-spin"] [data-fx-face] {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  backface-visibility: hidden;
  box-shadow: 0 40px 60px -40px rgb(0 0 0 / 0.7);
}
[data-fx~="depth/scroll-spin"] img[data-fx-face] { display: block; object-fit: cover; }
[data-fx~="depth/scroll-spin"] [data-fx-face="back"] {
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--fx-spin-back, #2340ff);
  color: var(--fx-spin-back-ink, #ffffff);
  font: italic 400 clamp(2rem, 7vw, 3.75rem) / 1 var(--fx-spin-font, Georgia, serif);
  text-align: center;
  transform: rotateY(180deg);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.fx-still) [data-fx~="depth/scroll-spin"] [data-fx-spin] {
      animation: fx-scroll-spin linear both;
      animation-timeline: view();
      animation-range: cover 5% cover 95%;
    }
  }
}
@keyframes fx-scroll-spin {
  from { transform: rotateY(-180deg); }
  to { transform: rotateY(180deg); }
}