/* Scroll motion (Raouf 2026-10-14: "a scroll animation that feels luxury"). Slow, eased, restrained: nothing bounces or spins.
   - the thread: a fine gold thread is woven across the top of the screen as the page is read (the page as a rug being made)
   - the hero: the showroom photo drifts slowly and settles deeper as the page moves; the words lift away
   - photographs open like a curtain from the middle and settle from a slight zoom to rest, as they come into view
   - headings rise out of a hairline mask; rugs on the walls rise a few pixels into place, one row after another
   Since 2026-10-14 pm every page inherits them (Raouf).
   2026 practice (MDN animation-timeline, ics.media, WeAreDevelopers, WCAG 2.2 SC 2.3.3): CSS scroll-driven animations (Chrome, Edge,
   Safari 26; Firefox shows everything at rest), view() per element and scroll() for the page, transform, clip-path and opacity only,
   no pinning, nothing essential hidden. Only with motion "full" and no reduced-motion preference; otherwise everything is at rest. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* the thread */
    html[data-motion="full"] body::before {
      content: ""; position: fixed; z-index: 60; left: 0; right: 0; top: 0; height: 2px; pointer-events: none;
      background: var(--c-accent); transform-origin: left; transform: scaleX(0);
      animation: lux-thread linear both; animation-timeline: scroll(root block);
    }
    @keyframes lux-thread { to { transform: scaleX(1); } }

    /* the hero */
    html[data-motion="full"] :is(.hero-photo-img, .contact-hero-img, .collection-film .cf-media, body:is(.lp-custom, .lp-viewings) .lp-hero .wp-block-image img) {
      animation: lux-drift linear both; animation-timeline: scroll(root block); animation-range: 0 100svh;
    }
    @keyframes lux-drift { from { transform: scale(1.04); } to { transform: translateY(5%) scale(1.12); } }
    html[data-motion="full"] :is(.hero-photo .hero-copy, .collection-film.has-media .cf-copy) {
      animation: lux-lift linear both; animation-timeline: scroll(root block); animation-range: 10svh 70svh;
    }
    @keyframes lux-lift { to { transform: translateY(-9vh); opacity: 0; } }

    /* photographs: a curtain from the middle, then the photo settles */
    html[data-motion="full"] :is(.home-pair figure, .pl-frame, .home-band-photo, .sp-stage, .visit-photo,
      main .entry .wp-block-image:not(.lp-hero .wp-block-image), main .wp-block-post-featured-image) {
      animation: lux-curtain linear both; animation-timeline: view(); animation-range: entry 0% cover 40%;
    }
    @keyframes lux-curtain { from { clip-path: inset(14% 0 14% 0); } to { clip-path: inset(0 0 0 0); } }
    html[data-motion="full"] :is(.home-pair figure, .home-band-photo, .visit-photo, main .entry .wp-block-image:not(.lp-hero .wp-block-image), main .wp-block-post-featured-image) img {
      animation: lux-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 60%;
    }
    html[data-motion="full"] :is(.visit-photo, main .entry .wp-block-image:not(.lp-hero .wp-block-image), main .wp-block-post-featured-image) { overflow: hidden; }
    @keyframes lux-settle { from { transform: scale(1.14); } to { transform: scale(1); } }

    /* headings rise out of a hairline mask */
    html[data-motion="full"] main :is(h2, .cc-big, .sp-size, .home-band-h, .entry > :not(.lp-hero) h1, .collection-head h1) {
      animation: lux-rise linear both; animation-timeline: view(); animation-range: entry 10% entry 90%;
    }
    @keyframes lux-rise { from { clip-path: inset(0 0 100% 0); transform: translateY(0.45em); } to { clip-path: inset(0 0 -0.2em 0); transform: none; } }

    /* rugs on the walls rise into place */
    html[data-motion="full"] :is(.wall .hung-rug > .mat, .wall-label, main .entry ul.lp-choices > li, main .entry ol.lp-steps > li, main .entry .wp-block-details, .ft-card .ft-col) {
      animation: lux-hang linear both; animation-timeline: view(); animation-range: entry 0% entry 70%;
    }
    @keyframes lux-hang { from { transform: translateY(28px); } to { transform: none; } }
  }
}