/* site-motion.css — subtle home motion (append; do not replace site.css)
   Cache bump: link as /assets/site-motion.css?v=1 (or with site.css?v=133) */

/* ---------- Fan phones: stagger fade/slide on load ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes dk-fan-in-left {
    from {
      opacity: 0;
      transform: rotate(-12deg) translateY(20px);
    }
    to {
      opacity: 1;
      transform: rotate(-12deg) translateY(8px);
    }
  }
  @keyframes dk-fan-in-center {
    from {
      opacity: 0;
      transform: rotate(0deg) translateY(14px);
    }
    to {
      opacity: 1;
      transform: rotate(0deg) translateY(0);
    }
  }
  @keyframes dk-fan-in-right {
    from {
      opacity: 0;
      transform: rotate(12deg) translateY(20px);
    }
    to {
      opacity: 1;
      transform: rotate(12deg) translateY(8px);
    }
  }

  .dk-home-fan-phone--left {
    animation: dk-fan-in-left 500ms ease both;
    animation-delay: 60ms;
  }
  .dk-home-fan-phone--center {
    animation: dk-fan-in-center 500ms ease both;
    animation-delay: 140ms;
  }
  .dk-home-fan-phone--right {
    animation: dk-fan-in-right 500ms ease both;
    animation-delay: 220ms;
  }
}

/* ---------- Module cards: light reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes dk-mod-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* CSS-only fallback: first row (~3 cards) on load when JS not present */
  html:not(.dk-motion-js) .dk-home-mod-grid > .dk-home-mod:nth-child(1),
  html:not(.dk-motion-js) .dk-home-mod-grid > .dk-home-mod:nth-child(2),
  html:not(.dk-motion-js) .dk-home-mod-grid > .dk-home-mod:nth-child(3) {
    animation: dk-mod-in 500ms ease both;
  }
  html:not(.dk-motion-js) .dk-home-mod-grid > .dk-home-mod:nth-child(1) {
    animation-delay: 80ms;
  }
  html:not(.dk-motion-js) .dk-home-mod-grid > .dk-home-mod:nth-child(2) {
    animation-delay: 160ms;
  }
  html:not(.dk-motion-js) .dk-home-mod-grid > .dk-home-mod:nth-child(3) {
    animation-delay: 240ms;
  }

  /* JS path: IntersectionObserver toggles .dk-inview */
  html.dk-motion-js .dk-home-mod {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 500ms ease,
      transform 500ms ease,
      box-shadow 180ms ease;
  }
  html.dk-motion-js .dk-home-mod.dk-inview {
    opacity: 1;
    transform: translateY(0);
  }
  /* Keep existing soft hover after reveal */
  html.dk-motion-js .dk-home-mod.dk-inview:hover {
    transform: translateY(-2px);
  }
}

/* ---------- prefers-reduced-motion: reduce ---------- */
@media (prefers-reduced-motion: reduce) {
  .dk-home-fan-phone--left,
  .dk-home-fan-phone--center,
  .dk-home-fan-phone--right,
  .dk-home-mod {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
  /* Restore static fan transforms from site.css */
  .dk-home-fan-phone--left {
    transform: rotate(-12deg) translateY(8px);
  }
  .dk-home-fan-phone--center {
    transform: rotate(0deg);
  }
  .dk-home-fan-phone--right {
    transform: rotate(12deg) translateY(8px);
  }
  html.dk-motion-js .dk-home-mod {
    opacity: 1;
    transform: none;
  }
  html.dk-motion-js .dk-home-mod:hover {
    transform: none;
  }
}

/* dk-home-mobile-v2 — spacing so fan tops don't cover .dk-hero-fine */
@media (max-width: 639px) {
  .dk-home-hero-fan { padding-block: 1.25rem 1.5rem; }
  .dk-home-hero-fan .dk-lead { font-size: .95rem; }
  .dk-home-hero-fan .dk-hero-fine {
    margin: .35rem 0 .25rem;
    position: relative;
    z-index: 2;
  }
  .dk-home-hero-fan .dk-hero-product {
    margin-top: 1.1rem;
    padding-top: .35rem;
  }
  .dk-home-fan {
    height: 210px;
    width: min(100%, 250px);
    margin-top: .25rem;
  }
  .dk-home-mod-grid { gap: 1rem; }
  /* Module card shots stay decorative on mobile — slightly taller crop area */
  .dk-home-mod-frame {
    min-height: 9.5rem;
  }
}