/* static/css/funnel/transitions.css */

/* ═══════════════════════════════════════════════════════════
   Funnel Step Transitions
   
   Three modes controlled by test_slug.transition_type:
     slide_left | fade | flip
   ═══════════════════════════════════════════════════════════ */

/* ── Base: steps are absolutely positioned inside .funnel-stage ── */
.funnel-stage {
    perspective: 1000px;       /* Needed for flip */
}

.funnel-stage > .step-card {
    transition: transform 0.4s var(--pf-ease), opacity 0.4s var(--pf-ease);
    will-change: transform, opacity;
}

/* ═════════════════════════════
   SLIDE LEFT
   ═════════════════════════════ */

/* Incoming: starts off-screen right */
.step-enter-right {
    transform: translateX(80px);
    opacity: 0;
}

/* Outgoing: exits to the left */
.step-exit-left {
    transform: translateX(-80px);
    opacity: 0;
    pointer-events: none;
}

/* Active state */
.step-active {
    transform: translateX(0);
    opacity: 1;
}

/* ═════════════════════════════
   FADE
   ═════════════════════════════ */

.step-fade-enter {
    opacity: 0;
    transform: scale(0.97);
}

.step-fade-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.35s var(--pf-ease), transform 0.35s var(--pf-ease);
}

.step-fade-exit {
    opacity: 0;
    transform: scale(0.97);
    pointer-events: none;
    transition: opacity 0.3s var(--pf-ease), transform 0.3s var(--pf-ease);
}

/* ═════════════════════════════
   FLIP (3D card)
   ═════════════════════════════ */

.flip-active {
    animation: flipCard 0.6s var(--pf-ease);
}

@keyframes flipCard {
    0%   { transform: rotateY(0deg);   opacity: 1; }
    45%  { transform: rotateY(90deg);  opacity: 0.5; }
    55%  { transform: rotateY(90deg);  opacity: 0.5; }
    100% { transform: rotateY(0deg);   opacity: 1; }
}

/* ═════════════════════════════
   Reduced motion: respect user preference
   ═════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .funnel-stage > .step-card,
    .step-enter-right,
    .step-exit-left,
    .step-active,
    .step-fade-enter,
    .step-fade-active,
    .step-fade-exit {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
    
    .flip-active {
        animation: none !important;
    }
}