/* ============================================
   QUANTARAL — KEYFRAME ANIMATIONS
   ============================================ */

/* Fade effects */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Preloader */
@keyframes pulse-logo {

    0%,
    100% {
        filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.4));
    }

    50% {
        filter: drop-shadow(0 0 30px rgba(123, 47, 255, 0.8));
    }
}

@keyframes loader-fill {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@keyframes sym-flash {

    0%,
    100% {
        opacity: 0.15;
        color: #4a5a7a;
    }

    50% {
        opacity: 1;
        color: #00d4ff;
        text-shadow: 0 0 15px #00d4ff;
    }
}

/* Orbs */
@keyframes orb-float {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(40px, 30px) scale(1.1);
    }
}

/* Logo ping */
@keyframes ping {
    0% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }

    75%,
    100% {
        transform: translateY(-50%) scale(2.5);
        opacity: 0;
    }
}

/* Scroll indicator */
@keyframes scroll-pulse {

    0%,
    100% {
        opacity: 1;
        height: 50px;
    }

    50% {
        opacity: 0.3;
        height: 30px;
    }
}

/* Atom */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes core-pulse {

    0%,
    100% {
        box-shadow: 0 0 30px #00d4ff, 0 0 80px rgba(0, 212, 255, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 50px #7b2fff, 0 0 120px rgba(123, 47, 255, 0.5);
        transform: scale(1.1);
    }
}

@keyframes qring-pulse {
    0% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.05);
    }

    100% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Team avatar */
@keyframes avatar-glow {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.08);
    }
}

/* General float */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

/* Qubit twinkle */
@keyframes qubit-tick {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(0.8);
    }
}

/* Horizon line */
@keyframes horizon-scan {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Glitch text */
@keyframes glitch {
    0% {
        clip-path: inset(20% 0 70% 0);
        transform: translateX(-4px);
    }

    20% {
        clip-path: inset(60% 0 10% 0);
        transform: translateX(4px);
    }

    40% {
        clip-path: inset(40% 0 50% 0);
        transform: translateX(-2px);
    }

    60% {
        clip-path: inset(10% 0 80% 0);
        transform: translateX(2px);
    }

    80% {
        clip-path: inset(80% 0 5% 0);
        transform: translateX(-4px);
    }

    100% {
        clip-path: inset(20% 0 70% 0);
        transform: translateX(0);
    }
}

.glitch-text {
    position: relative;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: inherit;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.glitch-text::before {
    color: #ff2d78;
    animation: glitch 4s 2s infinite;
}

.glitch-text::after {
    color: #00d4ff;
    animation: glitch 4s 2.5s infinite;
}

/* Typewriter cursor blink */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.typewriter-cursor {
    display: inline-block;
    width: 3px;
    height: 0.9em;
    background: #00d4ff;
    margin-left: 4px;
    vertical-align: middle;
    animation: blink 1s infinite;
}

/* Section line scan */
@keyframes line-scan {
    0% {
        left: 0;
        width: 0;
        opacity: 1;
    }

    50% {
        left: 0;
        width: 100%;
        opacity: 1;
    }

    100% {
        left: 100%;
        width: 0;
        opacity: 0;
    }
}

/* Stars twinkle */
@keyframes star-twinkle {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}