/* ==========================================================================
   HilSec - Keyframes, motion utility classes, reduced-motion overrides
   ========================================================================== */

@keyframes loaderSlide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

@keyframes pulseGlow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(0, 255, 243, 0.4)); }
    50% { filter: drop-shadow(0 0 16px rgba(0, 255, 243, 0.8)); }
}

@keyframes scrollCueMove {
    0% { top: 6px; opacity: 1; }
    70% { opacity: 1; }
    100% { top: 24px; opacity: 0; }
}

@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes fadeInBlock {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes socPulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes socCardPulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 255, 243, 0.55); }
    70% { box-shadow: 0 0 0 7px rgba(0, 255, 243, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 255, 243, 0); }
}

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

@keyframes journeyDashFlow {
    to { background-position-x: -20px; }
}

@keyframes journeyBadgePulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--color-navy-deep), 0 0 22px rgba(0, 255, 243, 0.45); }
    50% { box-shadow: 0 0 0 4px var(--color-navy-deep), 0 0 34px rgba(0, 255, 243, 0.75); }
}

@keyframes timelinePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 243, 0.35); }
    50% { box-shadow: 0 0 0 10px rgba(0, 255, 243, 0); }
}

@keyframes hiringMarkerPulse {
    0%, 100% { r: 7; opacity: 1; }
    50% { r: 9; opacity: 0.75; }
}

@keyframes hiringPinRing {
    0% { transform: scale(0.85); opacity: 0.9; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* Perpetual "traffic flowing" motion on the road's lane markings -
   independent of scroll, so the road feels alive even before you move.
   Two directions + three wiggle phases give the three lanes their own
   "funny" asynchronous personality instead of marching in lockstep. */
@keyframes hiringDashFlow {
    to { stroke-dashoffset: -48; }
}

@keyframes hiringDashFlowReverse {
    to { stroke-dashoffset: 48; }
}

@keyframes hiringLaneWiggle1 {
    0%, 100% { transform: translate(-7px, -4px) rotate(-1.5deg); }
    50% { transform: translate(-9px, 5px) rotate(1.5deg); }
}

@keyframes hiringLaneWiggle2 {
    0%, 100% { transform: translate(0, 6px) rotate(1deg); }
    50% { transform: translate(0, -6px) rotate(-1deg); }
}

@keyframes hiringLaneWiggle3 {
    0%, 100% { transform: translate(7px, -3px) rotate(2deg); }
    50% { transform: translate(9px, 4px) rotate(-2deg); }
}

@keyframes hiringRippleExpand {
    0% { transform: scale(0.4); opacity: 0.55; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* Hero entrance reveal targets (animated in by animations.js via GSAP) */
.hero-reveal {
    will-change: transform, opacity;
}

/* Page transition fade (app.js intercepts internal link clicks) */
body.page-transition-ready {
    transition: opacity 0.22s ease;
}

body.page-fade-out {
    opacity: 0;
}

/* Respect reduced motion: disable custom cursor, tilt, magnetic pull, parallax */
@media (prefers-reduced-motion: reduce) {
    #cursor-dot,
    #cursor-glow {
        display: none !important;
    }

    body.has-custom-cursor,
    body.has-custom-cursor a,
    body.has-custom-cursor button,
    body.has-custom-cursor .btn {
        cursor: auto;
    }

    .btn,
    .service-card,
    .product-card,
    .why-card,
    .case-study-card,
    .industry-card,
    .soc-card,
    .category-card,
    .journey-step,
    .hiring-pin-marker,
    .hiring-stage {
        transform: none !important;
        transition: none !important;
    }

    .hero-soc-panel::before,
    .soc-card::before,
    .soc-card i,
    .category-card.is-jump-target,
    .journey-connector-fill,
    .journey-step-number,
    .hiring-road-marker,
    .hiring-road-dashes,
    .hiring-stage.is-active .hiring-pin-marker::after,
    .hiring-pin-ripple {
        animation: none !important;
        transition: none !important;
    }

    .hiring-stage {
        opacity: 1 !important;
    }

    #ambient-network {
        display: none !important;
    }
}