/*=========================================
        ENHANCED ANIMATIONS
=========================================*/

/* Floating Animation */
@keyframes float{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-15px);
    }
    100%{
        transform:translateY(0px);
    }
}

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

/* Reverse Rotate */
@keyframes rotateReverse{
    from{
        transform:rotate(360deg);
    }
    to{
        transform:rotate(0deg);
    }
}

/* Enhanced Glow Pulse */
@keyframes glow{
    0%{
        box-shadow:0 0 10px #00E5FF, 0 0 20px rgba(0,229,255,0.3);
    }
    50%{
        box-shadow:
        0 0 25px #00E5FF,
        0 0 50px #00E5FF,
        0 0 75px rgba(0,229,255,0.2);
    }
    100%{
        box-shadow:0 0 10px #00E5FF, 0 0 20px rgba(0,229,255,0.3);
    }
}

/* Enhanced Fade Up */
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Slide In Left */
@keyframes slideInLeft{
    from{
        opacity:0;
        transform:translateX(-50px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

/* Scale In */
@keyframes scaleIn{
    from{
        opacity:0;
        transform:scale(0.8);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

/* Bounce */
@keyframes bounce{
    0%, 20%, 50%, 80%, 100%{
        transform:translateY(0);
    }
    40%{
        transform:translateY(-10px);
    }
    60%{
        transform:translateY(-5px);
    }
}

/* Shimmer */
@keyframes shimmer{
    0%{
        background-position: -200% center;
    }
    100%{
        background-position: 200% center;
    }
}

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

/* Pulse Ring */
@keyframes pulseRing{
    0%{
        transform: scale(0.8);
        opacity: 0.8;
    }
    100%{
        transform: scale(1.2);
        opacity: 0;
    }
}

/*=========================================
        HERO ANIMATIONS
=========================================*/

.hero-left{
    animation:slideInLeft 1s ease-out;
}

.hero-right{
    animation:fadeUp 1.2s ease-out 0.3s;
}

.physics-illustration{
    animation: scaleIn 1.5s ease-out 0.6s;
}

/*=========================================
        COIL ROTATION
=========================================*/

.outer-ring{
    animation: rotate 20s linear infinite;
}

.middle-ring{
    animation: rotateReverse 15s linear infinite;
}

.inner-ring{
    animation: rotate 10s linear infinite;
}

.core{
    animation:
    glow 3s infinite,
    float 4s ease-in-out infinite;
}

/*=========================================
        BUTTON ANIMATIONS
=========================================*/

.primary-btn{
    animation: glow 2s infinite;
}

.primary-btn:hover{
    animation: bounce 0.5s ease;
}

.secondary-btn:hover{
    animation: pulse 0.3s ease;
}

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

.exp-card{
    animation: fadeUp 0.8s ease;
    animation-fill-mode: both;
}

.exp-card:nth-child(1){ animation-delay: 0.1s; }
.exp-card:nth-child(2){ animation-delay: 0.2s; }
.exp-card:nth-child(3){ animation-delay: 0.3s; }
.exp-card:nth-child(4){ animation-delay: 0.4s; }
.exp-card:nth-child(5){ animation-delay: 0.8s; }
.exp-card:nth-child(6){ animation-delay: 0.6s; }

.stat-card{
    animation: fadeUp 0.8s ease;
    animation-fill-mode: both;
}

.stat-card:nth-child(1){ animation-delay: 0.1s; }
.stat-card:nth-child(2){ animation-delay: 0.2s; }
.stat-card:nth-child(3){ animation-delay: 0.3s; }
.stat-card:nth-child(4){ animation-delay: 0.4s; }

/*=========================================
        ENHANCED BACKGROUND
=========================================*/

.stars{
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(white 1px, transparent 1px),
        radial-gradient(white 1px, transparent 1px),
        radial-gradient(white 2px, transparent 1px),
        radial-gradient(rgba(255,255,255,0.8) 1px, transparent 1px),
        radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px);
    background-size: 50px 50px, 100px 100px, 150px 150px;
    opacity:.3;
    animation: twinkle 6s ease-in-out infinite;
}

@keyframes twinkle{
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* Enhanced Particles */
.particles{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.particles::before{
    content:"";
    position:absolute;
    width: 500px;
    height: 500px;
    border-radius:50%;
    background:
    radial-gradient(circle,rgba(0,229,255,0.3),transparent 70%);
    top:10%;
    left:60%;
    animation:
    float 10s ease-in-out infinite;
}

.particles::after{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;
    background:
    radial-gradient(circle,rgba(123,97,255,0.3),transparent 70%);
    bottom:10%;
    left:10%;
    animation:
    float 12s ease-in-out infinite reverse;
}

/* Aurora Effect */
.aurora{
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.3;
}

.aurora::before,
.aurora::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(90deg, transparent, rgba(0,229,255,0.1), transparent),
        linear-gradient(90deg, transparent, rgba(123,97,255,0.1), transparent);
    animation: aurora 8s ease-in-out infinite;
}

.aurora::after{
    animation-delay: -4s;
}

@keyframes aurora{
    0%, 100%{
        transform: translateX(-50%) skewX(-10deg);
    }
    50%{
        transform: translateX(50%) skewX(10deg);
    }
}

/* Grid Background */
.grid-bg{
    position: fixed;
    inset: 0;
    background-image: 
        linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
    pointer-events: none;
}

/*=========================================
        SECTION TITLE
=========================================*/

.section-title{
    animation: fadeUp 1s ease;
}

/*=========================================
        ENHANCED HOVER EFFECTS
=========================================*/

.exp-card:hover{
    transform:
        translateY(-12px)
        scale(1.02);
    box-shadow:
        0 0 30px rgba(0,229,255,0.2),
        0 15px 35px rgba(0,229,255,0.1);
}

.stat-card:hover{
    transform:
        translateY(-10px)
        scale(1.02);
    box-shadow:
        0 0 35px rgba(0,229,255,0.25),
        0 20px 40px rgba(0,229,255,0.15);
}

/* Magnetic Field Animation */
@keyframes magneticPulse{
    0%{
        opacity: 0.2;
        transform: scale(1);
    }
    50%{
        opacity: 0.8;
        transform: scale(1.1);
    }
    100%{
        opacity: 0.2;
        transform: scale(1);
    }
}

/* Circuit Current Animation */
@keyframes currentFlow{
    0%{
        stroke-dashoffset: 1000;
        opacity: 0;
    }
    50%{
        stroke-dashoffset: 500;
        opacity: 1;
    }
    100%{
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* Loading Dots */
@keyframes loadingDots{
    0%, 80%, 100%{
        transform: scale(0);
    }
    40%{
        transform: scale(1);
    }
}

/* Wave Animation */
@keyframes wave{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-50%);
    }
}

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

/* Pulsate Animation */
@keyframes pulsate{
    0%, 100%{
        transform: scale(1);
        opacity: 1;
    }
    50%{
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* Glow Animation */
@keyframes glowing{
    0%{
        box-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary);
    }
    50%{
        box-shadow: 0 0 20px var(--primary), 0 0 40px var(--primary), 0 0 60px var(--primary);
    }
    100%{
        box-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary);
    }
}

/* Typewriter Effect */
@keyframes typewriter{
    from{
        width: 0;
    }
    to{
        width: 100%;
    }
}

/* Blink Animation */
@keyframes blink{
    0%, 50%, 100%{
        opacity: 1;
    }
    25%, 75%{
        opacity: 0;
    }
}

/* Elastic Animation */
@keyframes elastic{
    0%{
        transform: scale(1);
    }
    30%{
        transform: scale(1.25);
    }
    40%{
        transform: scale(0.75);
    }
    50%{
        transform: scale(1.15);
    }
    65%{
        transform: scale(0.95);
    }
    75%{
        transform: scale(1.05);
    }
    100%{
        transform: scale(1);
    }
}

/* Slide Down */
@keyframes slideDown{
    from{
        opacity: 0;
        transform: translateY(-30px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

/* Zoom In */
@keyframes zoomIn{
    from{
        opacity: 0;
        transform: scale(0.5);
    }
    to{
        opacity: 1;
        transform: scale(1);
    }
}

/* Rotate Y */
@keyframes rotateY{
    from{
        transform: perspective(400px) rotateY(0deg);
    }
    to{
        transform: perspective(400px) rotateY(360deg);
    }
}

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

/* Swing */
@keyframes swing{
    20%{
        transform: rotate(15deg);
    }
    40%{
        transform: rotate(-10deg);
    }
    60%{
        transform: rotate(5deg);
    }
    80%{
        transform: rotate(-5deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

/* Wiggle */
@keyframes wiggle{
    0%, 100%{
        transform: rotate(-3deg);
    }
    50%{
        transform: rotate(3deg);
    }
}

/* Jello */
@keyframes jello{
    11.1%, 57.1%, 100%{
        transform: skewX(0);
    }
    22.2%, 66.6%{
        transform: skewX(-12deg);
    }
    33.3%, 77.7%{
        transform: skewX(6deg);
    }
    44.4%, 88.8%{
        transform: skewX(-6deg);
    }
}