/**
 * WithYou Parent Web - Animation Styles
 * Smooth, gentle animations optimized for older adults
 */

/* Page Load Sequence Animations */
@keyframes pageLoadSequence {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-load-logo {
    animation: pageLoadSequence 0.3s ease-out 0s both;
}

.page-load-headline {
    animation: pageLoadSequence 0.4s ease-out 0.1s both;
}

.page-load-card {
    animation: pageLoadSequence 0.5s ease-out 0.2s both;
}

.page-load-button {
    animation: pageLoadSequence 0.3s ease-out 0.4s both;
}

/* Gentle Entrance Animations */
@keyframes gentleSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gentleScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes gentleBounce {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    60% {
        opacity: 1;
        transform: scale(1.02);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* State Transition Animations */
.state-enter {
    animation: gentleSlideUp 0.4s ease-out;
}

.state-enter-scale {
    animation: gentleScale 0.3s ease-out;
}

.state-enter-bounce {
    animation: gentleBounce 0.5s ease-out;
}

/* Countdown Animation */
@keyframes countdownPulse {
    0% {
        transform: scale(1.2);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.9);
        opacity: 0;
    }
}

.countdown-number {
    animation: countdownPulse 1s ease-out;
}

/* Button Interaction Animations */
@keyframes buttonPress {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.96);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes buttonHover {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    100% {
        transform: scale(1.02);
        filter: brightness(1.1);
    }
}

.button-press-animation {
    animation: buttonPress 0.15s ease-out;
}

/* Record Button Pulse Animation */
@keyframes recordButtonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 68, 68, 0);
    }
}

.record-button-pulse {
    animation: recordButtonPulse 3s ease-in-out infinite;
}

/* Stop Button Glow Animation */
@keyframes stopButtonGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 68, 68, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 68, 68, 0.6);
    }
}

.stop-button-glow {
    animation: stopButtonGlow 2s ease-in-out infinite;
}

/* Recording Indicator Animations */
@keyframes recordingPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

.recording-pulse {
    animation: recordingPulse 1.5s ease-in-out infinite;
}

/* Waveform Animation */
@keyframes waveformBar {
    0%, 100% {
        height: 2px;
    }
    50% {
        height: var(--bar-height, 16px);
    }
}

.waveform-bar {
    animation: waveformBar 0.3s ease-in-out infinite;
    animation-delay: var(--animation-delay, 0s);
}

/* Progress Bar Animations */
@keyframes progressFill {
    from {
        width: 0%;
    }
    to {
        width: var(--target-width, 100%);
    }
}

@keyframes progressPulse {
    0%, 100% {
        opacity: 1;
        transform: scaleX(1);
    }
    50% {
        opacity: 0.8;
        transform: scaleX(0.98);
    }
}

.progress-fill-animated {
    animation: progressFill 0.3s ease-out;
}

.progress-pulse {
    animation: progressPulse 2s ease-in-out infinite;
}

/* Sparkle Animations */
@keyframes sparkleFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 1;
    }
    25% {
        transform: translateY(-4px) rotate(90deg) scale(1.1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-6px) rotate(180deg) scale(1.05);
        opacity: 1;
    }
    75% {
        transform: translateY(-2px) rotate(270deg) scale(1.08);
        opacity: 0.9;
    }
}

@keyframes sparkleTwinkle {
    0%, 100% {
        opacity: 1;
        filter: brightness(1);
    }
    50% {
        opacity: 0.7;
        filter: brightness(1.3);
    }
}

.sparkle-float {
    animation: sparkleFloat 3s ease-in-out infinite;
}

.sparkle-twinkle {
    animation: sparkleTwinkle 1.5s ease-in-out infinite;
}

/* Staggered sparkle delays */
.sparkle:nth-child(1) {
    animation-delay: 0s;
}

.sparkle:nth-child(2) {
    animation-delay: 0.5s;
}

.sparkle:nth-child(3) {
    animation-delay: 1s;
}

/* Confetti Animations */
@keyframes confettiFall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

@keyframes confettiSway {
    0%, 100% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(20px);
    }
}

.confetti-piece {
    animation: confettiFall 4s linear infinite, confettiSway 2s ease-in-out infinite;
}

/* Success Celebration Sequence */
@keyframes celebrationScale {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

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

.celebration-card {
    animation: celebrationScale 0.6s ease-out;
}

.success-message {
    animation: celebrationSlide 0.4s ease-out 0.2s both;
}

.appreciation-message {
    animation: celebrationSlide 0.3s ease-out 0.6s both;
}

/* Modal Entrance Animations */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modalBackdropFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-enter {
    animation: modalBackdropFade 0.2s ease-out;
}

.modal-content-enter {
    animation: modalSlideIn 0.3s ease-out;
}

/* Loading Animations */
@keyframes loadingPulse {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes loadingSpinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading-dot {
    animation: loadingPulse 1.4s ease-in-out infinite both;
}

.loading-spinner {
    animation: loadingSpinner 1s linear infinite;
}

/* Error State Animations */
@keyframes errorShake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

@keyframes errorPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.error-shake {
    animation: errorShake 0.5s ease-in-out;
}

.error-pulse {
    animation: errorPulse 0.6s ease-in-out;
}

/* Audio Playback Animations */
@keyframes playPause {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes scrubberMove {
    from {
        left: var(--start-position, 0%);
    }
    to {
        left: var(--end-position, 100%);
    }
}

.play-pause-animation {
    animation: playPause 0.2s ease-out;
}

.scrubber-animated {
    animation: scrubberMove 0.2s ease-out;
}

/* Upload Progress Animations */
@keyframes uploadProgress {
    0% {
        width: 0%;
        opacity: 0.8;
    }
    100% {
        width: var(--progress-width, 100%);
        opacity: 1;
    }
}

@keyframes uploadPulse {
    0%, 100% {
        opacity: 1;
        transform: scaleX(1);
    }
    50% {
        opacity: 0.8;
        transform: scaleX(0.99);
    }
}

.upload-progress-bar {
    animation: uploadProgress 0.3s ease-out;
}

.upload-pulse {
    animation: uploadPulse 2s ease-in-out infinite;
}

/* Heart Beat Animation for Success */
@keyframes heartBeat {
    0%, 100% {
        transform: scale(1);
    }
    25%, 75% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.05);
    }
}

.heart-beat {
    animation: heartBeat 2s ease-in-out infinite;
}

/* Focus Ring Animation */
@keyframes focusRing {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 233, 65, 0.4);
    }
    100% {
        box-shadow: 0 0 0 6px rgba(255, 233, 65, 0);
    }
}

.focus-ring-animation {
    animation: focusRing 0.6s ease-out;
}

/* Gentle Hover Effects */
.gentle-hover {
    transition: all 0.2s ease;
}

.gentle-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(33, 33, 33, 0.12);
}

/* Smooth Transitions */
.smooth-transition {
    transition: all 0.2s ease;
}

.smooth-transition-slow {
    transition: all 0.3s ease;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Keep essential feedback animations but make them minimal */
    .record-button:active,
    .stop-button:active,
    .continue-button:active,
    .primary-button:active,
    .secondary-button:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* Preserve loading indicators as they're functional */
    .loading-dot {
        animation: none !important;
        opacity: 0.8 !important;
    }
    
    .red-dot {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    @keyframes highContrastPulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.7;
        }
    }
    
    .recording-pulse {
        animation: highContrastPulse 1.5s ease-in-out infinite;
    }
    
    .sparkle-float,
    .sparkle-twinkle {
        animation: none;
    }
}

/* Animation performance optimizations */
.will-animate {
    will-change: transform, opacity;
}

.will-animate-scale {
    will-change: transform;
}

.will-animate-opacity {
    will-change: opacity;
}

/* Remove will-change after animation */
.animation-complete {
    will-change: auto;
}

/* Custom timing functions */
:root {
    --ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    --ease-gentle: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}