/* ============================================================================
   SKILLSDECODER STORYBOARD ANIMATIONS
   ============================================================================

   STORYBOARD: Landing Page Entrance
   ================================

   Frame 1 (0ms):     [      ] Hero hidden
   Frame 2 (300ms):   [======] Hero fades in
   Frame 3 (400ms):   [=] Features column 1 starts
   Frame 4 (500ms):   [==] Features column 2 starts
   Frame 5 (600ms):   [===] Access section starts with emphasis
   Frame 6 (1000ms):  [======] All visible, Access has scale pulse


   STORYBOARD: Form Step Transitions
   =================================

   Frame 1 (0ms):     [STEP N  ] Current step visible
   Frame 2 (200ms):   [        ] Current step fades out
   Frame 3 (300ms):   [===     ] Progress indicator animates
   Frame 4 (400ms):   [  STEP N+1] New step slides in from right
   Frame 5 (600ms):   [STEP N+1 ] New step fully visible


   STORYBOARD: Loading State Messages
   ==================================

   Frame 1 (0-3s):    "Analyzing your experience..."
   Frame 2 (3-6s):    "Matching skills to job requirements..."
   Frame 3 (6-9s):    "Crafting your documents..."
   Frame 4 (9-12s):   "Almost there..."
   [Loop back to Frame 1]


   STORYBOARD: Results Celebration
   ===============================

   Frame 1 (0ms):     [    ] Results hidden
   Frame 2 (100ms):   [  . ] Scale from 0.9, opacity 0
   Frame 3 (400ms):   [ .. ] Scale at 1.02 (overshoot)
   Frame 4 (600ms):   [....] Scale settles to 1.0
   Frame 5 (800ms):   Confetti particles appear

   ============================================================================ */

/* ============================================================================
   TIMING CONSTANTS
   ============================================================================ */
:root {
    /* Landing page entrance timing */
    --anim-hero-duration: 300ms;
    --anim-hero-delay: 0ms;
    --anim-features-duration: 400ms;
    --anim-features-stagger: 100ms;
    --anim-access-delay: 600ms;
    --anim-access-duration: 500ms;

    /* Form step transition timing */
    --anim-step-fadeout: 200ms;
    --anim-progress-update: 300ms;
    --anim-step-slidein: 400ms;

    /* Loading message rotation */
    --anim-loading-message-interval: 3s;

    /* Results celebration */
    --anim-results-duration: 600ms;
    --anim-confetti-duration: 2s;

    /* Spring easing for natural motion */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* ============================================================================
   ELEMENT CONFIGS (scales, transforms, opacity states)
   ============================================================================ */

/* Initial hidden states for landing page animation */
.landing-page.animate-entrance .landing-hero {
    opacity: 0;
    transform: translateY(-20px);
}

.landing-page.animate-entrance .landing-features {
    opacity: 0;
    transform: translateX(-30px);
}

.landing-page.animate-entrance .landing-for-who {
    opacity: 0;
    transform: translateY(30px);
}

.landing-page.animate-entrance .landing-access {
    opacity: 0;
    transform: translateX(30px) scale(0.95);
}

/* ============================================================================
   STAGE 1: LANDING PAGE ENTRANCE ANIMATION
   ============================================================================ */

/* Triggered state - hero fades in first */
.landing-page.entrance-active .landing-hero {
    animation: heroFadeIn var(--anim-hero-duration) var(--ease-smooth) var(--anim-hero-delay) forwards;
}

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

/* Features section stagger animation */
.landing-page.entrance-active .landing-features {
    animation: featureSlideIn var(--anim-features-duration) var(--ease-smooth) calc(var(--anim-hero-duration) + 100ms) forwards;
}

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

/* Who It's For section */
.landing-page.entrance-active .landing-for-who {
    animation: forWhoSlideIn var(--anim-features-duration) var(--ease-smooth) calc(var(--anim-hero-duration) + 200ms) forwards;
}

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

/* Access section - appears last with emphasis */
.landing-page.entrance-active .landing-access {
    animation: accessEmphasis var(--anim-access-duration) var(--ease-spring) var(--anim-access-delay) forwards;
}

@keyframes accessEmphasis {
    0% {
        opacity: 0;
        transform: translateX(30px) scale(0.95);
    }
    60% {
        opacity: 1;
        transform: translateX(0) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* ============================================================================
   STAGE 2: FORM STEP TRANSITIONS
   ============================================================================ */

/* Step fade out animation */
.form-step.step-exiting {
    animation: stepFadeOut var(--anim-step-fadeout) var(--ease-smooth) forwards;
}

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

/* Step slide in animation (from right) */
.form-step.step-entering {
    animation: stepSlideIn var(--anim-step-slidein) var(--ease-smooth) forwards;
}

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

/* Progress indicator update animation */
.progress-step.progress-updating .step-number {
    animation: progressPulse var(--anim-progress-update) var(--ease-spring);
}

@keyframes progressPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

/* Milestone celebration - subtle glow on step 3 completion */
.progress-step.milestone-reached .step-number {
    animation: milestoneGlow 800ms var(--ease-smooth);
}

@keyframes milestoneGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(46, 182, 125, 0.4);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(46, 182, 125, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(46, 182, 125, 0);
    }
}

/* ============================================================================
   STAGE 3: LOADING STATE ANIMATIONS
   Note: Base loading styles are in styles.css, these are animation enhancements
   ============================================================================ */

/* Reassurance fade-in animation */
.loading-reassurance {
    animation: reassuranceFadeIn 600ms var(--ease-smooth) 500ms forwards;
    opacity: 0;
}

@keyframes reassuranceFadeIn {
    to {
        opacity: 1;
    }
}

/* Lock icon for reassurance */
.loading-reassurance::before {
    content: '\1F512';
    font-size: 1rem;
}

/* ============================================================================
   STAGE 4: RESULTS CELEBRATION
   ============================================================================ */

/* Results container celebration animation */
.results-container.celebrating {
    animation: resultsAppear var(--anim-results-duration) var(--ease-spring) forwards;
}

@keyframes resultsAppear {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    60% {
        opacity: 1;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Results headline celebration */
.results-container.celebrating h2 {
    animation: headlinePop 800ms var(--ease-spring) 200ms forwards;
    opacity: 0;
    transform: scale(0.8);
}

@keyframes headlinePop {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    70% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Document cards stagger animation */
.results-container.celebrating .document-card:nth-child(1) {
    animation: cardSlideUp 400ms var(--ease-smooth) 300ms forwards;
    opacity: 0;
    transform: translateY(20px);
}

.results-container.celebrating .document-card:nth-child(2) {
    animation: cardSlideUp 400ms var(--ease-smooth) 400ms forwards;
    opacity: 0;
    transform: translateY(20px);
}

.results-container.celebrating .document-card:nth-child(3) {
    animation: cardSlideUp 400ms var(--ease-smooth) 500ms forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes cardSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Confetti container */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

/* Individual confetti particle */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    animation: confettiFall var(--anim-confetti-duration) var(--ease-out) forwards;
}

@keyframes confettiFall {
    0% {
        opacity: 1;
        transform: translateY(-20px) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg);
    }
}

/* Confetti color variants */
.confetti.color-1 { background: var(--teal); }
.confetti.color-2 { background: var(--accent); }
.confetti.color-3 { background: var(--primary); }
.confetti.color-4 { background: var(--accent-light); }

/* ============================================================================
   ENCOURAGING MESSAGE ANIMATIONS
   ============================================================================ */

/* Step completion encouragement */
.step-encouragement {
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background: linear-gradient(135deg, rgba(46, 182, 125, 0.1) 0%, rgba(46, 182, 125, 0.05) 100%);
    border-left: 4px solid var(--teal);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    animation: encouragementSlide 400ms var(--ease-spring) forwards;
    opacity: 0;
    transform: translateX(-10px);
}

@keyframes encouragementSlide {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.step-encouragement strong {
    color: var(--teal);
}

/* Progress milestone message */
.progress-milestone-message {
    text-align: center;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    background: var(--bg-warm);
    border-radius: var(--radius-md);
    color: var(--primary);
    font-weight: 500;
    animation: milestoneMessagePop 500ms var(--ease-spring);
}

@keyframes milestoneMessagePop {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    60% {
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================================================
   TIME ESTIMATE BADGE
   ============================================================================ */

.time-estimate-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-warm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.time-estimate-badge::before {
    content: '\23F1';
    font-size: 1rem;
}

/* ============================================================================
   NEXT STEPS SECTION
   ============================================================================ */

.next-steps-section {
    margin-top: 2.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, var(--bg-warm) 0%, var(--bg-cream) 100%);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    animation: nextStepsAppear 500ms var(--ease-smooth) 800ms forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes nextStepsAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.next-steps-section h3 {
    color: var(--primary);
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.next-steps-section h3::before {
    content: '\2728';
}

.next-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.next-steps-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    transition: all var(--transition-fast);
}

.next-steps-list li:hover {
    border-color: var(--teal);
    box-shadow: var(--shadow-sm);
}

.next-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--teal);
    color: var(--white);
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.next-step-content {
    flex: 1;
}

.next-step-content strong {
    color: var(--primary);
    display: block;
    margin-bottom: 0.25rem;
}

.next-step-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

/* ============================================================================
   PROGRESS MILESTONE MESSAGE
   ============================================================================ */

.progress-milestone-message {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
    color: white;
    padding: 1rem 2rem;
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 20px rgba(46, 182, 125, 0.4);
    transition: opacity 0.3s ease, top 0s; /* No transition on position */
    max-width: 500px;
    will-change: opacity; /* Optimize for opacity animation only */
}

/* ============================================================================
   REDUCED MOTION PREFERENCES
   ============================================================================ */

/* ─────────────────────────────────────────────────────────
 * ANIMATION 1: DOWNLOAD CELEBRATION
 *
 *    0ms   Button pressed (scale 0.95)
 *  100ms   Button releases, confetti spawns from button center
 *  150ms   Toast appears (fade + slide from right)
 *  2000ms  Toast begins fade out
 *  2400ms  Toast fully hidden
 * ───────────────────────────────────────────────────────── */

/* Button press animation */
.btn-download-press {
    animation: downloadPress 200ms var(--ease-spring);
}

@keyframes downloadPress {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

/* Mini confetti burst from button */
.confetti-burst-container {
    position: fixed;
    pointer-events: none;
    z-index: 1001;
}

.confetti-mini {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    opacity: 0;
    animation: confettiBurst 600ms var(--ease-out) forwards;
}

@keyframes confettiBurst {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--confetti-x, 30px), var(--confetti-y, -40px)) scale(0.5) rotate(180deg);
    }
}

/* ═══════════════════════════════════════════════════════════
 * TOAST NOTIFICATION SYSTEM
 * ═══════════════════════════════════════════════════════════ */

/* Base toast styles */
.toast-notification {
    position: fixed;
    top: 100px;
    right: 24px;
    padding: 1rem 1.5rem;
    padding-left: 3rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    z-index: 1002;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transform: translateX(20px);
    animation: toastSlideIn 300ms var(--ease-spring) forwards;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    max-width: 400px;
    line-height: 1.5;
}

.toast-notification.toast-exit {
    animation: toastSlideOut 400ms var(--ease-smooth) forwards;
}

/* Toast animation keyframes */
@keyframes toastSlideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideOut {
    to {
        opacity: 0;
        transform: translateX(20px);
    }
}

/* Success toast (green) */
.toast-success {
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
    color: white;
}

.toast-success::before {
    content: '\2713';
    position: absolute;
    left: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    font-size: 0.875rem;
}

/* Error toast (red) */
.toast-error {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
}

.toast-error::before {
    content: '✕';
    position: absolute;
    left: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    font-size: 0.875rem;
}

/* Warning toast (orange/amber) */
.toast-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.toast-warning::before {
    content: '⚠';
    position: absolute;
    left: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    font-size: 0.875rem;
}

/* Info toast (blue) */
.toast-info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.toast-info::before {
    content: 'ⓘ';
    position: absolute;
    left: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    font-size: 0.875rem;
}

/* Legacy support - keep .success-toast for backwards compatibility */
.success-toast {
    position: fixed;
    top: 100px;
    right: 24px;
    background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
    color: white;
    padding: 0.875rem 1.5rem;
    padding-left: 3rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    z-index: 1002;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transform: translateX(20px);
    animation: toastSlideIn 300ms var(--ease-spring) forwards;
}

.success-toast.toast-exit {
    animation: toastSlideOut 400ms var(--ease-smooth) forwards;
}

.success-toast::before {
    content: '\2713';
    position: absolute;
    left: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    font-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════
 * CONFIRMATION MODAL SYSTEM
 * ═══════════════════════════════════════════════════════════ */

/* Modal overlay */
.confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity 200ms ease, background 200ms ease;
}

.confirm-modal-overlay.modal-visible {
    opacity: 1;
    background: rgba(0, 0, 0, 0.5);
}

.confirm-modal-overlay.modal-exit {
    opacity: 0;
}

/* Modal box */
.confirm-modal {
    background: white;
    border-radius: var(--radius-lg);
    padding: 2rem;
    max-width: 420px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9) translateY(20px);
    transition: transform 200ms var(--ease-spring);
}

.confirm-modal-overlay.modal-visible .confirm-modal {
    transform: scale(1) translateY(0);
}

.confirm-modal-overlay.modal-exit .confirm-modal {
    transform: scale(0.95) translateY(10px);
}

/* Modal message */
.confirm-message {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 1.5rem 0;
    text-align: center;
}

/* Modal buttons */
.confirm-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.confirm-buttons .btn {
    flex: 1;
    max-width: 160px;
}

/* ─────────────────────────────────────────────────────────
 * ANIMATION 2: PROFILE CARD SELECTION
 *
 *    0ms   Card clicked
 *   50ms   Scale to 0.98, teal glow begins
 *  150ms   Scale to 1.02, glow intensifies
 *  300ms   Card selected state holds
 *  400ms   Transition to form page begins
 *  600ms   Profile loaded toast appears
 *  800ms   Form fields fade in with data
 * ───────────────────────────────────────────────────────── */

/* Profile card selection glow */
.profile-card.profile-selecting {
    animation: profileSelect 350ms var(--ease-spring) forwards;
    position: relative;
    z-index: 10;
}

@keyframes profileSelect {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(26, 54, 93, 0.1);
    }
    40% {
        transform: scale(0.98);
        box-shadow: 0 0 0 3px rgba(46, 182, 125, 0.3), 0 4px 20px rgba(46, 182, 125, 0.2);
    }
    100% {
        transform: scale(1.02);
        box-shadow: 0 0 0 4px rgba(46, 182, 125, 0.4), 0 8px 30px rgba(46, 182, 125, 0.25);
    }
}

/* Micro toast for profile loaded */
.micro-toast {
    position: fixed;
    top: 100px;
    right: 24px;
    background: var(--primary);
    color: white;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.875rem;
    box-shadow: var(--shadow-md);
    z-index: 1002;
    opacity: 0;
    transform: translateY(-10px);
    animation: microToastIn 250ms var(--ease-spring) forwards;
}

.micro-toast.toast-exit {
    animation: microToastOut 300ms var(--ease-smooth) forwards;
}

@keyframes microToastIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes microToastOut {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Form field fade-in when profile loads */
.form-field-fadein {
    animation: fieldFadeIn 400ms var(--ease-smooth) forwards;
    opacity: 0;
}

.form-field-fadein:nth-child(1) { animation-delay: 0ms; }
.form-field-fadein:nth-child(2) { animation-delay: 50ms; }
.form-field-fadein:nth-child(3) { animation-delay: 100ms; }
.form-field-fadein:nth-child(4) { animation-delay: 150ms; }
.form-field-fadein:nth-child(5) { animation-delay: 200ms; }

@keyframes fieldFadeIn {
    to {
        opacity: 1;
    }
}

/* ─────────────────────────────────────────────────────────
 * ANIMATION 3: FORM VALIDATION SUCCESS CHECKMARKS
 *
 *    0ms   User completes required field
 *   50ms   Field blur detected
 *  100ms   Green checkmark fades in beside label
 *  150ms   Subtle green border pulse (1x)
 *  500ms   Animation complete, checkmark stays
 * ───────────────────────────────────────────────────────── */

/* Validation checkmark container */
.field-validation-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: var(--success);
    border-radius: 50%;
    color: white;
    font-size: 0.65rem;
    margin-left: 0.5rem;
    opacity: 0;
    transform: scale(0.5);
    vertical-align: middle;
}

.field-validation-check.check-visible {
    animation: checkAppear 300ms var(--ease-spring) forwards;
}

@keyframes checkAppear {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Green border pulse on valid field */
.form-group input.field-valid-pulse,
.form-group textarea.field-valid-pulse {
    animation: validBorderPulse 500ms var(--ease-smooth);
}

@keyframes validBorderPulse {
    0% {
        border-color: var(--border);
        box-shadow: 0 0 0 0 rgba(46, 182, 125, 0);
    }
    50% {
        border-color: var(--success);
        box-shadow: 0 0 0 4px rgba(46, 182, 125, 0.15);
    }
    100% {
        border-color: var(--success);
        box-shadow: 0 0 0 0 rgba(46, 182, 125, 0);
    }
}

/* Valid field steady state */
.form-group input.field-validated,
.form-group textarea.field-validated {
    border-color: var(--success);
}

/* ─────────────────────────────────────────────────────────
 * ANIMATION 4: UPLOAD PROGRESS ANIMATION
 *
 *    0ms   Upload starts, overlay appears
 *  100ms   Progress bar starts animating
 *  800ms   Message 1: "Reading document..."
 * 1600ms   Message 2: "Extracting data..."
 * 2400ms   Message 3: "Auto-filling form..."
 *    Xms   Upload complete, success checkmark
 *  X+200ms Success message
 *  X+800ms Overlay fades out
 * ───────────────────────────────────────────────────────── */

/* Upload progress overlay */
.upload-progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1003;
    opacity: 0;
    animation: overlayFadeIn 200ms var(--ease-smooth) forwards;
}

.upload-progress-overlay.overlay-exit {
    animation: overlayFadeOut 300ms var(--ease-smooth) forwards;
}

@keyframes overlayFadeIn {
    to { opacity: 1; }
}

@keyframes overlayFadeOut {
    to { opacity: 0; }
}

.upload-progress-content {
    text-align: center;
    max-width: 320px;
}

/* Animated progress bar */
.upload-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.upload-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--teal), var(--teal-light));
    border-radius: 3px;
    width: 0%;
    animation: progressFill 2.5s var(--ease-smooth) forwards;
}

@keyframes progressFill {
    0% { width: 0%; }
    30% { width: 35%; }
    60% { width: 70%; }
    90% { width: 90%; }
    100% { width: 100%; }
}

/* Rotating upload messages */
.upload-message {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    min-height: 1.5rem;
    position: relative;
}

.upload-message span {
    position: absolute;
    width: 100%;
    left: 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 300ms ease, transform 300ms ease;
}

.upload-message span.active {
    opacity: 1;
    transform: translateY(0);
    position: relative;
}

/* Upload success checkmark */
.upload-success-check {
    width: 48px;
    height: 48px;
    background: var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    opacity: 0;
    transform: scale(0.5);
}

.upload-success-check.check-visible {
    animation: uploadCheckPop 400ms var(--ease-spring) forwards;
}

@keyframes uploadCheckPop {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    70% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.upload-success-check::after {
    content: '\2713';
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}

/* ─────────────────────────────────────────────────────────
 * ANIMATION 5: NAVIGATION PAGE TRANSITIONS
 *
 *    0ms   Nav item clicked
 *   50ms   Current page begins fade (opacity to 0.8)
 *  100ms   Nav pill animates to new position
 *  200ms   Current page fades out fully
 *  250ms   New page slides in from right
 *  500ms   New page fully visible
 * ───────────────────────────────────────────────────────── */

/* Page exit animation */
.page.page-exiting {
    animation: pageExit 200ms var(--ease-smooth) forwards;
}

@keyframes pageExit {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-20px);
    }
}

/* Page enter animation */
.page.page-entering {
    animation: pageEnter 350ms var(--ease-smooth) forwards;
}

@keyframes pageEnter {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Nav pill smooth transition */
.nav-links {
    position: relative;
}

.nav-link {
    transition: color 150ms ease, background 150ms ease;
}

.nav-link.active {
    transition: background 250ms var(--ease-smooth), color 150ms ease, box-shadow 250ms ease;
}

/* ─────────────────────────────────────────────────────────
 * ANIMATION 6: ERROR STATE ANIMATIONS (GENTLE)
 *
 *    0ms   Error occurs
 *   50ms   Gentle shake begins (3 oscillations)
 *  300ms   Shake completes
 *  100ms   Soft red glow fades in
 *  150ms   Error message fades in smoothly
 *  500ms   Glow settles to steady state
 * ───────────────────────────────────────────────────────── */

/* Gentle shake animation (like macOS login) */
.error-shake {
    animation: gentleShake 300ms var(--ease-smooth);
}

@keyframes gentleShake {
    0%, 100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-8px);
    }
    40% {
        transform: translateX(6px);
    }
    60% {
        transform: translateX(-4px);
    }
    80% {
        transform: translateX(2px);
    }
}

/* Soft red glow for error fields */
.error-glow {
    animation: softErrorGlow 500ms var(--ease-smooth) forwards;
}

@keyframes softErrorGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
        border-color: var(--border);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
        border-color: rgba(220, 38, 38, 0.5);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
        border-color: rgba(220, 38, 38, 0.6);
    }
}

/* Error message fade in */
.error-message-animate {
    animation: errorMessageFadeIn 300ms var(--ease-smooth) forwards;
    opacity: 0;
    transform: translateY(-5px);
}

@keyframes errorMessageFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Login error styling */
.login-error.error-visible {
    animation: errorMessageFadeIn 300ms var(--ease-smooth) forwards;
}

/* Form field error state */
.form-group input.field-error,
.form-group textarea.field-error {
    border-color: rgba(220, 38, 38, 0.6);
    background: rgba(220, 38, 38, 0.02);
}

/* ============================================================================
   REDUCED MOTION PREFERENCES
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Ensure visibility without animation */
    .success-toast,
    .toast-notification,
    .micro-toast,
    .field-validation-check.check-visible,
    .upload-progress-overlay,
    .upload-success-check.check-visible,
    .confirm-modal-overlay,
    .confirm-modal {
        opacity: 1 !important;
        transform: none !important;
    }
}