/* ==========================================================================
   preset: slide — CONTRACT.md §14
   Horizontal push feel: slides start translated 60px to the right with zero
   opacity and settle to translateX(0) / opacity 1 when active, with a slight
   content stagger so the motion reads as layered.

   Every element rule is scoped under .section-hero[data-preset="slide"].
   Keyframe names are uniquely prefixed (keyframes cannot be scoped).
   Everything is inside prefers-reduced-motion: no-preference — reduced motion
   falls back to the plain instant crossfade from style.css.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  .section-hero[data-preset="slide"] .slide {
    opacity: 0;
    visibility: hidden;
    transform: translateX(60px);
    transition: transform var(--speed, 700ms) cubic-bezier(0.22, 1, 0.36, 1),
                opacity var(--speed, 700ms) ease,
                visibility 0s linear var(--speed, 700ms);
  }

  .section-hero[data-preset="slide"] .slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: transform var(--speed, 700ms) cubic-bezier(0.22, 1, 0.36, 1),
                opacity var(--speed, 700ms) ease,
                visibility 0s;
  }

  /* the media lags slightly behind the slide box for depth */
  .section-hero[data-preset="slide"] .slide-media {
    transform: translateX(24px);
    transition: transform var(--speed, 700ms) cubic-bezier(0.22, 1, 0.36, 1) 60ms;
  }

  .section-hero[data-preset="slide"] .slide.is-active .slide-media {
    transform: translateX(0);
  }

  /* slight content stagger (title leads, buttons trail) */
  .section-hero[data-preset="slide"] .slide.is-active .slide-title {
    animation: wdt-slide-preset-in 650ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
  }

  .section-hero[data-preset="slide"] .slide.is-active .slide-subtitle {
    animation: wdt-slide-preset-in 650ms cubic-bezier(0.22, 1, 0.36, 1) 220ms both;
  }

  .section-hero[data-preset="slide"] .slide.is-active .slide-text {
    animation: wdt-slide-preset-in 650ms cubic-bezier(0.22, 1, 0.36, 1) 340ms both;
  }

  .section-hero[data-preset="slide"] .slide.is-active .btn,
  .section-hero[data-preset="slide"] .slide.is-active .btn-row {
    animation: wdt-slide-preset-in 650ms cubic-bezier(0.22, 1, 0.36, 1) 460ms both;
  }

  @keyframes wdt-slide-preset-in {
    from {
      opacity: 0;
      transform: translateX(-28px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

/* Reduced motion: content visible, no transforms */
.section-hero[data-preset="slide"] .slide-title,
.section-hero[data-preset="slide"] .slide-subtitle,
.section-hero[data-preset="slide"] .slide-text,
.section-hero[data-preset="slide"] .btn {
  opacity: 1;
}