/* ==========================================================================
   ElectroPC — Animations
   ========================================================================== */

/* ---- Animated Gradient Background (Hero sections) ---- */
@keyframes gradient-shift {
    0%   { background-position: 0% 50%; }
    25%  { background-position: 50% 100%; }
    50%  { background-position: 100% 50%; }
    75%  { background-position: 50% 0%; }
    100% { background-position: 0% 50%; }
}

.animated-gradient {
    background: linear-gradient(
        -45deg,
        #050A1A,
        #0A1845,
        #0064FF,
        #A130FF,
        #CC1CF7,
        #A130FF,
        #0064FF,
        #0A1845
    );
    background-size: 400% 400%;
    animation: gradient-shift 12s ease infinite;
}

[data-theme="light"] .animated-gradient {
    background: linear-gradient(
        -45deg,
        #EEF4FF,
        #dbeafe,
        #bfdbfe,
        #E8D5FF,
        #F5D0FE,
        #E8D5FF,
        #bfdbfe,
        #EEF4FF
    );
    background-size: 400% 400%;
    animation: gradient-shift 12s ease infinite;
}

/* ---- Floating / Subtle movement ---- */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.float {
    animation: float 6s ease-in-out infinite;
}

.float--delay-1 { animation-delay: 1s; }
.float--delay-2 { animation-delay: 2s; }
.float--delay-3 { animation-delay: 3s; }

/* ---- Pulse glow (for CTA buttons, badges) ---- */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(0,100,255,0.2), 0 0 10px rgba(161,48,255,0.1); }
    50%      { box-shadow: 0 0 20px rgba(0,100,255,0.4), 0 0 40px rgba(161,48,255,0.2); }
}

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

/* ---- Aurora gradient (moving mesh gradient) ---- */
@keyframes aurora {
    0%   { background-position: 0% 50%; }
    33%  { background-position: 100% 50%; }
    66%  { background-position: 50% 100%; }
    100% { background-position: 0% 50%; }
}

.aurora-gradient {
    background: linear-gradient(-45deg, #0064FF, #A130FF, #CC1CF7, #0064FF);
    background-size: 300% 300%;
    animation: aurora 8s ease infinite;
}

/* ---- Fade in stagger for grids ---- */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stagger-children > * {
    opacity: 0;
    animation: fade-in-up 0.5s ease forwards;
}

.stagger-children.is-visible > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children.is-visible > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children.is-visible > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children.is-visible > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-children.is-visible > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children.is-visible > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-children.is-visible > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-children.is-visible > *:nth-child(8) { animation-delay: 0.4s; }

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

.text-shimmer {
    background: linear-gradient(
        90deg,
        var(--color-text) 0%,
        var(--color-primary) 40%,
        var(--color-secondary) 60%,
        var(--color-text) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: text-shimmer 4s linear infinite;
}

/* ---- Slide in from sides (mobile menu) ---- */
@keyframes slide-in-right {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes slide-out-right {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}

/* ---- Counter counting animation will be handled by JS ---- */

/* ---- Orb / Blob background decorations ---- */
@keyframes blob-move {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(30px, -50px) scale(1.1); }
    50%      { transform: translate(-20px, 20px) scale(0.95); }
    75%      { transform: translate(20px, 40px) scale(1.05); }
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    pointer-events: none;
    animation: blob-move 20s ease-in-out infinite;
}

.blob--primary {
    background: #0064FF;
}

.blob--secondary {
    background: #A130FF;
    animation-delay: -7s;
}

.blob--accent {
    background: #CC1CF7;
    animation-delay: -14s;
}

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

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

    .reveal {
        opacity: 1;
        transform: none;
    }

    .stagger-children > * {
        opacity: 1;
        animation: none;
    }
}