/* ===========================
   ANIMATIONS & TRANSITIONS
   =========================== */

/* Fade In Up */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade In Left */
.fade-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fade In Right */
.fade-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger Delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }

/* Ambient Pulse */
@keyframes ambientPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}

/* Sensor Pulse */
.sensor-pulse {
    animation: sensorBlink 2s ease-in-out infinite;
}

@keyframes sensorBlink {
    0%, 100% { opacity: 1; r: 4; }
    50% { opacity: 0.4; r: 3; }
}

/* Blink Light */
.blink-light {
    animation: blinkLight 1.5s ease-in-out infinite;
}

.blink-light-delayed {
    animation: blinkLight 1.5s ease-in-out 0.75s infinite;
}

@keyframes blinkLight {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* Bubble Float */
.bubble-float-1 { animation: bubbleUp 6s ease-in-out infinite; }
.bubble-float-2 { animation: bubbleUp 8s ease-in-out 1s infinite; }
.bubble-float-3 { animation: bubbleUp 7s ease-in-out 2s infinite; }
.bubble-float-4 { animation: bubbleUp 5s ease-in-out 0.5s infinite; }
.bubble-float-5 { animation: bubbleUp 9s ease-in-out 3s infinite; }

@keyframes bubbleUp {
    0% { transform: translateY(0) translateX(0); opacity: 0.3; }
    50% { transform: translateY(-30px) translateX(5px); opacity: 0.15; }
    100% { transform: translateY(0) translateX(0); opacity: 0.3; }
}

/* Drone Body Float */
.drone-body-group {
    animation: droneFloat 5s ease-in-out infinite;
}

@keyframes droneFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Scan Beam */
.scan-beam {
    animation: scanPulse 3s ease-in-out infinite;
}

@keyframes scanPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.08; }
}

/* Propeller Spin */
.propeller-left ellipse,
.propeller-right ellipse {
    animation: propSpin 0.5s linear infinite;
    transform-origin: center;
}

@keyframes propSpin {
    0% { ry: 6; }
    25% { ry: 2; }
    50% { ry: 6; }
    75% { ry: 2; }
    100% { ry: 6; }
}

/* Smooth scroll offset for anchors */
:target {
    scroll-margin-top: 100px;
}

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

    .fade-in-up,
    .fade-in-left,
    .fade-in-right {
        opacity: 1;
        transform: none;
    }

    html {
        scroll-behavior: auto;
    }
}