/* ==========================================================================
   Next Logistic — motion layer
   Motion is progressive enhancement: the .js class is added before paint.
   ========================================================================== */

@keyframes live-pulse {
    0%, 100% { opacity: .65; transform: scale(.85); }
    50% { opacity: 0; transform: scale(1.6); }
}

@keyframes scroll-line {
    0% { transform: translateX(-100%); }
    45%, 100% { transform: translateX(100%); }
}

@keyframes cue-bob {
    0%, 100% { transform: translateY(-1px); }
    50% { transform: translateY(3px); }
}

@keyframes route-travel {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -760; }
}

@keyframes node-ring {
    from { opacity: .35; transform: scale(.9); }
    to { opacity: .8; transform: scale(1.18); }
}

@keyframes slow-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes art-flow {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -240; }
}

@keyframes hero-in {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes map-in {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes float-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes soft-pulse {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

/* Reveal-on-scroll. Hidden styles only apply after JS boots. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity .8s var(--ease-out),
        transform .9s var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* If the enhancement script fails to boot, content must never stay hidden. */
.reveal-fallback [data-reveal],
.reveal-fallback .hero-anim,
.reveal-fallback .hero__float-card {
    opacity: 1 !important;
    transform: none !important;
}

.js .services-bento > .service-card[data-reveal]:nth-child(2) {
    --reveal-delay: 70ms;
}

.js .services-bento > .service-card[data-reveal]:nth-child(3) {
    --reveal-delay: 90ms;
}

.js .services-bento > .service-card[data-reveal]:nth-child(4) {
    --reveal-delay: 150ms;
}

.js .services-bento > .service-card[data-reveal]:nth-child(5) {
    --reveal-delay: 210ms;
}

/* Hero entrance choreography */
.js .hero-anim {
    opacity: 0;
    animation: hero-in .95s var(--ease-out) both;
}

.js .hero-anim--1 { animation-delay: .1s; }
.js .hero-anim--2 { animation-delay: .22s; }
.js .hero-anim--3 { animation-delay: .32s; }
.js .hero-anim--4 { animation-delay: .44s; }
.js .hero-anim--5 { animation-delay: .56s; }
.js .hero-anim--6 { animation-delay: .68s; }

.js .hero-anim--map {
    animation-name: map-in;
    animation-duration: 1.25s;
    animation-delay: .2s;
}

.js .hero__float-card {
    opacity: 0;
    animation: float-in .8s var(--ease-out) .95s both;
}

.hero__map-frame {
    will-change: transform;
    transition: transform .8s var(--ease-out);
}

/* Route and illustration life */
.hero-route--glow {
    animation: soft-pulse 5.5s ease-in-out infinite alternate;
}

.service-card .art-dash,
.service-detail .art-dash {
    animation: art-flow 14s linear infinite;
}

.hero-node--hub .hero-node__halo {
    transform-box: fill-box;
    transform-origin: center;
    animation: node-ring 5s ease-in-out infinite alternate;
}

/* Draw line on the process rail once it enters the viewport. */
.process__rail-progress {
    transition: width .6s var(--ease-out);
}

/* Prevent transitions from firing before fonts have settled. */
.fonts-loading body {
    opacity: .01;
}

/* Reduced motion: preserve content, remove movement. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }

    .js [data-reveal],
    .js .hero-anim,
    .js .hero__float-card {
        opacity: 1;
        transform: none;
    }

    .hero__map-frame {
        transform: none !important;
    }

    .partnership__orb > svg {
        animation: none;
    }

    .hero-route--pulse,
    .scroll-cue__line::after,
    .scroll-cue__icon,
    .live-dot::after,
    .hero-node__ring--soft,
    .service-card .art-dash,
    .service-detail .art-dash {
        animation: none;
    }
}