/* ============================================
   MOTION LANGUAGE - Show Don't Tell Initiative
   SDT-005: Micro-animations that replace text feedback

   Design Principles:
   - Subtle: 200-400ms durations for UI, up to 800ms for celebrations
   - Performant: transform/opacity only (GPU accelerated)
   - Purposeful: Every animation communicates meaning
   - Accessible: Respects prefers-reduced-motion
   ============================================ */

/* ============================================
   SECTION 1: STATUS INDICATORS
   Replace text like "Listening...", "Thinking...", "Speaking..."
   ============================================ */

/* --- LISTENING STATE ---
   Pulsing concentric rings emanate outward like sound waves being received
   Use: When AI/system is actively listening for user input */

@keyframes status-listening-ring {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes status-listening-core {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}

.status-listening {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.status-listening::before,
.status-listening::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--color-ai-listening, #4A7C59);
    animation: status-listening-ring 1.5s ease-out infinite;
}

.status-listening::after {
    animation-delay: 0.5s;
}

.status-listening > * {
    animation: status-listening-core 1.5s ease-in-out infinite;
}

/* Listening indicator with animated ear waves */
.listening-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.listening-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 20px;
}

.listening-wave span {
    width: 3px;
    height: 8px;
    background: var(--color-ai-listening, #4A7C59);
    border-radius: 2px;
    animation: listening-wave-bar 1.2s ease-in-out infinite;
}

.listening-wave span:nth-child(1) { animation-delay: 0s; }
.listening-wave span:nth-child(2) { animation-delay: 0.1s; }
.listening-wave span:nth-child(3) { animation-delay: 0.2s; }
.listening-wave span:nth-child(4) { animation-delay: 0.1s; }
.listening-wave span:nth-child(5) { animation-delay: 0s; }

@keyframes listening-wave-bar {
    0%, 100% {
        height: 8px;
        opacity: 0.5;
    }
    50% {
        height: 18px;
        opacity: 1;
    }
}


/* --- THINKING STATE ---
   Rotating/orbiting dots that suggest processing and contemplation
   Use: When AI is processing input and generating response */

@keyframes status-thinking-orbit {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes status-thinking-dot {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.status-thinking {
    position: relative;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.status-thinking::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--color-processing, #8B7BA5);
    border-right-color: var(--color-processing, #8B7BA5);
    animation: status-thinking-orbit 1s linear infinite;
}

/* Three-dot thinking indicator */
.thinking-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.thinking-dots span {
    width: 6px;
    height: 6px;
    background: var(--color-processing, #8B7BA5);
    border-radius: 50%;
    animation: thinking-dot-bounce 1.4s ease-in-out infinite;
}

.thinking-dots span:nth-child(1) { animation-delay: 0s; }
.thinking-dots span:nth-child(2) { animation-delay: 0.16s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.32s; }

@keyframes thinking-dot-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

/* Orbital thinking - more elaborate version */
.thinking-orbital {
    position: relative;
    width: 32px;
    height: 32px;
}

.thinking-orbital::before,
.thinking-orbital::after,
.thinking-orbital span {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--color-processing, #8B7BA5);
    border-radius: 50%;
}

.thinking-orbital::before {
    content: '';
    top: 0;
    left: 50%;
    margin-left: -3px;
    animation: thinking-orbital-spin 1.2s ease-in-out infinite;
}

.thinking-orbital::after {
    content: '';
    bottom: 0;
    left: 50%;
    margin-left: -3px;
    animation: thinking-orbital-spin 1.2s ease-in-out infinite reverse;
}

.thinking-orbital span {
    top: 50%;
    left: 0;
    margin-top: -3px;
    animation: thinking-orbital-pulse 0.6s ease-in-out infinite alternate;
}

@keyframes thinking-orbital-spin {
    0% {
        transform: rotate(0deg) translateY(3px);
    }
    100% {
        transform: rotate(360deg) translateY(3px);
    }
}

@keyframes thinking-orbital-pulse {
    0% { opacity: 0.3; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.1); }
}


/* --- SPEAKING STATE ---
   Sound wave bars that animate in a speaking rhythm
   Use: When AI is actively speaking/outputting audio */

@keyframes status-speaking-bar {
    0%, 100% {
        transform: scaleY(0.3);
    }
    50% {
        transform: scaleY(1);
    }
}

.status-speaking {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 20px;
}

.status-speaking span {
    display: block;
    width: 3px;
    height: 100%;
    background: var(--color-ai-speaking, #5B7BA5);
    border-radius: 2px;
    transform-origin: center;
    animation: status-speaking-bar 0.8s ease-in-out infinite;
}

.status-speaking span:nth-child(1) { animation-delay: 0s; height: 60%; }
.status-speaking span:nth-child(2) { animation-delay: 0.1s; height: 100%; }
.status-speaking span:nth-child(3) { animation-delay: 0.2s; height: 80%; }
.status-speaking span:nth-child(4) { animation-delay: 0.15s; height: 90%; }
.status-speaking span:nth-child(5) { animation-delay: 0.05s; height: 70%; }

/* Sound wave speaking indicator - curved bars */
.speaking-wave {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
}

.speaking-wave-bar {
    width: 4px;
    background: var(--color-ai-speaking, #5B7BA5);
    border-radius: 2px;
    animation: speaking-wave-pulse 0.6s ease-in-out infinite alternate;
}

.speaking-wave-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
.speaking-wave-bar:nth-child(2) { height: 16px; animation-delay: 0.1s; }
.speaking-wave-bar:nth-child(3) { height: 12px; animation-delay: 0.2s; }
.speaking-wave-bar:nth-child(4) { height: 20px; animation-delay: 0.15s; }
.speaking-wave-bar:nth-child(5) { height: 10px; animation-delay: 0.05s; }

@keyframes speaking-wave-pulse {
    0% {
        transform: scaleY(0.4);
        opacity: 0.6;
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}


/* --- COMPLETE STATE ---
   Satisfying checkmark that draws and pulses with success
   Use: When an action, task, or process completes successfully */

@keyframes status-complete-check {
    0% {
        stroke-dashoffset: 24;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes status-complete-circle {
    0% {
        stroke-dashoffset: 60;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes status-complete-scale {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.status-complete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: status-complete-scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.status-complete svg {
    width: 24px;
    height: 24px;
}

.status-complete .check-circle {
    fill: none;
    stroke: var(--color-success, #5A6B5A);
    stroke-width: 2;
    stroke-dasharray: 60;
    animation: status-complete-circle 0.4s ease-out forwards;
}

.status-complete .check-mark {
    fill: none;
    stroke: var(--color-success, #5A6B5A);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    animation: status-complete-check 0.3s ease-out 0.2s forwards;
    stroke-dashoffset: 24;
}

/* Simple checkmark animation without circle */
.check-animated {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
}

.check-animated::before,
.check-animated::after {
    content: '';
    position: absolute;
    background: var(--color-success, #5A6B5A);
    border-radius: 2px;
}

.check-animated::before {
    width: 6px;
    height: 2px;
    bottom: 6px;
    left: 2px;
    transform: rotate(45deg);
    animation: check-short 0.15s ease-out 0.1s forwards;
    transform-origin: left center;
    opacity: 0;
}

.check-animated::after {
    width: 12px;
    height: 2px;
    bottom: 8px;
    left: 6px;
    transform: rotate(-45deg);
    animation: check-long 0.2s ease-out 0.2s forwards;
    transform-origin: left center;
    opacity: 0;
}

@keyframes check-short {
    0% { transform: rotate(45deg) scaleX(0); opacity: 0; }
    100% { transform: rotate(45deg) scaleX(1); opacity: 1; }
}

@keyframes check-long {
    0% { transform: rotate(-45deg) scaleX(0); opacity: 0; }
    100% { transform: rotate(-45deg) scaleX(1); opacity: 1; }
}


/* ============================================
   SECTION 2: FEEDBACK STATES
   Visual feedback for user actions and system states
   ============================================ */

/* --- SUCCESS STATE ---
   Brief green glow with subtle scale for positive confirmation
   Use: Form submissions, saves, successful operations */

@keyframes feedback-success-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(90, 107, 90, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(90, 107, 90, 0);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(90, 107, 90, 0);
        transform: scale(1);
    }
}

@keyframes feedback-success-flash {
    0% {
        background-color: rgba(90, 107, 90, 0.15);
    }
    100% {
        background-color: transparent;
    }
}

.feedback-success {
    animation: feedback-success-glow 0.4s ease-out forwards;
}

.feedback-success-flash {
    animation: feedback-success-flash 0.4s ease-out forwards;
}

/* Success with checkmark icon */
.feedback-success-check {
    position: relative;
}

.feedback-success-check::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 12px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background: var(--color-success, #5A6B5A);
    border-radius: 50%;
    animation: success-icon-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes success-icon-pop {
    0% { transform: translateY(-50%) scale(0); }
    70% { transform: translateY(-50%) scale(1.2); }
    100% { transform: translateY(-50%) scale(1); }
}


/* --- WARNING STATE ---
   Amber pulse that draws attention without alarming
   Use: Cautionary messages, approaching limits, attention needed */

@keyframes feedback-warning-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(139, 115, 85, 0.4);
        border-color: var(--color-warning, #8B7355);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(139, 115, 85, 0);
        border-color: var(--color-warning, #8B7355);
    }
}

@keyframes feedback-warning-attention {
    0%, 100% {
        background-color: transparent;
    }
    25%, 75% {
        background-color: rgba(139, 115, 85, 0.1);
    }
}

.feedback-warning {
    animation: feedback-warning-pulse 0.6s ease-out;
    border: 2px solid var(--color-warning, #8B7355) !important;
}

.feedback-warning-attention {
    animation: feedback-warning-attention 0.8s ease-in-out;
}

/* Warning indicator icon */
.warning-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--color-warning, #8B7355);
    animation: warning-icon-pulse 1.5s ease-in-out infinite;
}

@keyframes warning-icon-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}


/* --- ERROR STATE ---
   Shake with red flash to clearly indicate something went wrong
   Use: Validation errors, failed operations, blocking issues */

@keyframes feedback-error-shake {
    0%, 100% {
        transform: translateX(0);
    }
    20%, 60% {
        transform: translateX(-6px);
    }
    40%, 80% {
        transform: translateX(6px);
    }
}

@keyframes feedback-error-flash {
    0% {
        background-color: rgba(125, 90, 90, 0.2);
        box-shadow: 0 0 0 2px rgba(125, 90, 90, 0.3);
    }
    100% {
        background-color: transparent;
        box-shadow: 0 0 0 0 rgba(125, 90, 90, 0);
    }
}

@keyframes feedback-error-border {
    0%, 50% {
        border-color: var(--color-danger, #7D5A5A);
    }
    100% {
        border-color: var(--color-light-border, #D5D5D5);
    }
}

.feedback-error {
    animation:
        feedback-error-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both,
        feedback-error-flash 0.4s ease-out;
}

.feedback-error-shake {
    animation: feedback-error-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.feedback-error-border {
    animation: feedback-error-border 0.6s ease-out forwards;
    border: 2px solid var(--color-danger, #7D5A5A);
}

/* Inline error indicator */
.error-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-danger, #7D5A5A);
    animation: error-indicator-appear 0.3s ease-out;
}

@keyframes error-indicator-appear {
    0% { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}


/* --- LOADING STATE ---
   Skeleton shimmer for content placeholders
   Use: Loading content, lazy-loaded sections, data fetching */

@keyframes feedback-loading-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes feedback-loading-pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

.feedback-loading,
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-cloud-dancer, #F0EEE9) 0%,
        rgba(255, 255, 255, 0.8) 50%,
        var(--color-cloud-dancer, #F0EEE9) 100%
    );
    background-size: 200% 100%;
    animation: feedback-loading-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    border-radius: 4px;
}

.skeleton-text:last-child {
    width: 70%;
}

.skeleton-circle {
    border-radius: 50%;
}

.skeleton-button {
    height: 40px;
    border-radius: 8px;
}

/* Loading spinner */
.loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-light-border, #D5D5D5);
    border-top-color: var(--color-charcoal, #1A1A1A);
    border-radius: 50%;
    animation: loading-spin 0.8s linear infinite;
}

@keyframes loading-spin {
    to { transform: rotate(360deg); }
}

/* Loading dots */
.loading-dots {
    display: inline-flex;
    gap: 4px;
}

.loading-dots span {
    width: 6px;
    height: 6px;
    background: var(--color-charcoal-light, #5C5C5C);
    border-radius: 50%;
    animation: loading-dot-fade 1.2s ease-in-out infinite;
}

.loading-dots span:nth-child(1) { animation-delay: 0s; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes loading-dot-fade {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}


/* ============================================
   SECTION 3: SCORE REVEALS
   Animated score presentations for assessments and results
   ============================================ */

/* --- NUMBER COUNT-UP ---
   Animates numbers from 0 to final value with easing
   Use: Score displays, statistics, counters
   Note: Requires JS to update the value; this provides the visual treatment */

@keyframes score-countup-pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes score-countup-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.score-countup {
    display: inline-block;
    animation: score-countup-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    font-variant-numeric: tabular-nums;
}

.score-countup.counting {
    animation: score-countup-pulse 0.15s ease-in-out infinite;
}

/* Score with emphasis glow */
.score-reveal {
    position: relative;
    display: inline-block;
}

.score-reveal::after {
    content: '';
    position: absolute;
    inset: -8px;
    background: radial-gradient(circle, rgba(90, 107, 90, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: score-reveal-glow 0.8s ease-out forwards;
    z-index: -1;
}

@keyframes score-reveal-glow {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}


/* --- PROGRESS BAR FILL ---
   Smooth progress bar animation with elegant easing
   Use: Skill meters, completion percentages, loading progress */

@keyframes progress-fill {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes progress-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.progress-bar {
    position: relative;
    height: 8px;
    background: var(--color-cloud-dancer, #F0EEE9);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--color-charcoal, #1A1A1A);
    border-radius: 4px;
    transform-origin: left center;
    animation: progress-fill 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.progress-bar-fill.animated {
    background: linear-gradient(
        90deg,
        var(--color-charcoal, #1A1A1A) 0%,
        var(--color-charcoal-mid, #3D3D3D) 50%,
        var(--color-charcoal, #1A1A1A) 100%
    );
    background-size: 200% 100%;
    animation:
        progress-fill 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
        progress-shimmer 2s linear infinite;
}

/* Progress with percentage label */
.progress-labeled {
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-labeled .progress-bar {
    flex: 1;
}

.progress-labeled .progress-value {
    min-width: 3em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    animation: score-countup-pop 0.4s ease-out 0.6s both;
}


/* --- SCORE CIRCLE DRAW ---
   SVG circle that draws itself to reveal score
   Use: Overall scores, ratings, circular progress indicators */

@keyframes score-circle-draw {
    from {
        stroke-dashoffset: var(--circle-circumference, 283);
    }
    to {
        stroke-dashoffset: var(--circle-offset, 0);
    }
}

@keyframes score-circle-appear {
    0% {
        transform: scale(0.8) rotate(-90deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(-90deg);
        opacity: 1;
    }
}

.score-circle-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.score-circle-svg {
    transform: rotate(-90deg);
    animation: score-circle-appear 0.4s ease-out forwards;
}

.score-circle-bg {
    fill: none;
    stroke: var(--color-cloud-dancer, #F0EEE9);
    stroke-width: 8;
}

.score-circle-progress {
    fill: none;
    stroke: var(--color-success, #5A6B5A);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: var(--circle-circumference, 283);
    stroke-dashoffset: var(--circle-circumference, 283);
    animation: score-circle-draw 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}

.score-circle-value {
    position: absolute;
    font-size: 1.5rem;
    font-weight: 600;
    animation: score-countup-pop 0.5s ease-out 0.8s both;
}

/* Mini score circle for inline use */
.score-circle-mini {
    width: 40px;
    height: 40px;
}

.score-circle-mini .score-circle-bg,
.score-circle-mini .score-circle-progress {
    stroke-width: 4;
}

.score-circle-mini .score-circle-value {
    font-size: 0.75rem;
}


/* ============================================
   SECTION 4: TRANSITIONS
   Smooth enter/exit animations for UI elements
   ============================================ */

/* --- CARD ENTER/EXIT ---
   Elegant card transitions with depth and motion
   Use: Cards appearing/disappearing, list items, modals */

@keyframes card-enter {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes card-exit {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
}

@keyframes card-enter-stagger {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-enter {
    animation: card-enter 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.card-exit {
    animation: card-exit 0.25s ease-in forwards;
}

/* Staggered card entries */
.cards-stagger > * {
    opacity: 0;
    animation: card-enter-stagger 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.cards-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.cards-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.cards-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.cards-stagger > *:nth-child(4) { animation-delay: 0.2s; }
.cards-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.cards-stagger > *:nth-child(6) { animation-delay: 0.3s; }

/* Card with hover lift */
.card-interactive {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-interactive:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 16px rgba(26, 26, 26, 0.08),
        0 16px 32px rgba(26, 26, 26, 0.04);
}


/* --- SECTION EXPAND/COLLAPSE ---
   Smooth accordion and section reveal animations
   Use: Accordions, expandable sections, collapsible content */

@keyframes section-expand {
    0% {
        opacity: 0;
        max-height: 0;
        transform: translateY(-8px);
    }
    100% {
        opacity: 1;
        max-height: var(--section-height, 500px);
        transform: translateY(0);
    }
}

@keyframes section-collapse {
    0% {
        opacity: 1;
        max-height: var(--section-height, 500px);
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        max-height: 0;
        transform: translateY(-8px);
    }
}

.section-expand {
    animation: section-expand 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    overflow: hidden;
}

.section-collapse {
    animation: section-collapse 0.25s ease-in forwards;
    overflow: hidden;
}

/* Accordion arrow rotation */
.accordion-trigger {
    transition: transform 0.25s ease;
}

.accordion-trigger[aria-expanded="true"] {
    transform: rotate(180deg);
}

/* Fade-through content swap */
.content-swap-out {
    animation: content-fade-out 0.15s ease-in forwards;
}

.content-swap-in {
    animation: content-fade-in 0.2s ease-out forwards;
}

@keyframes content-fade-out {
    to { opacity: 0; transform: translateY(-4px); }
}

@keyframes content-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}


/* --- TAB SWITCH ---
   Smooth tab indicator and content transitions
   Use: Tab bars, segmented controls, navigation switches */

@keyframes tab-indicator-slide {
    from {
        transform: translateX(var(--tab-from, 0));
        width: var(--tab-width-from, 100px);
    }
    to {
        transform: translateX(var(--tab-to, 0));
        width: var(--tab-width-to, 100px);
    }
}

@keyframes tab-content-enter {
    0% {
        opacity: 0;
        transform: translateX(8px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes tab-content-exit {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-8px);
    }
}

.tab-indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background: var(--color-charcoal, #1A1A1A);
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                width 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tab-content-enter {
    animation: tab-content-enter 0.25s ease-out forwards;
}

.tab-content-exit {
    animation: tab-content-exit 0.2s ease-in forwards;
}

/* Tab button states */
.tab-button {
    position: relative;
    transition: color 0.2s ease;
}

.tab-button::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-charcoal, #1A1A1A);
    transform: scaleX(0);
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tab-button.active::after,
.tab-button[aria-selected="true"]::after {
    transform: scaleX(1);
}


/* ============================================
   SECTION 5: UTILITY CLASSES
   Helper classes for common animation needs
   ============================================ */

/* Animation timing utilities */
.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-400 { animation-delay: 400ms; }
.animate-delay-500 { animation-delay: 500ms; }

/* Animation duration utilities */
.animate-fast { animation-duration: 150ms !important; }
.animate-normal { animation-duration: 300ms !important; }
.animate-slow { animation-duration: 500ms !important; }

/* Animation play state */
.animate-paused { animation-play-state: paused; }
.animate-running { animation-play-state: running; }

/* Fill mode utilities */
.animate-fill-forwards { animation-fill-mode: forwards; }
.animate-fill-both { animation-fill-mode: both; }

/* Generic fade */
.fade-in {
    animation: generic-fade-in 0.3s ease-out forwards;
}

.fade-out {
    animation: generic-fade-out 0.2s ease-in forwards;
}

@keyframes generic-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes generic-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Slide utilities */
.slide-up-in {
    animation: slide-up-in 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.slide-down-in {
    animation: slide-down-in 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes slide-up-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down-in {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scale utilities */
.scale-in {
    animation: scale-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.scale-out {
    animation: scale-out 0.2s ease-in forwards;
}

@keyframes scale-in {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes scale-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.9); }
}

/* Pop effect for emphasis */
.pop-in {
    animation: pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

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

/* Attention-grabbing pulse */
.attention-pulse {
    animation: attention-pulse 1.5s ease-in-out infinite;
}

@keyframes attention-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(26, 26, 26, 0.2);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 8px rgba(26, 26, 26, 0);
    }
}


/* ============================================
   SECTION 6: ACCESSIBILITY
   Respect user preferences for reduced motion
   ============================================ */

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

    /* Preserve essential state indicators with minimal motion */
    .status-listening::before,
    .status-listening::after {
        animation: none;
        opacity: 0.5;
    }

    .thinking-dots span,
    .loading-dots span {
        animation: none;
        opacity: 0.6;
    }

    .thinking-dots span:nth-child(2) { opacity: 0.8; }
    .thinking-dots span:nth-child(3) { opacity: 1; }

    .status-speaking span {
        animation: none;
    }

    .feedback-loading,
    .skeleton {
        animation: none;
        background: var(--color-cloud-dancer, #F0EEE9);
    }

    .progress-bar-fill {
        animation: none;
        transform: scaleX(1);
    }

    .score-circle-progress {
        animation: none;
        stroke-dashoffset: var(--circle-offset, 0);
    }
}


/* ============================================
   SECTION 7: COMPONENT PRESETS
   Ready-to-use HTML component patterns
   ============================================ */

/* Listening indicator preset
   HTML: <div class="listening-preset"><span></span><span></span><span></span><span></span><span></span></div> */
.listening-preset {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 24px;
    padding: 4px 8px;
    background: rgba(74, 124, 89, 0.1);
    border-radius: 12px;
}

.listening-preset span {
    width: 3px;
    background: var(--color-ai-listening, #4A7C59);
    border-radius: 2px;
    animation: listening-wave-bar 1.2s ease-in-out infinite;
}

.listening-preset span:nth-child(1) { height: 8px; animation-delay: 0s; }
.listening-preset span:nth-child(2) { height: 12px; animation-delay: 0.1s; }
.listening-preset span:nth-child(3) { height: 16px; animation-delay: 0.2s; }
.listening-preset span:nth-child(4) { height: 12px; animation-delay: 0.1s; }
.listening-preset span:nth-child(5) { height: 8px; animation-delay: 0s; }

/* Thinking indicator preset
   HTML: <div class="thinking-preset"><span></span><span></span><span></span></div> */
.thinking-preset {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: rgba(139, 123, 165, 0.1);
    border-radius: 12px;
}

.thinking-preset span {
    width: 6px;
    height: 6px;
    background: var(--color-processing, #8B7BA5);
    border-radius: 50%;
    animation: thinking-dot-bounce 1.4s ease-in-out infinite;
}

.thinking-preset span:nth-child(1) { animation-delay: 0s; }
.thinking-preset span:nth-child(2) { animation-delay: 0.16s; }
.thinking-preset span:nth-child(3) { animation-delay: 0.32s; }

/* Speaking indicator preset
   HTML: <div class="speaking-preset"><span></span><span></span><span></span><span></span><span></span></div> */
.speaking-preset {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 24px;
    padding: 4px 8px;
    background: rgba(91, 123, 165, 0.1);
    border-radius: 12px;
}

.speaking-preset span {
    width: 3px;
    background: var(--color-ai-speaking, #5B7BA5);
    border-radius: 2px;
    animation: speaking-wave-pulse 0.6s ease-in-out infinite alternate;
}

.speaking-preset span:nth-child(1) { height: 6px; animation-delay: 0s; }
.speaking-preset span:nth-child(2) { height: 12px; animation-delay: 0.1s; }
.speaking-preset span:nth-child(3) { height: 8px; animation-delay: 0.2s; }
.speaking-preset span:nth-child(4) { height: 14px; animation-delay: 0.15s; }
.speaking-preset span:nth-child(5) { height: 6px; animation-delay: 0.05s; }

/* Complete indicator preset (SVG-based)
   HTML: <div class="complete-preset"><svg viewBox="0 0 24 24"><circle class="check-circle" cx="12" cy="12" r="10"/><path class="check-mark" d="M7 13l3 3 7-7"/></svg></div> */
.complete-preset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    animation: status-complete-scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.complete-preset svg {
    width: 24px;
    height: 24px;
}

.complete-preset .check-circle {
    fill: rgba(90, 107, 90, 0.1);
    stroke: var(--color-success, #5A6B5A);
    stroke-width: 2;
    stroke-dasharray: 63;
    animation: status-complete-circle 0.4s ease-out forwards;
}

.complete-preset .check-mark {
    fill: none;
    stroke: var(--color-success, #5A6B5A);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 17;
    stroke-dashoffset: 17;
    animation: status-complete-check 0.3s ease-out 0.2s forwards;
}