/* Safeguard homepage motion system (lightweight: CSS + one small script).

   Rules of the system
   - One easing and one duration family everywhere (--sg-ease, 0.6 to 0.9s).
   - Things enter once, when they come into view, and stay. No fade-out on
     scroll (content that disappears behind you is a usability cost).
   - Only opacity and transform are animated; nothing moves the layout.
   - Hover feedback is pointer-only, subtle (a 2 to 4px lift, a 3% zoom).
   - Everything is gated by prefers-reduced-motion: no-preference, and the
     scroll reveals only arm when JS is running, so no-JS users see all content.

   Hooks
   - [data-sg-reveal]            fade up when scrolled into view
   - [data-sg-reveal="left"]     slide in from the left
   - [data-sg-reveal="right"]    slide in from the right
   - [data-sg-stagger]           children with data-sg-reveal enter in sequence
   The hero plays on page load and needs no JS. */

@media (prefers-reduced-motion: no-preference) {

  /* ---- Hero: plays on load ---- */
  .sg-rack-hero__photo {
    animation: sg-m-hero-art 1s var(--sg-ease) both;
  }

  .sg-rack-hero__title {
    animation: sg-m-rise 0.75s var(--sg-ease) 0.12s both;
  }

  .sg-rack-hero__lead {
    animation: sg-m-rise 0.75s var(--sg-ease) 0.22s both;
  }

  .sg-rack-hero__ctas {
    animation: sg-m-rise 0.75s var(--sg-ease) 0.32s both;
  }


  @keyframes sg-m-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes sg-m-hero-art {
    from { opacity: 0; transform: scale(1.025); }
    to { opacity: 1; transform: none; }
  }

  /* ---- Scroll reveals (armed by safeguard-motion.js) ----
     The hidden state has no transition (arming must snap, never animate);
     the transition lives on .is-in so only the reveal itself is animated. */
  .sg-motion-ready [data-sg-reveal] {
    --sg-m-x: 0px;
    --sg-m-y: 20px;
    opacity: 0;
    transform: translate(var(--sg-m-x), var(--sg-m-y));
  }

  .sg-motion-ready [data-sg-reveal="left"] {
    --sg-m-x: -32px;
    --sg-m-y: 0px;
  }

  .sg-motion-ready [data-sg-reveal="right"] {
    --sg-m-x: 32px;
    --sg-m-y: 0px;
  }

  .sg-motion-ready [data-sg-reveal].is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.8s var(--sg-ease),
      transform 0.8s var(--sg-ease);
    transition-delay: calc(var(--sg-i, 0) * 110ms);
  }

  /* ---- Quality: image eases down from a slight zoom ----
     (The coverage image is driven by GSAP, see safeguard-coverage-motion.js.) */
  .sg-quality__media {
    overflow: hidden;
    border-radius: var(--sg-radius);
  }

  .sg-motion-ready .sg-quality__media[data-sg-reveal] .sg-quality__img {
    transform: scale(1.06);
  }

  .sg-motion-ready .sg-quality__media[data-sg-reveal].is-in .sg-quality__img {
    transform: none;
    transition: transform 1.1s var(--sg-ease);
  }

  /* ---- Quality: check icons pop in after their row ---- */
  .sg-motion-ready .sg-quality__list li[data-sg-reveal] .sg-quality__check {
    transform: scale(0.4);
    opacity: 0;
  }

  .sg-motion-ready .sg-quality__list li[data-sg-reveal].is-in .sg-quality__check {
    transform: none;
    opacity: 1;
    transition:
      transform 0.5s var(--sg-ease) calc(var(--sg-i, 0) * 110ms + 0.25s),
      opacity 0.4s ease calc(var(--sg-i, 0) * 110ms + 0.25s);
  }
}

/* ---- Hover feedback: pointer devices only ---- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sg-details__item .sg-details__art,
  .sg-quality__media .sg-quality__img {
    transition: transform 0.5s var(--sg-ease);
  }

  .sg-details__item:hover .sg-details__art {
    transform: translateY(-4px);
  }

  .sg-quality__media:hover .sg-quality__img {
    transform: scale(1.03);
  }

  .sg-quality__list li > span:last-child {
    transition: transform 0.35s var(--sg-ease);
  }

  .sg-quality__list li:hover > span:last-child {
    transform: translateX(4px);
  }
}