/**
 * /newclient/assets/wizard-transitions.css
 *
 * Shared animation layer for the LeaseRenewals onboarding wizard.
 * Included on every wizard page (new.php, Path A, Path B) so transitions
 * feel consistent as prospects navigate through the flow.
 *
 * Design goals:
 *   * Content fades in and rises slightly on page load (feels premium)
 *   * Progress bar fills left-to-right on load rather than snapping
 *   * Page fades out briefly on navigation for smooth handoff
 *   * Fully respects prefers-reduced-motion (accessibility)
 */

/* ---------- Page-level entry ---------- */
/* Base state: page starts slightly faded and offset, then animates in */
body.wizard-page {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 380ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.wizard-page.ready {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Page-level exit (triggered by JS on navigation) ---------- */
body.wizard-page.leaving {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 220ms ease-out, transform 220ms ease-out;
}

/* ---------- Staggered content reveal ---------- */
/* Each child of .wizard-container fades/rises in with a small delay
   relative to its siblings, creating a cascading effect. */
.wizard-container > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.wizard-page.ready .wizard-container > *:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 80ms;
}
body.wizard-page.ready .wizard-container > *:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 160ms;
}
body.wizard-page.ready .wizard-container > *:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 240ms;
}
body.wizard-page.ready .wizard-container > *:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 320ms;
}
body.wizard-page.ready .wizard-container > *:nth-child(5) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 400ms;
}
body.wizard-page.ready .wizard-container > *:nth-child(n+6) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 480ms;
}

/* ---------- Animated progress bar ---------- */
/* The completed-line (green) grows from 0 to its target width on load. */
.wizard-progress::after {
    width: 0 !important;
    transition: width 700ms cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 500ms; /* starts after content is settling */
}
body.wizard-page.ready .wizard-progress::after {
    /* Each page overrides --progress-fill to set its own target width */
    width: var(--progress-fill, 0) !important;
}

/* Active step dot gets a subtle pulse on load to draw the eye */
@keyframes stepDotPulse {
    0%   { box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35); }
    50%  { box-shadow: 0 4px 22px rgba(102, 126, 234, 0.55); }
    100% { box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35); }
}
body.wizard-page.ready .wizard-step.active .wizard-step-dot {
    animation: stepDotPulse 1400ms ease-in-out 900ms 1;
}

/* ---------- Reduced motion — disable everything ---------- */
@media (prefers-reduced-motion: reduce) {
    body.wizard-page,
    body.wizard-page.ready,
    body.wizard-page.leaving,
    .wizard-container > *,
    body.wizard-page.ready .wizard-container > *,
    .wizard-progress::after,
    body.wizard-page.ready .wizard-progress::after {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        transition-delay: 0ms !important;
    }
    body.wizard-page.ready .wizard-progress::after {
        width: var(--progress-fill, 0) !important;
    }
}