/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS — Keyframes · Scroll Reveal · Hover FX
   banszky.men
═══════════════════════════════════════════════════════════════ */

/* ── Gradient shift for section titles ── */
@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* ── Hero headline shimmer ── */
@keyframes heroShimmer {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

/* ── Mesh background pulse ── */
@keyframes meshPulse {

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

    50% {
        opacity: 0.75;
        transform: scale(1.05);
    }
}

/* ── Premium Ken Burns ── */
@keyframes premiumKenBurns {
    0% {
        transform: scale(1.15) translate(1%, 1%);
        filter: brightness(0.7);
    }

    100% {
        transform: scale(1) translate(0, 0);
        filter: brightness(1);
    }
}

/* ── Layer-based Reveal (Clip Path) ── */
@keyframes layerReveal {
    0% {
        clip-path: inset(0 100% 0 0);
        /* Wipes from right to left */
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

/* ── Particles Float (JS generated) ── */
@keyframes particleFloat {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }

    20% {
        opacity: 0.8;
    }

    80% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(-40px) scale(0);
        opacity: 0;
    }
}

/* ── Rainbow (originZero link) ── */
@keyframes rainbow-shift {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

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

    to {
        opacity: 1;
    }
}

/* ── Zoom in (lightbox) ── */
@keyframes zoomIn {
    from {
        transform: scale(0.75);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ── Float (avatar card) ── */
@keyframes floatY {

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

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



/* ── Scroll Reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

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