/* Motion: entrance animations and scroll-driven reveals.
   Scroll reveals use CSS scroll timelines (progressive enhancement):
   browsers without support simply show the content. */

@keyframes dp-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes dp-in {
  from { opacity: 0; transform: translateX(40px) perspective(1400px) rotateY(-10deg); }
  to { opacity: 1; transform: perspective(1400px) rotateY(-6deg); }
}

@keyframes dp-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes dp-reveal {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes dp-light {
  from { background: #1A1D4A; color: var(--muted); box-shadow: none; }
  to { background: var(--primary); color: var(--text); box-shadow: 0 0 0 8px rgba(96, 66, 246, 0.18); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__title { animation: dp-up 0.6s ease both; }
  .hero__lead { animation: dp-up 0.6s 0.12s ease both; }
  .hero__ctas { animation: dp-up 0.6s 0.24s ease both; }

  .mock--dash {
    transform: perspective(1400px) rotateY(-6deg);
    animation: dp-in 0.9s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .channel__bar {
    animation: dp-grow 1.1s 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: dp-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }

    .reveal--2 {
      animation-range: entry 10% entry 55%;
    }

    .reveal--3 {
      animation-range: entry 20% entry 70%;
    }

    .steps__line {
      animation: dp-grow linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 55%;
    }

    .step__num--2 {
      animation: dp-light linear both;
      animation-timeline: view();
      animation-range: entry 60% cover 45%;
    }

    .step__num--3 {
      animation: dp-light linear both;
      animation-timeline: view();
      animation-range: entry 70% cover 55%;
    }
  }
}

/* Tilted mockup only where there is room for it */
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .mock--dash {
    transform: none;
    animation: dp-up 0.6s 0.3s ease both;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}