/* ====================================
   Solar Genius - Animations
   Version: 1.3.0
   GPU-Accelerated (transform/opacity only)
   ==================================== */

/* ============ COMPASS ANIMATIONS ============ */

/* Smooth compass needle rotation with physics-based damping */
@keyframes sg-compass-rotate {
    0% {
        transform: rotate(var(--from-angle, 0deg));
    }
    100% {
        transform: rotate(var(--to-angle, 0deg));
    }
}

/* Needle settlement (slight overshoot for realistic physics) */
@keyframes sg-needle-settle {
    0% {
        transform: rotate(var(--angle)) scale(1);
    }
    40% {
        transform: rotate(calc(var(--angle) + 2deg)) scale(1.02);
    }
    70% {
        transform: rotate(calc(var(--angle) - 1deg)) scale(0.99);
    }
    100% {
        transform: rotate(var(--angle)) scale(1);
    }
}

/* ============ SUN ANIMATIONS ============ */

/* Pulsing glow effect for sun indicator */
@keyframes sg-sun-pulse {
    0%, 100% {
        opacity: 0.9;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

/* Subtle ray rotation */
@keyframes sg-sun-rays-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Sun halo effect */
@keyframes sg-sun-halo {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 214, 10, 0.4),
                    0 0 40px rgba(255, 214, 10, 0.2);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 214, 10, 0.6),
                    0 0 60px rgba(255, 214, 10, 0.3);
    }
}

/* ============ DATA CARD ANIMATIONS ============ */

/* Counter animation (number count-up effect) */
@keyframes sg-counter-pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

/* Card value update flash */
@keyframes sg-value-flash {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* Score improvement celebration */
@keyframes sg-score-celebrate {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.1) rotate(-5deg);
    }
    50% {
        transform: scale(1.15) rotate(0deg);
    }
    75% {
        transform: scale(1.1) rotate(5deg);
    }
}

/* ============ GUIDANCE ANIMATIONS ============ */

/* Directional arrow pulse */
@keyframes sg-arrow-pulse {
    0%, 100% {
        opacity: 0.6;
        transform: translateX(0);
    }
    50% {
        opacity: 1;
        transform: translateX(8px);
    }
}

/* Hint box shake for attention */
@keyframes sg-hint-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ============ SUCCESS ANIMATIONS ============ */

/* Confetti particles for perfect position */
@keyframes sg-confetti-fall {
    0% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Checkmark draw animation */
@keyframes sg-checkmark-draw {
    0% {
        stroke-dashoffset: 100;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* Success ripple effect */
@keyframes sg-success-ripple {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* ============ TILT METER ANIMATIONS ============ */

/* Tilt level smooth transition with spring effect */
@keyframes sg-tilt-spring {
    0% {
        transform: scaleY(var(--from-scale, 0));
    }
    60% {
        transform: scaleY(calc(var(--to-scale, 1) * 1.05));
    }
    100% {
        transform: scaleY(var(--to-scale, 1));
    }
}

/* Needle swing for semicircular meter */
@keyframes sg-needle-swing {
    0% {
        transform: rotate(var(--from-angle, -90deg));
    }
    70% {
        transform: rotate(calc(var(--to-angle, 0deg) + 3deg));
    }
    100% {
        transform: rotate(var(--to-angle, 0deg));
    }
}

/* ============ SCREEN TRANSITIONS ============ */

/* Apple-style fade in */
@keyframes apple-fade {
    from {
        opacity: 0;
        transform: scale(0.98) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Slide up entrance */
@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Modal pop effect */
@keyframes modal-pop {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============ UTILITY ANIMATIONS ============ */

/* Generic fade in */
@keyframes sg-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Spinner rotation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Shimmer loading effect */
@keyframes sg-shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: 200px 0;
    }
}

/* ============ TRANSITION CLASSES ============ */

/* Smooth all transitions */
.sg-smooth-all {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Transform-only (GPU accelerated) */
.sg-smooth-transform {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Opacity-only (GPU accelerated) */
.sg-smooth-opacity {
    transition: opacity 0.3s ease-out;
}

/* Spring physics easing */
.sg-spring {
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Ease-out for snappy feel */
.sg-ease-out {
    transition: all 0.4s cubic-bezier(0, 0, 0.2, 1);
}

/* ============ ACTIVE STATE CLASSES ============ */

/* Apply sun pulse animation */
.sg-sun-pulsing {
    animation: sg-sun-pulse 3s ease-in-out infinite;
}

/* Apply sun rays rotation */
.sg-sun-rotating {
    animation: sg-sun-rays-rotate 60s linear infinite;
}

/* Apply halo effect */
.sg-halo-active {
    animation: sg-sun-halo 2s ease-in-out infinite;
}

/* Apply arrow pulse */
.sg-arrow-pulsing {
    animation: sg-arrow-pulse 1.2s ease-in-out infinite;
}

/* Apply score celebration */
.sg-celebrating {
    animation: sg-score-celebrate 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ============ PERFORMANCE OPTIMIZATIONS ============ */

/* Force GPU acceleration */
.sg-gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}

/* Optimize animations */
.sg-optimized {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ============ ACCESSIBILITY ============ */

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

    .sg-sun-pulsing,
    .sg-sun-rotating,
    .sg-halo-active,
    .sg-arrow-pulsing {
        animation: none !important;
    }
}