/**
 * ASC360 homepage-only motion (Phase 1). Scoped to body[data-page="home"].
 * Rollback: remove this file + home-motion.js from index.html.
 */

body[data-page="home"] {
  --home-motion-fast: 180ms;
  --home-motion-base: 320ms;
  --home-motion-slow: 520ms;
  --home-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --home-motion-stagger: 70ms;
  --home-hover-lift: -3px;
}

/* —— Header scroll polish —— */
body[data-page="home"] .site-header {
  transition:
    box-shadow var(--home-motion-base) var(--home-motion-ease),
    border-color var(--home-motion-base) var(--home-motion-ease);
}
body[data-page="home"] .site-header.is-scrolled {
  border-bottom-color: transparent;
  box-shadow: 0 10px 32px -12px rgba(11, 27, 46, 0.12);
}

/* —— Hero: surrounding polish only (typewriter untouched) —— */
body[data-page="home"] .hero__how,
body[data-page="home"] .hero__spotlight-link {
  transition:
    transform var(--home-motion-fast) var(--home-motion-ease),
    border-color var(--home-motion-fast) ease,
    background-color var(--home-motion-fast) ease,
    color var(--home-motion-fast) ease;
}
@media (hover: hover) {
  body[data-page="home"] .hero__how:hover,
  body[data-page="home"] .hero__spotlight-link:hover {
    transform: translateY(var(--home-hover-lift));
  }
}
body[data-page="home"] .hero__media {
  will-change: transform;
  transition: transform var(--home-motion-slow) var(--home-motion-ease);
}

/* —— Stagger groups —— */
body[data-page="home"] [data-home-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--home-motion-base) var(--home-motion-ease),
    transform var(--home-motion-base) var(--home-motion-ease);
  transition-delay: calc(var(--home-i, 0) * var(--home-motion-stagger));
}
body[data-page="home"] [data-home-stagger].is-home-stagger-visible > * {
  opacity: 1;
  transform: none;
}

/* —— Finder match rows —— */
body[data-page="home"] .match {
  transition:
    background-color var(--home-motion-fast) ease,
    transform var(--home-motion-fast) var(--home-motion-ease);
}
@media (hover: hover) {
  body[data-page="home"] .match:hover {
    transform: translateX(4px);
    background-color: rgba(255, 92, 0, 0.04);
  }
  body[data-page="home"] .match:hover img {
    transform: scale(1.04);
  }
}
body[data-page="home"] .match img {
  transition: transform var(--home-motion-slow) var(--home-motion-ease);
}

/* —— Journey steps —— */
body[data-page="home"] .journey-stepper .journey li {
  transition: none;
}

/* —— Package grid entrance (class added by home-motion.js) —— */
body[data-page="home"] #pkg-grid.is-home-grid-entered .pkg {
  animation: home-pkg-enter 0.7s var(--home-motion-ease) both;
  animation-delay: calc(var(--home-i, 0) * 110ms);
}
@keyframes home-pkg-enter {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* —— Story cards —— */
body[data-page="home"] .story-list li,
body[data-page="home"] .story-feature {
  transition:
    transform var(--home-motion-base) var(--home-motion-ease),
    box-shadow var(--home-motion-base) var(--home-motion-ease);
}
body[data-page="home"] .story-feature__img img,
body[data-page="home"] .story-list li img {
  transition: transform var(--home-motion-slow) var(--home-motion-ease);
}
@media (hover: hover) {
  body[data-page="home"] .story-list li:hover,
  body[data-page="home"] .story-feature:hover {
    transform: translateY(var(--home-hover-lift));
    box-shadow: 0 20px 40px -22px rgba(11, 27, 46, 0.22);
  }
  body[data-page="home"] .story-list li:hover img,
  body[data-page="home"] .story-feature:hover .story-feature__img img {
    transform: scale(1.05);
  }
}

/* —— Field story media (Ken Burns settle on panel swap) —— */
body[data-page="home"] .field-stories__media {
  overflow: hidden;
}
body[data-page="home"] .field-stories__media img {
  transition: transform 0.45s var(--motion-ease-media, var(--home-motion-ease));
}
body[data-page="home"] .field-stories__panel:not([hidden]) .field-stories__media img {
  animation: home-media-in 0.85s var(--motion-ease-media, var(--home-motion-ease)) both;
}
@keyframes home-media-in {
  from {
    opacity: 0;
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Final CTA image — settle when section reveal lands */
body[data-page="home"] .final__img {
  overflow: hidden;
}
body[data-page="home"] .final__img img {
  transition: transform 0.5s var(--motion-ease-media, var(--home-motion-ease));
}
html.js body[data-page="home"][data-premium-motion] .final__img[data-home-reveal]:not(.is-home-revealed) img {
  opacity: 0.85;
  transform: scale(1.08);
}
html.js body[data-page="home"][data-premium-motion] .final__img[data-home-reveal].is-home-revealed img {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.9s var(--motion-ease-media, var(--home-motion-ease)),
    transform 1.05s var(--motion-ease-media, var(--home-motion-ease));
}

/* —— Credibility stat cards (hover only) —— */
@media (hover: hover) {
  body[data-page="home"] #credibility .credibility__stat-card {
    transition:
      transform var(--home-motion-fast) var(--home-motion-ease),
      border-color var(--home-motion-fast) ease,
      box-shadow var(--home-motion-fast) ease;
  }
  body[data-page="home"] #credibility .credibility__stat-card:hover {
    transform: translateY(var(--home-hover-lift));
  }
}

/* —— FAQ details —— */
body[data-page="home"] .faq details summary {
  transition: color var(--home-motion-fast) ease;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] [data-home-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body[data-page="home"] #pkg-grid.is-home-grid-entered .pkg {
    animation: none !important;
  }
  body[data-page="home"] .field-stories__panel:not([hidden]) .field-stories__media img {
    animation: none !important;
  }
  body[data-page="home"] .hero__media {
    transform: none !important;
    transition: none !important;
  }
}