/* ============================================================
   MOTION CHOREOGRAPHY
   Stagger animations, scroll-reveal, hover effects
   ============================================================ */

@layer components {

  /* ===== HERO STAGGER (initial reveal) ===== */
  .ds-hero__content > * {
    opacity: 0;
    transform: translateY(16px);
    animation: ds-stagger-in 700ms var(--ease-out) forwards;
  }
  .ds-hero__content > *:nth-child(1) { animation-delay: 80ms; }
  .ds-hero__content > *:nth-child(2) { animation-delay: 180ms; }
  .ds-hero__content > *:nth-child(3) { animation-delay: 280ms; }
  .ds-hero__content > *:nth-child(4) { animation-delay: 380ms; }
  .ds-hero__content > *:nth-child(5) { animation-delay: 480ms; }

  .ds-hero__media {
    opacity: 0;
    transform: scale(0.96) translateX(20px);
    animation: ds-hero-media-in 900ms var(--ease-out) 200ms forwards;
  }

  @keyframes ds-stagger-in {
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes ds-hero-media-in {
    to { opacity: 1; transform: scale(1) translateX(0); }
  }

  /* ===== SCROLL REVEAL (sections + cards) ===== */
  .ds-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 700ms var(--ease-out),
      transform 700ms var(--ease-out);
  }
  .ds-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger children when parent reveals */
  .ds-reveal-stack > * {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 600ms var(--ease-out),
      transform 600ms var(--ease-out);
  }
  .ds-reveal-stack.is-visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
  .ds-reveal-stack.is-visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 100ms; }
  .ds-reveal-stack.is-visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 200ms; }
  .ds-reveal-stack.is-visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 300ms; }
  .ds-reveal-stack.is-visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
  .ds-reveal-stack.is-visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 500ms; }

  /* ===== HOVER POLISH ===== */
  .ds-hero__media {
    transition: transform 600ms var(--ease-out);
  }
  .ds-hero__media:hover {
    transform: scale(1.015);
  }

  /* Number counter in stats */
  .ds-hero__proof strong {
    transition: color 200ms var(--ease-out);
  }
  .ds-hero__proof div:hover strong {
    color: var(--brand-primary);
  }

  /* Card lift on hover - smooth */
  .ds-card--hoverable {
    transition:
      border-color 240ms var(--ease-out),
      box-shadow 240ms var(--ease-out),
      transform 240ms var(--ease-out);
  }

  /* Brand-mark gentle spin on hover */
  .ds-brand:hover .ds-brand__mark {
    transform: rotate(-6deg) scale(1.04);
    transition: transform 320ms var(--ease-out);
  }
  .ds-brand .ds-brand__mark {
    transition: transform 320ms var(--ease-out);
  }

  /* Button shine effect on primary hover */
  .ds-btn--primary {
    position: relative;
    overflow: hidden;
  }
  .ds-btn--primary::before {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.18),
      transparent
    );
    transition: left 600ms var(--ease-out);
  }
  .ds-btn--primary:hover::before {
    left: 100%;
  }

  /* ===== SCROLL PROGRESS BAR (top) ===== */
  .ds-scroll-progress {
    position: fixed;
    top: 0; left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--green-400), var(--brand-primary));
    z-index: var(--z-toast);
    transition: width 60ms linear;
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
  }
}

/* Reduced motion: kill all stagger/reveal */
@media (prefers-reduced-motion: reduce) {
  .ds-hero__content > *,
  .ds-hero__media,
  .ds-reveal,
  .ds-reveal-stack > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}