/* Home page motion — varied per section; respects prefers-reduced-motion */

@media (prefers-reduced-motion: reduce) {
  [data-home-motion],
  .home-stagger-item,
  .js-home-spotlight-slide.is-spotlight-active {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* ——— Headers / blocks (hidden until .is-visible) ——— */
  [data-home-motion="hero"]:not(.is-visible),
  [data-home-motion="reveal"]:not(.is-visible),
  [data-home-motion="reveal-left"]:not(.is-visible),
  [data-home-motion="reveal-right"]:not(.is-visible),
  [data-home-motion="reveal-fade"]:not(.is-visible),
  [data-home-motion="reveal-scale"]:not(.is-visible) {
    opacity: 0;
    will-change: opacity, transform;
  }

  [data-home-motion="hero"]:not(.is-visible),
  [data-home-motion="reveal"]:not(.is-visible) {
    transform: translate3d(0, 36px, 0);
  }

  [data-home-motion="reveal-left"]:not(.is-visible) {
    transform: translate3d(-72px, 0, 0);
  }

  [data-home-motion="reveal-right"]:not(.is-visible) {
    transform: translate3d(72px, 0, 0);
  }

  [data-home-motion="reveal-fade"]:not(.is-visible) {
    transform: none;
  }

  [data-home-motion="reveal-scale"]:not(.is-visible) {
    transform: scale(0.94) translate3d(0, 20px, 0);
  }

  [data-home-motion="hero"],
  [data-home-motion="reveal"],
  [data-home-motion="reveal-left"],
  [data-home-motion="reveal-right"],
  [data-home-motion="reveal-fade"],
  [data-home-motion="reveal-scale"] {
    transition:
      opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
      transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
  }

  [data-home-motion="hero"].is-visible,
  [data-home-motion="reveal"].is-visible,
  [data-home-motion="reveal-left"].is-visible,
  [data-home-motion="reveal-right"].is-visible,
  [data-home-motion="reveal-fade"].is-visible,
  [data-home-motion="reveal-scale"].is-visible {
    opacity: 1;
    transform: none;
  }

  /* ——— Stagger cards (capabilities-style soft pop) ——— */
  [data-home-motion^="stagger"] .home-stagger-item {
    transition:
      opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
      transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform;
  }

  /* Hidden states — only when parent lacks .is-visible */
  [data-home-motion^="stagger"]:not(.is-visible) .home-stagger-item {
    opacity: 0;
  }

  [data-home-motion="stagger"]:not(.is-visible) .home-stagger-item {
    transform: translate3d(0, 24px, 0);
  }

  [data-home-motion="stagger-sides"]:not(.is-visible) .home-stagger-item {
    transform: translate3d(0, 20px, 0);
  }

  [data-home-motion="stagger-sides"]:not(.is-visible) .home-stagger-item.from-left {
    transform: translate3d(-72px, 0, 0);
  }

  [data-home-motion="stagger-sides"]:not(.is-visible) .home-stagger-item.from-right {
    transform: translate3d(72px, 0, 0);
  }

  /* Same feel as Home “4 Năng Lực” cards */
  [data-home-motion="stagger-scale"]:not(.is-visible) .home-stagger-item {
    transform: scale(0.92) translate3d(0, 22px, 0);
  }

  [data-home-motion="stagger-rise"]:not(.is-visible) .home-stagger-item {
    transform: translate3d(0, 36px, 0);
  }

  [data-home-motion="stagger-zigzag"]:not(.is-visible) .home-stagger-item:nth-child(odd) {
    transform: translate3d(-56px, 12px, 0);
  }

  [data-home-motion="stagger-zigzag"]:not(.is-visible) .home-stagger-item:nth-child(even) {
    transform: translate3d(56px, 12px, 0);
  }

  /* Visible — always wins (no competing transform rules) */
  [data-home-motion^="stagger"].is-visible .home-stagger-item {
    opacity: 1;
    transform: none;
  }

  .home-page .group:hover .home-card-lift,
  .page-motion .group:hover .home-card-lift {
    transform: translateY(-3px);
  }

  .home-card-lift {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
  }

  @keyframes homeSpotlightEnter {
    from {
      opacity: 0;
      transform: translate3d(20px, 0, 0) scale(0.97);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }
  }

  .js-home-spotlight-slide.is-spotlight-active {
    animation: homeSpotlightEnter 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  }
}