/* Animation modifier for .mindflow-step-card */
.mindflow-step-card--transition {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}

.mindflow-transition-fade {
  animation-name: mfFadeIn;
}

.mindflow-transition-slide-up {
  animation-name: mfSlideUp;
}

.mindflow-transition-slide-left {
  animation-name: mfSlideLeft;
}

.mindflow-transition-slide-right {
  animation-name: mfSlideRight;
}

.mindflow-transition-zoom {
  animation-name: mfZoomIn;
}

.mindflow-transition-bounce {
  animation-name: mfBounceIn;
}

.mindflow-transition-flip {
  animation-name: mfFlipIn;
}

.mindflow-transition-rotate-in {
  animation-name: mfRotateIn;
}

.mindflow-transition-blur-in {
  animation-name: mfBlurIn;
}

.mindflow-transition-swing {
  animation-name: mfSwingIn;
}

@keyframes mfFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mfSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mfSlideLeft {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes mfSlideRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes mfZoomIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mfBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.92);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mfFlipIn {
  from {
    opacity: 0;
    transform: perspective(900px) rotateY(-18deg) scale(0.96);
  }
  to {
    opacity: 1;
    transform: perspective(900px) rotateY(0deg) scale(1);
  }
}

@keyframes mfRotateIn {
  from {
    opacity: 0;
    transform: rotate(-8deg) scale(0.94);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

@keyframes mfBlurIn {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes mfSwingIn {
  0% {
    opacity: 0;
    transform: rotate(12deg);
  }
  65% {
    opacity: 1;
    transform: rotate(-4deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}

@keyframes mfScaleUp {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes mfFadeScale {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mfFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Fade Directional Variants ────────────────────────────────────────── */

.mindflow-transition-fade-up {
  animation-name: mfFadeUp;
  animation-duration: 0.4s;
}

.mindflow-transition-fade-down {
  animation-name: mfFadeDown;
  animation-duration: 0.4s;
}

.mindflow-transition-fade-left {
  animation-name: mfFadeLeft;
  animation-duration: 0.4s;
}

.mindflow-transition-fade-right {
  animation-name: mfFadeRight;
  animation-duration: 0.4s;
}

/* ── Full Slide Variants (full viewport displacement) ────────────────── */

.mindflow-transition-slide-in {
  animation-name: mfSlideInUp;
  animation-duration: 0.45s;
}

.mindflow-transition-slide-down {
  animation-name: mfSlideInDown;
  animation-duration: 0.45s;
}

/* ── Reveal Variants (clip-path reveal) ──────────────────────────────── */

.mindflow-transition-reveal {
  animation-name: mfReveal;
  animation-duration: 0.6s;
}

.mindflow-transition-progressive-reveal {
  animation-name: mfReveal;
  animation-duration: 0.7s;
}

.mindflow-transition-sequential-reveal {
  animation-name: mfReveal;
  animation-duration: 0.5s;
}

.mindflow-transition-cascading-reveal {
  animation-name: mfReveal;
  animation-duration: 0.65s;
}

.mindflow-transition-staggered-reveal {
  animation-name: mfReveal;
  animation-duration: 0.7s;
}

/* ── Entrance Variants ───────────────────────────────────────────────── */

.mindflow-transition-staggered,
.mindflow-transition-staggered-entrance,
.mindflow-transition-staggered-animation {
  animation-name: mfFadeUp;
  animation-duration: 0.5s;
}

.mindflow-transition-staggered-slide-in {
  animation-name: mfSlideInUp;
  animation-duration: 0.5s;
}

.mindflow-transition-sequential-entrance {
  animation-name: mfFadeUp;
  animation-duration: 0.45s;
}

.mindflow-transition-delayed-entrance {
  animation-name: mfFadeIn;
  animation-duration: 0.6s;
  animation-delay: 0.2s;
  opacity: 0;
}

.mindflow-transition-animated-entrance {
  animation-name: mfFadeUp;
  animation-duration: 0.45s;
}

.mindflow-transition-card-entrance {
  animation-name: mfCardEntrance;
  animation-duration: 0.4s;
}

.mindflow-transition-progressive-entrance {
  animation-name: mfFadeUp;
  animation-duration: 0.5s;
}

/* ── None (disable animation) ────────────────────────────────────────── */

.mindflow-transition-none {
  animation: none !important;
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   STAGGERED CHILD ANIMATIONS
   Question appears first → then each answer enters one by one.
   Uses style="--mf-i:N" set by renderStep() in mindflow.js.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Container: visible immediately, children handle the visual entrance ── */

.mindflow-transition-staggered,
.mindflow-transition-progressive-reveal,
.mindflow-transition-sequential-reveal,
.mindflow-transition-cascading-reveal,
.mindflow-transition-staggered-reveal,
.mindflow-transition-staggered-entrance,
.mindflow-transition-staggered-animation,
.mindflow-transition-staggered-slide-in,
.mindflow-transition-sequential-entrance,
.mindflow-transition-delayed-entrance,
.mindflow-transition-progressive-entrance {
  animation: none !important;
  opacity: 1 !important;
}

/* ── Title & description: appear first ──────────────────────────────── */

.mindflow-transition-staggered .fm-title,
.mindflow-transition-progressive-reveal .fm-title,
.mindflow-transition-sequential-reveal .fm-title,
.mindflow-transition-cascading-reveal .fm-title,
.mindflow-transition-staggered-reveal .fm-title,
.mindflow-transition-staggered-entrance .fm-title,
.mindflow-transition-staggered-animation .fm-title,
.mindflow-transition-staggered-slide-in .fm-title,
.mindflow-transition-sequential-entrance .fm-title,
.mindflow-transition-delayed-entrance .fm-title,
.mindflow-transition-progressive-entrance .fm-title,
.mindflow-transition-staggered .fm-desc,
.mindflow-transition-progressive-reveal .fm-desc,
.mindflow-transition-sequential-reveal .fm-desc,
.mindflow-transition-cascading-reveal .fm-desc,
.mindflow-transition-staggered-reveal .fm-desc,
.mindflow-transition-staggered-entrance .fm-desc,
.mindflow-transition-staggered-animation .fm-desc,
.mindflow-transition-staggered-slide-in .fm-desc,
.mindflow-transition-sequential-entrance .fm-desc,
.mindflow-transition-delayed-entrance .fm-desc,
.mindflow-transition-progressive-entrance .fm-desc {
  animation: mfFadeUp 0.35s ease 0.1s both;
}

/* ── Answers: each enters one-by-one via --mf-i stagger index ───────── */

.mindflow-transition-staggered .fm-answer,
.mindflow-transition-progressive-reveal .fm-answer,
.mindflow-transition-sequential-reveal .fm-answer,
.mindflow-transition-cascading-reveal .fm-answer,
.mindflow-transition-staggered-reveal .fm-answer,
.mindflow-transition-staggered-entrance .fm-answer,
.mindflow-transition-staggered-animation .fm-answer,
.mindflow-transition-staggered-slide-in .fm-answer,
.mindflow-transition-sequential-entrance .fm-answer,
.mindflow-transition-delayed-entrance .fm-answer,
.mindflow-transition-progressive-entrance .fm-answer,
.mindflow-transition-staggered .fm-answer-checkbox,
.mindflow-transition-progressive-reveal .fm-answer-checkbox,
.mindflow-transition-sequential-reveal .fm-answer-checkbox,
.mindflow-transition-cascading-reveal .fm-answer-checkbox,
.mindflow-transition-staggered-reveal .fm-answer-checkbox,
.mindflow-transition-staggered-entrance .fm-answer-checkbox,
.mindflow-transition-staggered-animation .fm-answer-checkbox,
.mindflow-transition-staggered-slide-in .fm-answer-checkbox,
.mindflow-transition-sequential-entrance .fm-answer-checkbox,
.mindflow-transition-delayed-entrance .fm-answer-checkbox,
.mindflow-transition-progressive-entrance .fm-answer-checkbox,
.mindflow-transition-staggered .fm-submit-multiple,
.mindflow-transition-staggered .fm-submit-text,
.mindflow-transition-progressive-reveal .fm-submit-multiple,
.mindflow-transition-progressive-reveal .fm-submit-text,
.mindflow-transition-sequential-reveal .fm-submit-multiple,
.mindflow-transition-sequential-reveal .fm-submit-text,
.mindflow-transition-cascading-reveal .fm-submit-multiple,
.mindflow-transition-cascading-reveal .fm-submit-text,
.mindflow-transition-staggered-reveal .fm-submit-multiple,
.mindflow-transition-staggered-reveal .fm-submit-text,
.mindflow-transition-staggered-entrance .fm-submit-multiple,
.mindflow-transition-staggered-entrance .fm-submit-text,
.mindflow-transition-staggered-animation .fm-submit-multiple,
.mindflow-transition-staggered-animation .fm-submit-text,
.mindflow-transition-staggered-slide-in .fm-submit-multiple,
.mindflow-transition-staggered-slide-in .fm-submit-text,
.mindflow-transition-sequential-entrance .fm-submit-multiple,
.mindflow-transition-sequential-entrance .fm-submit-text,
.mindflow-transition-delayed-entrance .fm-submit-multiple,
.mindflow-transition-delayed-entrance .fm-submit-text,
.mindflow-transition-progressive-entrance .fm-submit-multiple,
.mindflow-transition-progressive-entrance .fm-submit-text,
.mindflow-transition-staggered .fm-cta,
.mindflow-transition-progressive-reveal .fm-cta,
.mindflow-transition-sequential-reveal .fm-cta,
.mindflow-transition-cascading-reveal .fm-cta,
.mindflow-transition-staggered-reveal .fm-cta,
.mindflow-transition-staggered-entrance .fm-cta,
.mindflow-transition-staggered-animation .fm-cta,
.mindflow-transition-staggered-slide-in .fm-cta,
.mindflow-transition-sequential-entrance .fm-cta,
.mindflow-transition-delayed-entrance .fm-cta,
.mindflow-transition-progressive-entrance .fm-cta,
.mindflow-transition-staggered .fm-back,
.mindflow-transition-progressive-reveal .fm-back,
.mindflow-transition-sequential-reveal .fm-back,
.mindflow-transition-cascading-reveal .fm-back,
.mindflow-transition-staggered-reveal .fm-back,
.mindflow-transition-staggered-entrance .fm-back,
.mindflow-transition-staggered-animation .fm-back,
.mindflow-transition-staggered-slide-in .fm-back,
.mindflow-transition-sequential-entrance .fm-back,
.mindflow-transition-delayed-entrance .fm-back,
.mindflow-transition-progressive-entrance .fm-back {
  animation: mfFadeUp 0.35s ease both;
  animation-delay: calc(0.3s + var(--mf-i, 0) * 0.12s);
}

/* ── Cascading reveal: tighter cascade spacing ──────────────────────── */

.mindflow-transition-cascading-reveal .fm-answer,
.mindflow-transition-cascading-reveal .fm-answer-checkbox,
.mindflow-transition-cascading-reveal .fm-submit-multiple,
.mindflow-transition-cascading-reveal .fm-submit-text,
.mindflow-transition-cascading-reveal .fm-cta,
.mindflow-transition-cascading-reveal .fm-back {
  animation-delay: calc(0.25s + var(--mf-i, 0) * 0.08s);
}

/* ── Progressive entrance: slower cascade spacing ───────────────────── */

.mindflow-transition-progressive-entrance .fm-answer,
.mindflow-transition-progressive-entrance .fm-answer-checkbox,
.mindflow-transition-progressive-entrance .fm-submit-multiple,
.mindflow-transition-progressive-entrance .fm-submit-text,
.mindflow-transition-progressive-entrance .fm-cta,
.mindflow-transition-progressive-entrance .fm-back {
  animation-delay: calc(0.3s + var(--mf-i, 0) * 0.18s);
}

/* ── Delayed entrance: longer initial pause before children appear ──── */

.mindflow-transition-delayed-entrance .fm-title,
.mindflow-transition-delayed-entrance .fm-desc {
  animation-delay: 0.35s;
}

.mindflow-transition-delayed-entrance .fm-answer,
.mindflow-transition-delayed-entrance .fm-answer-checkbox,
.mindflow-transition-delayed-entrance .fm-submit-multiple,
.mindflow-transition-delayed-entrance .fm-submit-text,
.mindflow-transition-delayed-entrance .fm-cta,
.mindflow-transition-delayed-entrance .fm-back {
  animation-delay: calc(0.6s + var(--mf-i, 0) * 0.12s);
}

/* ══════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════════════════ */

@keyframes mfFadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mfFadeLeft {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes mfFadeRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes mfSlideInUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mfSlideInDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mfReveal {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes mfCardEntrance {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mindflow-loader-stage.is-active,
  .mindflow-stat-card,
  .mindflow-submission-card,
  .mindflow-submission-item,
  .mindflow-step-card--transition,
  .mindflow-welcome-actions .fm-start-flow,
  .mindflow-login-gate-icon {
    animation: none !important;
    transition: none !important;
  }

  .mindflow-stat-card:hover,
  .mindflow-submission-card:hover,
  .mindflow-submission-item.is-open,
  .mindflow-submission-trigger:hover,
  .mindflow-welcome-actions .fm-start-flow:hover,
  .mindflow-login-gate-icon:hover {
    transform: none !important;
  }
}