/* view & step transition animations */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-slide-up {
  from { opacity: 0; transform: translateY(0.25rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* section-level entrance — only on page transitions */
[data-animate] > *:not(.story-modal) {
  animation: fade-slide-up 180ms ease-out both;
}

[data-animate] > *:not(.story-modal):nth-child(2) { animation-delay: 40ms; }
[data-animate] > *:not(.story-modal):nth-child(3) { animation-delay: 80ms; }

/* editor step entrance — only on page transitions */
[data-animate] .editor-step {
  animation: fade-slide-up 150ms ease-out both;
}

/* progress bar pills stagger — only on page transitions */
[data-animate] .editor-progress__step {
  animation: fade-in 180ms ease-out both;
}

[data-animate] .editor-progress__step:nth-child(2) { animation-delay: 30ms; }
[data-animate] .editor-progress__step:nth-child(3) { animation-delay: 60ms; }
[data-animate] .editor-progress__step:nth-child(4) { animation-delay: 90ms; }
[data-animate] .editor-progress__step:nth-child(5) { animation-delay: 120ms; }
[data-animate] .editor-progress__step:nth-child(6) { animation-delay: 150ms; }
[data-animate] .editor-progress__step:nth-child(7) { animation-delay: 180ms; }

/* modal entrance */
.story-modal.is-open .story-modal__backdrop {
  animation: fade-in 200ms ease-out both;
}

.story-modal.is-open .story-modal__dialog {
  animation: scale-in 250ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* settings & dna panels stagger — only on page transitions */
[data-animate] .settings-grid > * {
  animation: fade-slide-up 240ms ease-out both;
}

[data-animate] .settings-grid > *:nth-child(2) { animation-delay: 50ms; }
[data-animate] .settings-grid > *:nth-child(3) { animation-delay: 100ms; }
[data-animate] .settings-grid > *:nth-child(4) { animation-delay: 150ms; }
[data-animate] .settings-grid > *:nth-child(5) { animation-delay: 200ms; }

[data-animate] .dna-grid > * {
  animation: fade-slide-up 240ms ease-out both;
}

[data-animate] .dna-grid > *:nth-child(2) { animation-delay: 60ms; }

/* dashboard rows stagger — only on page transitions */
[data-animate] .story-table__body > * {
  animation: fade-slide-up 200ms ease-out both;
}

[data-animate] .story-table__body > *:nth-child(2) { animation-delay: 40ms; }
[data-animate] .story-table__body > *:nth-child(3) { animation-delay: 80ms; }
[data-animate] .story-table__body > *:nth-child(4) { animation-delay: 120ms; }
[data-animate] .story-table__body > *:nth-child(5) { animation-delay: 160ms; }

/* choice cards stagger — only on page transitions */
[data-animate] .editor-choice-list > *,
[data-animate] .editor-choice-grid > * {
  animation: fade-in 200ms ease-out both;
}

[data-animate] .editor-choice-list > *:nth-child(2),
[data-animate] .editor-choice-grid > *:nth-child(2) { animation-delay: 30ms; }

[data-animate] .editor-choice-list > *:nth-child(3),
[data-animate] .editor-choice-grid > *:nth-child(3) { animation-delay: 60ms; }

[data-animate] .editor-choice-list > *:nth-child(4),
[data-animate] .editor-choice-grid > *:nth-child(4) { animation-delay: 90ms; }

[data-animate] .editor-choice-list > *:nth-child(5),
[data-animate] .editor-choice-grid > *:nth-child(5) { animation-delay: 120ms; }

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}