/* ==========================================================================
   SAFETY SUB-SECTION ANIMATIONS
   Rotating gear/cog effect + Floating Particles
   ========================================================================== */

/* 1. Main Rotating Gear/Ring Background */
@keyframes rotate-slow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotate-reverse-slow {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes float-badge {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* The dotted/dashed ring */
.safety-anim-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    border: 2px dashed #e0e6ed;
    z-index: 0;
    margin-top: -60%;
    /* Half of height to center */
    margin-left: -60%;
    animation: rotate-slow 60s linear infinite;
    pointer-events: none;
}

/* Inner orbit with a small dot */
.safety-anim-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 140%;
    border-radius: 50%;
    border: 1px solid rgba(0, 96, 255, 0.1);
    z-index: 0;
    margin-top: -70%;
    margin-left: -70%;
    animation: rotate-reverse-slow 40s linear infinite;
    pointer-events: none;
}

.safety-anim-dot {
    position: absolute;
    top: -6px;
    /* Position on the ring line */
    left: 50%;
    width: 12px;
    height: 12px;
    background-color: #0060ff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 96, 255, 0.5);
}

/* 3D Card Hover Effect Base */
.safety-3d-card {
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    transform-style: preserve-3d;
}

.safety-3d-card:hover {
    transform: rotate(0deg) scale(1.02) !important;
    /* Reset rotation on hover for clear view */
}

/* Floating Badge Animation */
.safety-badge-float {
    animation: float-badge 4s ease-in-out infinite;
}