/* fx.css · scroll-cinema/depth, three layers move at different speeds · owner: Lizzy East · all rights reserved */

/* Three layers, three speeds, all from the scroll itself. The word and the small
   print are decoration; with motion off everything simply sits in place. */
[data-fx~="scroll-cinema/depth"] {
  position: relative;
  display: grid;
  min-height: 90vh;
  overflow: clip;
  background: var(--fx-depth-night, #14110e);
}
[data-fx~="scroll-cinema/depth"] > * { grid-area: 1 / 1; }
[data-fx~="scroll-cinema/depth"] [data-fx-layer="back"] { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
[data-fx~="scroll-cinema/depth"] [data-fx-layer="mid"] {
  align-self: center;
  justify-self: center;
  margin: 0;
  color: transparent;
  -webkit-text-stroke: 2px var(--fx-depth-line, #f1ece3);
  font: italic 400 clamp(4rem, 17vw, 15rem) / 1 var(--fx-depth-font, Georgia, serif);
  white-space: nowrap;
}
[data-fx~="scroll-cinema/depth"] [data-fx-layer="front"] {
  align-self: end;
  justify-self: end;
  width: min(42vw, 22rem);
  margin: 0 6% 8%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: 0 30px 60px rgb(0 0 0 / 0.45);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.fx-still) [data-fx~="scroll-cinema/depth"] { view-timeline-name: --fx-depth; }
    html:not(.fx-still) [data-fx~="scroll-cinema/depth"] [data-fx-layer] {
      animation: linear both;
      animation-timeline: --fx-depth;
      animation-range: cover 0% cover 100%;
    }
    html:not(.fx-still) [data-fx~="scroll-cinema/depth"] [data-fx-layer="back"] { animation-name: fx-depth-back; }
    html:not(.fx-still) [data-fx~="scroll-cinema/depth"] [data-fx-layer="mid"] { animation-name: fx-depth-mid; }
    html:not(.fx-still) [data-fx~="scroll-cinema/depth"] [data-fx-layer="front"] { animation-name: fx-depth-front; }
  }
}
@keyframes fx-depth-back { from { translate: 0 -6%; scale: 1.14; } to { translate: 0 6%; scale: 1.14; } }
@keyframes fx-depth-mid { from { translate: 12% 0; } to { translate: -12% 0; } }
@keyframes fx-depth-front { from { translate: 0 30%; } to { translate: 0 -30%; } }