/* ==============================
   💫 UTILITÁRIOS PRONTOS — ANIMAÇÕES
============================== */
/* === Fade === */
.fadeIn {
    animation: fadeIn 1s ease-in-out forwards;
}

.fadeInFast {
    animation: fadeIn 0.5s ease-in-out forwards;
}

.fadeInSlow {
    animation: fadeIn 2.5s ease-in-out forwards;
}

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

/* === Slide === */
.slideInTop {
    animation: slideInFromTop 0.6s ease-out forwards;
}

.slideInBottom {
    animation: slideInFromBottom 0.6s ease-out forwards;
}

.slideInLeft {
    animation: slideInFromLeft 0.6s ease-out forwards;
}

.slideInRight {
    animation: slideInFromRight 0.6s ease-out forwards;
}

/* === Zoom === */
.zoomIn {
    animation: zoomIn 0.6s ease-out forwards;
}

.zoomInSlow {
    animation: zoomIn 1.2s ease-out forwards;
}

.zoomOut {
    animation: zoomOut 0.6s ease-in forwards;
}

.zoomOutFast {
    animation: zoomOut 0.4s ease-in forwards;
}

/* === Float === */
.float {
    animation: float 3s ease-in-out infinite;
}

.floatLogo {
    animation: floatLogo 1.5s ease-in-out infinite;
}

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

/* === Pulse === */
.pulse {
    animation: pulse 1.5s infinite ease-in-out;
}

.pulseSlow {
    animation: pulse 3s infinite ease-in-out;
}

.pulseFast {
    animation: pulse 0.8s infinite ease-in-out;
}

/* === Glow / Shimmer === */
.glow {
    animation: glow 2s infinite ease-in-out;
}

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

.shimmer {
    animation: shimmer 20s linear infinite;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.1) 75%);
    background-size: 200% 200%;
}

/* === Spin / Rotate === */
.spin {
    animation: spin 1.5s linear infinite;
}

.spinSlow {
    animation: spin 3s linear infinite;
}

.spinFast {
    animation: spin 0.8s linear infinite;
}

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

/* === Bounce === */
.bounce {
    animation: bounce 1.2s ease-in-out infinite;
}

.bounceOnce {
    animation: bounce 1s ease-in-out 1;
}

/* === Carregamentos / Loaders === */
.loadingPulse {
    animation: loadingPulse 1s infinite ease-in-out;
}

.loadingPulseSlow {
    animation: loadingPulse 2s infinite ease-in-out;
}

/* === Transições de Página === */
.page-transition {
    animation: pageFadeZoom 0.6s ease;
}

.page-transition-slow {
    animation: pageFadeZoom 1.2s ease;
}

.page-slide {
    animation: pageSlide 0.8s ease-out;
}

.page-sweep {
    animation: sweep 0.8s ease-in-out;
}

.reveal {
    animation: reveal 0.8s ease forwards;
}

/* === Combos === */
.fade-slide-left {
    animation: fadeIn 0.8s ease-out, slideInFromLeft 0.8s ease-out;
}

.fade-slide-right {
    animation: fadeIn 0.8s ease-out, slideInFromRight 0.8s ease-out;
}

.zoom-fade {
    animation: fadeIn 0.6s ease-out, zoomIn 0.8s ease-out;
}




/* ==============================
   🎬 ANIMAÇÕES DE ENTRADA / SAÍDA
============================== */

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

    to {
        opacity: 1;
    }
}

/* Fade Out */
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Slide In - Direções variadas */
@keyframes slideInFromLeft {
    from {
        transform: translateX(-40px);
        opacity: 0;
    }

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

@keyframes slideInFromRight {
    from {
        transform: translateX(40px);
        opacity: 0;
    }

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

@keyframes slideInFromBottom {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

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

/* Zoom In / Out */
@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

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

@keyframes zoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.8);
        opacity: 0;
    }
}

/* ==============================
   ✨ ANIMAÇÕES DECORATIVAS
============================== */

/* Float suave (objeto “flutuando”) */
@keyframes float {

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

    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}

/* Float logo personalizado */
@keyframes floatLogo {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-10px) rotate(-5deg);
    }

    50% {
        transform: translateY(-10px) rotate(5deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* Pulso (leve respiração visual) */
@keyframes pulse {

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

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

/* Brilho que percorre */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

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

/* Brilho pulsante (efeito neon) */
@keyframes glow {

    0%,
    100% {
        box-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary);
    }

    50% {
        box-shadow: 0 0 20px var(--secondary), 0 0 40px var(--secondary);
    }
}

/* ==============================
   🔄 ANIMAÇÕES DE CARREGAMENTO
============================== */

/* Rotação contínua */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

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

/* Pulso de carregamento */
@keyframes loadingPulse {

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

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

/* Bounce (efeito pulo) */
@keyframes bounce {

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

    40% {
        transform: translateY(-15px);
    }

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

/* Flip 3D */
@keyframes flipIn {
    from {
        transform: rotateY(90deg);
        opacity: 0;
    }

    to {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

/* ==============================
   ⚡ TRANSIÇÕES DE PÁGINA
============================== */

/* Fade e zoom combinados */
@keyframes pageFadeZoom {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

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

/* Slide lateral tipo SPA */
@keyframes pageSlide {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

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

/* Sweep (varredura luminosa) */
@keyframes sweep {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

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


/* Efeito de "traço surgindo" e leve brilho */
@keyframes reveal {
    0% {
        opacity: 0;
        transform: scale(0.95) rotateY(0deg);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        clip-path: inset(100% 0 0 0);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.02) rotateY(15deg);
        clip-path: inset(0 0 0 0);
        box-shadow: 0 0 12px rgba(255, 0, 80, 0.3);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotateY(0);
        clip-path: inset(0 0 0 0);
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    }
}