/* fx.css · reveal/collage-snap, scattered photographs straighten into a grid as you scroll · owner: Lizzy East · all rights reserved */

/* The finished look is the grid: five prints, the first one large. Where scroll
   timelines exist, with the core running and motion allowed, they begin tossed in
   a loose pile (each print's own --fx-pile-x, --fx-pile-y and --fx-pile-turn) and
   slide and straighten into place as the block comes up the screen, settled well
   before it is centred. Everywhere else it is simply the grid. The frame clips
   anything that strays. */
[data-fx~="reveal/collage-snap"] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fx-collage-gap, clamp(0.6rem, 1.6vw, 1.25rem));
  overflow: clip;
  overflow-clip-margin: 1rem;
}
[data-fx~="reveal/collage-snap"] > * {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: var(--fx-print-border, clamp(3px, 0.5vw, 7px)) solid var(--fx-print-paper, #ffffff);
  box-shadow: 0 14px 30px -16px rgb(0 0 0 / 0.5);
}
[data-fx~="reveal/collage-snap"] > :first-child { grid-column: span 2; grid-row: span 2; }
[data-fx~="reveal/collage-snap"] > :nth-child(1) { --fx-pile-x: 16%; --fx-pile-y: 8%; --fx-pile-turn: -5deg; }
[data-fx~="reveal/collage-snap"] > :nth-child(2) { --fx-pile-x: -70%; --fx-pile-y: 38%; --fx-pile-turn: 9deg; }
[data-fx~="reveal/collage-snap"] > :nth-child(3) { --fx-pile-x: -150%; --fx-pile-y: 70%; --fx-pile-turn: -11deg; }
[data-fx~="reveal/collage-snap"] > :nth-child(4) { --fx-pile-x: -45%; --fx-pile-y: -40%; --fx-pile-turn: -7deg; }
[data-fx~="reveal/collage-snap"] > :nth-child(5) { --fx-pile-x: -135%; --fx-pile-y: -25%; --fx-pile-turn: 12deg; }
@media (max-width: 40rem) {
  [data-fx~="reveal/collage-snap"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-fx~="reveal/collage-snap"] > :nth-child(1) { --fx-pile-x: 0%; --fx-pile-y: 16%; --fx-pile-turn: -4deg; }
  [data-fx~="reveal/collage-snap"] > :nth-child(2) { --fx-pile-x: 28%; --fx-pile-y: -95%; --fx-pile-turn: 8deg; }
  [data-fx~="reveal/collage-snap"] > :nth-child(3) { --fx-pile-x: -32%; --fx-pile-y: -120%; --fx-pile-turn: -10deg; }
  [data-fx~="reveal/collage-snap"] > :nth-child(4) { --fx-pile-x: 36%; --fx-pile-y: -190%; --fx-pile-turn: 6deg; }
  [data-fx~="reveal/collage-snap"] > :nth-child(5) { --fx-pile-x: -30%; --fx-pile-y: -215%; --fx-pile-turn: -13deg; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.fx-armed [data-fx~="reveal/collage-snap"] { view-timeline-name: --fx-collage; }
    html.fx-armed [data-fx~="reveal/collage-snap"] > * {
      animation: fx-collage-snap linear both;
      animation-timeline: --fx-collage;
      animation-range: var(--fx-collage-range, cover 0% cover 42%);
    }
  }
}
@keyframes fx-collage-snap {
  from { transform: translate(var(--fx-pile-x, 0%), var(--fx-pile-y, 0%)) rotate(var(--fx-pile-turn, 0deg)); }
  to { transform: none; }
}