/* ==============================================================
   animations.css
   Every @keyframes definition and the animation-driving classes that
   use them: hero floating badges, the pulsing availability dot, and
   the scroll-reveal fade/slide-up applied across all page fragments.
   Disabled under prefers-reduced-motion in responsive.css.
============================================================== */

/* Floating badge animation used by the hero's stat cards. */
@keyframes floatY {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-float {
    animation: floatY 5s ease-in-out infinite;
}

.animate-float-slow {
    animation: floatY 7s ease-in-out infinite;
}

/* Pulsing status dot in the hero eyebrow badge. */
@keyframes pulseDot {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.35;
    }
}

.animate-pulse-dot {
    animation: pulseDot 2s ease-in-out infinite;
}

/* Scroll-reveal animation. Applied to any `.reveal` element across every
   page fragment; toggled to `.in-view` by assets/js/animations.js. */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--duration-reveal) var(--ease-reveal),
    transform var(--duration-reveal) var(--ease-reveal);
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Smooth fade-in for <main id="app"> once assets/js/app.js finishes
   injecting every page fragment, so content arrives as one deliberate
   fade instead of an abrupt pop-in the instant the fetches resolve. */
#app {
    opacity: 0;
    transition: opacity 0.4s ease;
}

#app.is-loaded {
    opacity: 1;
}