/* ========================================
   ADVANCED ANIMATIONS & MOBILE ENHANCEMENTS
   50+ Professional Animations
   ======================================== */

:root {
    --anim-duration-fast: 0.3s;
    --anim-duration-normal: 0.6s;
    --anim-duration-slow: 1s;
    --anim-duration-very-slow: 1.5s;
    --anim-easing: cubic-bezier(0.4, 0.0, 0.2, 1);
    --anim-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --anim-easing-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --anim-easing-sharp: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ========================================
   FUNDAMENTAL ANIMATIONS (CORE)
   ======================================== */

/* FADE ANIMATIONS */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

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

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

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

/* SCALE ANIMATIONS */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes scaleUp {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* SLIDE ANIMATIONS */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* ROTATE ANIMATIONS */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes spinReverse {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

@keyframes rotateCW {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateCCW {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

/* ========================================
   BOUNCE & ELASTIC ANIMATIONS
   ======================================== */

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

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

@keyframes bounceUp {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-30px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes elasticBounce {
    0%, 100% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-10px);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-15px);
    }
    80% {
        transform: translateY(-5px);
    }
}

@keyframes wobble {
    0%, 100% {
        transform: translateX(0);
    }
    15% {
        transform: translateX(-5px) rotate(-5deg);
    }
    30% {
        transform: translateX(5px) rotate(3deg);
    }
    45% {
        transform: translateX(-5px) rotate(-3deg);
    }
    60% {
        transform: translateX(3px) rotate(2deg);
    }
    75% {
        transform: translateX(-2px) rotate(-1deg);
    }
}

/* ========================================
   PULSE & GLOW ANIMATIONS
   ======================================== */

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(139, 92, 246, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(139, 92, 246, 1);
    }
}

@keyframes glowText {
    0%, 100% {
        text-shadow: 0 0 5px rgba(139, 92, 246, 0.5);
    }
    50% {
        text-shadow: 0 0 20px rgba(139, 92, 246, 1), 0 0 40px rgba(99, 102, 241, 0.8);
    }
}

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

@keyframes heartBeat {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.3);
    }
    50% {
        transform: scale(1);
    }
}

/* ========================================
   SHIMMER & GRADIENT ANIMATIONS
   ======================================== */

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

@keyframes shimmerWave {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ========================================
   FLIP & 3D ANIMATIONS
   ======================================== */

@keyframes flip {
    0% {
        transform: perspective(400px) rotateY(0);
    }
    100% {
        transform: perspective(400px) rotateY(360deg);
    }
}

@keyframes flipHorizontal {
    0% {
        transform: scaleX(1);
    }
    50% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

@keyframes flipVertical {
    0% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}

@keyframes cubeRotate {
    0% {
        transform: perspective(800px) rotateX(0) rotateY(0) rotateZ(0);
    }
    100% {
        transform: perspective(800px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

/* ========================================
   SHAKE & VIBRATION ANIMATIONS
   ======================================== */

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(5px);
    }
    75% {
        transform: translateX(-5px);
    }
}

@keyframes jiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-1deg);
    }
    75% {
        transform: rotate(1deg);
    }
}

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

/* ========================================
   WAVE ANIMATIONS
   ======================================== */

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(14deg);
    }
    20% {
        transform: rotate(-8deg);
    }
    30% {
        transform: rotate(14deg);
    }
    40% {
        transform: rotate(-4deg);
    }
    50% {
        transform: rotate(10deg);
    }
    60% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* ========================================
   INTERACTIVE 3D ELEMENTS
   Mouse tilt + scroll depth (JS-driven)
   ======================================== */
.tilt-3d {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.tilt-3d-inner {
    transform-style: preserve-3d;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .tilt-3d-inner {
        transform: none !important;
    }
}

/* Disable 3D tilt on touch/mobile where hover isn't reliable */
@media (hover: none), (pointer: coarse) {
    .tilt-3d-inner {
        transform: none !important;
    }
}

@keyframes waveText {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes undulate {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-10px);
    }
    75% {
        transform: translateY(10px);
    }
}

/* ========================================
   MORPH & SHAPE-SHIFT ANIMATIONS
   ======================================== */

@keyframes morph {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

@keyframes morphSmooth {
    0% {
        border-radius: 0%;
    }
    25% {
        border-radius: 40%;
    }
    50% {
        border-radius: 50%;
    }
    75% {
        border-radius: 60%;
    }
    100% {
        border-radius: 0%;
    }
}

/* ========================================
   LIQUID & SMOOTH ANIMATIONS
   ======================================== */

@keyframes liquidSwipe {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes liquidFlow {
    0%, 100% {
        transform: translateY(0) scaleY(1);
    }
    50% {
        transform: translateY(5px) scaleY(1.05);
    }
}

/* ========================================
   CHARACTER & TEXT ANIMATIONS
   ======================================== */

@keyframes charReveal {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wordBurst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes textChar {
    0% {
        opacity: 0;
        transform: rotateY(90deg);
    }
    100% {
        opacity: 1;
        transform: rotateY(0);
    }
}

/* ========================================
   PARTICLE & BURST ANIMATIONS
   ======================================== */

@keyframes particleFloat {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) translateX(var(--tx, 0));
    }
}

@keyframes particleBurst {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0);
    }
}

@keyframes confetti {
    0% {
        transform: translate(var(--tx), 0) rotateZ(0);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) rotateZ(720deg);
        opacity: 0;
    }
}

/* ========================================
   UTILITY ANIMATION CLASSES
   ======================================== */

.fadeIn {
    animation: fadeIn var(--anim-duration-normal) var(--anim-easing) forwards;
}

.fadeInUp {
    animation: fadeInUp var(--anim-duration-normal) var(--anim-easing) forwards;
}

.fadeInDown {
    animation: fadeInDown var(--anim-duration-normal) var(--anim-easing) forwards;
}

.fadeInLeft {
    animation: fadeInLeft var(--anim-duration-normal) var(--anim-easing) forwards;
}

.fadeInRight {
    animation: fadeInRight var(--anim-duration-normal) var(--anim-easing) forwards;
}

.scaleIn {
    animation: scaleIn var(--anim-duration-normal) var(--anim-easing-elastic) forwards;
}

.popIn {
    animation: popIn var(--anim-duration-fast) var(--anim-easing-bounce) forwards;
}

.slideInLeft {
    animation: slideInLeft var(--anim-duration-normal) var(--anim-easing) forwards;
}

.slideInRight {
    animation: slideInRight var(--anim-duration-normal) var(--anim-easing) forwards;
}

.slideInUp {
    animation: slideInUp var(--anim-duration-normal) var(--anim-easing) forwards;
}

.slideInDown {
    animation: slideInDown var(--anim-duration-normal) var(--anim-easing) forwards;
}

.bounceIn {
    animation: bounceIn var(--anim-duration-normal) var(--anim-easing-bounce) forwards;
}

.spin {
    animation: spin 2s linear infinite;
}

.pulse {
    animation: pulse 2s var(--anim-easing) infinite;
}

.glow {
    animation: glow 2s var(--anim-easing) infinite;
}

.breathe {
    animation: breathe 2.5s ease-in-out infinite;
}

.shake {
    animation: shake 0.5s var(--anim-easing) forwards;
}

.wobble {
    animation: wobble 0.8s ease-in-out forwards;
}

.wave {
    animation: wave 0.8s ease-in-out forwards;
    transform-origin: 70% 70%;
    display: inline-block;
}

.morph {
    animation: morph 4s ease-in-out infinite;
}

/* ========================================
   MOBILE GESTURE ANIMATIONS
   ======================================== */

@keyframes swipeLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@keyframes swipeRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes pullDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes touchPress {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

/* ========================================
   MOBILE-SPECIFIC ANIMATIONS
   ======================================== */

@keyframes mobileSwipeIn {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fingerTap {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes pinchClose {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0.8);
    }
}

@keyframes pinchOpen {
    from {
        transform: scale(0.8);
    }
    to {
        transform: scale(1);
    }
}

/* ========================================
   PARALLAX & SCROLL EFFECTS
   ======================================== */

@keyframes parallaxFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

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

/* ========================================
   BUTTON & INTERACTIVE ANIMATIONS
   ======================================== */

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    animation: ripple 0.6s ease-out;
    pointer-events: none;
}

@keyframes buttonHover {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-2px);
    }
}

@keyframes buttonPress {
    from {
        transform: translateY(-2px);
    }
    to {
        transform: translateY(0);
    }
}

/* ========================================
   LOADING & PROGRESS ANIMATIONS
   ======================================== */

@keyframes loadingDots {
    0%, 100% {
        opacity: 0.4;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes progressBar {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes skeletonLoading {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* ========================================
   NOTIFICATION & TOAST ANIMATIONS
   ======================================== */

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

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

/* ========================================
   MOBILE LAYOUT OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
    /* Reduce animation duration on mobile for performance */
    :root {
        --anim-duration-fast: 0.15s;
        --anim-duration-normal: 0.3s;
        --anim-duration-slow: 0.6s;
    }

    /* Disable parallax on mobile */
    [data-parallax] {
        transform: none !important;
    }

    /* Optimize touch animations */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Mobile-first animations */
    .fadeInUp {
        animation: fadeInUp var(--anim-duration-fast) var(--anim-easing) forwards;
    }

    .slide-up {
        animation: slideInUp var(--anim-duration-fast) var(--anim-easing) forwards;
    }

    /* Smooth scroll on mobile */
    html {
        scroll-behavior: smooth;
    }

    /* FAB bounce on mobile */
    .floating-action-button {
        animation: bounce 1s ease-in-out infinite;
    }

    /* Touch-friendly ripple */
    .ripple {
        background: rgba(139, 92, 246, 0.3);
    }
}

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

/* GPU acceleration */
.fadeIn,
.fadeInUp,
.fadeInDown,
.slideInLeft,
.slideInRight,
.scaleIn,
.popIn,
.bounceIn {
    will-change: opacity, transform;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   THEME-AWARE ANIMATIONS
   ======================================== */

[data-theme="dark"] {
    --glow-color: rgba(139, 92, 246, 1);
}

[data-theme="light"] {
    --glow-color: rgba(99, 102, 241, 1);
}