/*
  Light scroll motion (branch: scroll-lite). Paired with motion.js; remove both
  tags to turn it off. Only opacity, translate and scale animate, so the browser
  can run it without relayout. Reduced-motion visitors and no-JS visitors get
  the static design.
*/
@media screen and (prefers-reduced-motion: no-preference) {
  /* 1. Blocks pop in once: a short rise and fade, lightly staggered per row. */
  .reveal-on [data-reveal] {
    opacity: 0;
    translate: 0 24px;
    transition:
      opacity .6s ease,
      translate .75s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--reveal-index, 0) * 80ms);
  }
  .reveal-on [data-reveal].is-in {
    opacity: 1;
    translate: none;
  }
  /* Already on screen (or revealed for keyboard focus): appear without animating.
     Only the reveal effects are switched off; hover transitions inside stay. */
  .reveal-on [data-reveal].no-anim,
  .reveal-on [data-reveal].no-anim :is(.featured-project img, .about-teaser img),
  .reveal-on [data-reveal].no-anim :is(.eyebrow, .gallery-group .section-head h2)::before {
    transition: none;
  }

  /* 2. The two feature photos settle into their frames as they arrive. */
  .featured-project figure,
  .about-teaser figure {
    overflow: clip;
    border-radius: 2px;
  }
  .reveal-on [data-reveal] :is(.featured-project img, .about-teaser img) {
    scale: 1.07;
    transition: scale 1.3s cubic-bezier(.2, .7, .2, 1);
  }
  .reveal-on [data-reveal].is-in :is(.featured-project img, .about-teaser img) {
    scale: 1;
  }

  /* 3. Gold rules draw in from the left just after their block appears. */
  .reveal-on [data-reveal] :is(.eyebrow, .gallery-group .section-head h2)::before {
    transform-origin: left center;
    scale: 0 1;
    transition: scale .7s cubic-bezier(.2, .7, .2, 1) .25s;
  }
  .reveal-on [data-reveal].is-in :is(.eyebrow, .gallery-group .section-head h2)::before {
    scale: 1 1;
  }

  /* Count-up numbers keep a steady width while they change. */
  .stat strong {
    font-variant-numeric: tabular-nums;
  }

  /* 4. The hero photo eases slightly closer as the page scrolls away from it.
        Pure CSS scroll timeline; browsers without support simply skip it. */
  @supports (animation-timeline: scroll()) {
    .slide img {
      animation: dbs-approach linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
  }
}

@keyframes dbs-approach {
  from { scale: 1; }
  to { scale: 1.07; }
}

@media print {
  .reveal-on [data-reveal] {
    opacity: 1;
    translate: none;
  }
}