/* ==========================================================================
   Animations & Interactions
   ========================================================================== */

/* Magnetic Button / Hover Glow */
.mag-btn {
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

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

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

.fc-1 { animation: float 7s ease-in-out infinite 1s; }
.fc-2 { animation: float 8s ease-in-out infinite 0.5s; }

/* Scroll Reveal Classes (Triggered by Intersection Observer) */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.25, 1);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.25, 1);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.25, 1);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.8s cubic-bezier(0.25, 1, 0.25, 1);
}

/* Active State for Reveals */
.reveal-active {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Delays for Staggered Animations */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* Background Spheres Pulsing */
@keyframes pulse {
    0% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.5; }
    100% { transform: scale(1); opacity: 0.3; }
}

.sphere-1 { animation: pulse 15s infinite alternate; }
.sphere-2 { animation: pulse 12s infinite alternate-reverse; }

/* Custom Cursor Glow effect (managed by JS) */
.cursor-glow {
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.1) 0%, rgba(0, 180, 216, 0) 70%);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    opacity: 0;
    mix-blend-mode: screen;
}

@media (max-width: 1024px) {
    .cursor-glow { display: none; }
    .mag-btn { transition: none; }

    /* No celular e tablet, os elementos NUNCA devem iniciar com opacity: 0 */
    .reveal-up, .reveal-left, .reveal-right, .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}