/* ==========================================================================
   Storytelling Choreography V1 — Homepage (Phase 9.3)
   Dedicated motion profiles · scoped under html.wml-story
   GPU: opacity + transform only · max 16px · max scale 1.02
   ========================================================================== */

html.wml-story {
  --motion-stagger-step: 60ms;
  --motion-stagger-max: 480ms;

  /* Sequence rhythm */
  --motion-story-seq-gap: 88ms;

  /* Profile distances (≤16px) */
  --motion-story-eyebrow-y: 8px;
  --motion-story-heading-y: 14px;
  --motion-story-desc-y: 12px;
  --motion-story-content-y: 12px;
  --motion-story-image-y: 14px;
  --motion-story-card-y: 12px;
  --motion-story-card-y-alt: 10px;
  --motion-story-stat-y: 8px;
  --motion-story-cta-y: 6px;
  --motion-story-form-y: 10px;
  --motion-story-footer-y: 12px;

  /* Profile scales (≤1.02 start) */
  --motion-story-heading-scale: 0.992;
  --motion-story-content-scale: 0.992;
  --motion-story-image-scale: 1.02;
  --motion-story-card-scale: 0.988;
  --motion-story-card-scale-alt: 0.985;

  /* Profile durations */
  --motion-story-eyebrow-duration: 380ms;
  --motion-story-heading-duration: 560ms;
  --motion-story-desc-duration: 480ms;
  --motion-story-content-duration: 520ms;
  --motion-story-image-duration: 720ms;
  --motion-story-card-duration: 500ms;
  --motion-story-card-duration-alt: 540ms;
  --motion-story-stat-duration: 440ms;
  --motion-story-cta-duration: 400ms;
  --motion-story-form-duration: 480ms;
  --motion-story-footer-duration: 560ms;
}

/* --- Sequence children (header / CTA choreography) --- */

html.wml-story .motion-story-seq {
  --motion-item-delay: calc(var(--motion-story-seq-index, 0) * var(--motion-story-seq-gap));
}

/* --- Section header: Eyebrow --- */

html.wml-story .motion-story-eyebrow {
  --motion-item-duration: var(--motion-story-eyebrow-duration);
  --motion-item-ease: var(--motion-ease-entrance);
}

html.wml-active.wml-story .motion-story-eyebrow.motion-is-pending {
  transform: translate3d(0, var(--motion-story-eyebrow-y), 0);
}

html.wml-active.wml-story .motion-story-eyebrow.motion-is-visible {
  transform: translate3d(0, 0, 0);
}

/* --- Section header: Heading --- */

html.wml-story .motion-story-heading {
  --motion-item-duration: var(--motion-story-heading-duration);
  --motion-item-ease: var(--motion-ease-emphasized);
}

html.wml-active.wml-story .motion-story-heading.motion-is-pending {
  transform: translate3d(0, var(--motion-story-heading-y), 0) scale(var(--motion-story-heading-scale));
  transform-origin: top left;
}

html.wml-active.wml-story .motion-story-heading.motion-is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

/* --- Section header: Description --- */

html.wml-story .motion-story-desc {
  --motion-item-duration: var(--motion-story-desc-duration);
  --motion-item-ease: var(--motion-ease-entrance);
}

html.wml-active.wml-story .motion-story-desc.motion-is-pending {
  transform: translate3d(0, var(--motion-story-desc-y), 0);
}

html.wml-active.wml-story .motion-story-desc.motion-is-visible {
  transform: translate3d(0, 0, 0);
}

/* --- Content block --- */

html.wml-story .motion-story-content {
  --motion-item-duration: var(--motion-story-content-duration);
  --motion-item-ease: var(--motion-ease-entrance);
}

html.wml-active.wml-story .motion-story-content.motion-is-pending {
  transform: translate3d(0, var(--motion-story-content-y), 0) scale(var(--motion-story-content-scale));
  transform-origin: top left;
}

html.wml-active.wml-story .motion-story-content.motion-is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

/* --- Image settling (opacity + translateY + tiny scale) --- */

html.wml-story .motion-story-image {
  --motion-item-duration: var(--motion-story-image-duration);
  --motion-item-ease: var(--motion-ease-soft);
}

html.wml-active.wml-story .motion-story-image.motion-is-pending {
  transform: translate3d(0, var(--motion-story-image-y), 0) scale(var(--motion-story-image-scale));
  transform-origin: center center;
}

html.wml-active.wml-story .motion-story-image.motion-is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

/* --- Cards (subtle variation) --- */

html.wml-story .motion-story-card {
  --motion-item-duration: var(--motion-story-card-duration);
  --motion-item-ease: var(--motion-ease-entrance);
}

html.wml-active.wml-story .motion-story-card.motion-is-pending {
  transform: translate3d(0, var(--motion-story-card-y), 0) scale(var(--motion-story-card-scale));
}

html.wml-active.wml-story .motion-story-card.motion-is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

html.wml-story .motion-story-card:nth-child(3n + 2) {
  --motion-item-duration: var(--motion-story-card-duration-alt);
  --motion-story-card-y: var(--motion-story-card-y-alt);
  --motion-story-card-scale: var(--motion-story-card-scale-alt);
}

html.wml-story .motion-story-card:nth-child(4n + 3) {
  --motion-item-ease: var(--motion-ease-soft);
}

html.wml-story .motion-story-card:nth-child(5n + 4) {
  --motion-story-card-y: 14px;
}

/* --- Statistics / feature items --- */

html.wml-story .motion-story-stat {
  --motion-item-duration: var(--motion-story-stat-duration);
  --motion-item-ease: var(--motion-ease-entrance);
}

html.wml-active.wml-story .motion-story-stat.motion-is-pending {
  transform: translate3d(0, var(--motion-story-stat-y), 0);
}

html.wml-active.wml-story .motion-story-stat.motion-is-visible {
  transform: translate3d(0, 0, 0);
}

/* --- CTA (always last in section sequence) --- */

html.wml-story .motion-story-cta {
  --motion-item-duration: var(--motion-story-cta-duration);
  --motion-item-ease: var(--motion-ease-entrance);
}

html.wml-active.wml-story .motion-story-cta.motion-is-pending {
  transform: translate3d(0, var(--motion-story-cta-y), 0);
}

html.wml-active.wml-story .motion-story-cta.motion-is-visible {
  transform: translate3d(0, 0, 0);
}

/* --- Form panel --- */

html.wml-story .motion-story-form {
  --motion-item-duration: var(--motion-story-form-duration);
  --motion-item-ease: var(--motion-ease-soft);
}

html.wml-active.wml-story .motion-story-form.motion-is-pending {
  transform: translate3d(0, var(--motion-story-form-y), 0) scale(var(--motion-story-content-scale));
  transform-origin: top center;
}

html.wml-active.wml-story .motion-story-form.motion-is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

/* --- Footer (calm upward reveal) --- */

html.wml-story .motion-story-footer {
  --motion-item-duration: var(--motion-story-footer-duration);
  --motion-item-ease: var(--motion-ease-natural);
}

html.wml-active.wml-story .motion-story-footer.motion-is-pending {
  transform: translate3d(0, var(--motion-story-footer-y), 0);
}

html.wml-active.wml-story .motion-story-footer.motion-is-visible {
  transform: translate3d(0, 0, 0);
}

/* --- Divider (subtle connector between story beats) --- */

html.wml-story .motion-story-divider {
  --motion-item-duration: 360ms;
  --motion-item-ease: var(--motion-ease-soft);
}

html.wml-active.wml-story .motion-story-divider.motion-is-pending {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
}

html.wml-active.wml-story .motion-story-divider.motion-is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* --- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  html.wml-story .motion-item,
  html.wml-story .motion-item.motion-is-pending,
  html.wml-story .motion-item.motion-is-visible {
    opacity: var(--motion-opacity-visible) !important;
    transform: none !important;
    transition: none !important;
    pointer-events: auto !important;
  }
}