/* ============================================================
   AUTH PAGES — Animations et styles spécifiques
   ============================================================ */

/* Entrance animation for auth forms */
@keyframes authFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Wizard step transitions */
@keyframes wizardStepIn {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes wizardStepOut {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(-16px) scale(0.98); }
}

/* Orb floating animation for auth value panel */
@keyframes orbFloat {
    0%, 100% { transform: translate(30%, -30%) scale(1); }
    50%       { transform: translate(30%, -30%) scale(1.12) rotate(12deg); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translate(-20%, 20%) scale(1); }
    50%       { transform: translate(-20%, 20%) scale(1.08) rotate(-8deg); }
}

@keyframes orbFloat3 {
    0%, 100% { transform: translate(-50%, 50%) scale(1); }
    50%       { transform: translate(-50%, 50%) scale(1.15); }
}

/* Pill selection feedback */
@keyframes pillPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Staggered form entrance */
.auth-animate   { animation: authFadeUp 0.45s ease both; }
.auth-animate-1 { animation: authFadeUp 0.45s ease 0.06s  both; }
.auth-animate-2 { animation: authFadeUp 0.45s ease 0.12s  both; }
.auth-animate-3 { animation: authFadeUp 0.45s ease 0.18s  both; }
.auth-animate-4 { animation: authFadeUp 0.45s ease 0.24s  both; }
.auth-animate-5 { animation: authFadeUp 0.45s ease 0.30s  both; }
.auth-animate-6 { animation: authFadeUp 0.45s ease 0.36s  both; }

/* Wizard step transitions (applied by Stimulus) */
.wizard-step-enter   { animation: wizardStepIn   0.28s ease both; }
.wizard-step-back    { animation: wizardStepBack  0.28s ease both; }
.wizard-step-exiting {
    animation: wizardStepOut 0.18s ease forwards;
    pointer-events: none;
}

/* Shimmer slide for accent strip */
@keyframes shimmerSlide {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

/* Pill selection pop */
.wizard-pill-pop { animation: pillPop 0.2s ease both; }

.wizard-accent-strip {
    height: 3px;
    background: linear-gradient(90deg,
        var(--color-gradient-start) 0%,
        var(--color-gradient-end)   50%,
        var(--color-gradient-start) 100%
    );
    background-size: 200% 100%;
    animation: shimmerSlide 3s linear infinite;
}