/**
 * Brake IQ - Scroll & Custom Keyframe Animations
 */

/* AOS Overrides / Tweaks */
[data-aos] {
    pointer-events: none;
}

[data-aos].aos-animate {
    pointer-events: auto;
}

/* Custom Floating Telemetry Labels */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Pulse animation for important data nodes or warning indicators */
@keyframes pulse-ring {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 180, 216, 0.4);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 180, 216, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 180, 216, 0);
    }
}

.pulse-node {
    animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

/* Pulse animation for orange warning nodes */
@keyframes pulse-ring-orange {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

.pulse-node-orange {
    animation: pulse-ring-orange 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

/* Telemetry Line dash draw animation on load */
@keyframes dash {
    to {
        stroke-dashoffset: -20;
    }
}

.telemetry-line path {
    animation: dash 5s linear infinite;
}

/* CSS Loader Spinner for forms */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--color-accent-primary);
    border-radius: var(--radius-round);
    animation: spin 0.8s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Accessibility settings - Disable animations if preferred */
@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        transition-property: none !important;
        transform: none !important;
        animation: none !important;
    }
    
    .telemetry-pin {
        animation: none !important;
    }
    
    .pulse-node,
    .pulse-node-orange,
    .telemetry-line path,
    .spinner {
        animation: none !important;
    }
}