/* ==========================================================================
   KF Crafts — the motion layer (Round 7, 28.09.2026). Loaded after site.css.
   1. Lenis (the desktop wheel glide, js/motion.js): the rules its own lenis.css ships.
   2. (retired 13.10.2026: the phone's thumb-played landing film. Home now opens on a plain film.)
   3. Scroll-linked depth: section titles and photographs drift a touch as the page moves (CSS scroll-driven
      animations, on the compositor — nothing runs on the main thread; browsers without them stand still).
   Transform / opacity only, no layout shift, all of it still under prefers-reduced-motion.
   ========================================================================== */

/* ---------- 1. Lenis (MIT, darkroom.engineering) ---------- */
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- 3. Scroll-linked depth ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Section titles rise a little slower than the page as they come in: depth between words and content.
       (translate, not transform: the masked-line and rise reveals own transform.) */
    .section .head,
    .section .head--tight {
      animation: kf-head-depth linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
    /* Photographs settle inside their frames (the frames clip): rooms, the real work, the projects page, about. */
    .room__media img,
    .strip__frame img,
    .gallery__frame img,
    .about__frame img {
      animation: kf-photo-depth linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes kf-head-depth {
  from { translate: 0 1.5rem; }
  to { translate: 0 0; }
}
@keyframes kf-photo-depth {
  from { translate: 0 -4%; scale: 1.1; }
  to { translate: 0 4%; scale: 1.1; }
}