/* ==========================================================================
   CLOUD PUBLICATIONS — ANIMATIONS
   1.  Fail-safe visibility (critical)
   2.  Keyframes
   3.  Applied motion
   4.  Reduced motion
   ========================================================================== */


/* ==========================================================================
   1. FAIL-SAFE VISIBILITY

   The AOS stylesheet sets every [data-aos] element to opacity: 0 and relies
   on AOS.init() to reveal it. If the AOS script is blocked, fails to load, or
   JavaScript is disabled, the page would render blank. These rules guarantee
   content is always visible in that scenario.
   ========================================================================== */

/* No JavaScript at all */
.legacy-unused-2 [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
}
/* JavaScript ran, but the AOS library was unavailable */
.legacy-unused [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
}
/* ==========================================================================
   2. KEYFRAMES
   ========================================================================== */

@keyframes cpFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes cpFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes cpFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
@keyframes cpPulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
    70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@keyframes cpDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(18px, -22px, 0) scale(1.04); }
}
/* ==========================================================================
   3. APPLIED MOTION
   ========================================================================== */

/* Header reveals on first paint */
.site-header {
    animation: cpFadeIn 0.7s ease both;
}
/* Live status dot in the hero eyebrow */
.hero__eyebrow-dot {
    animation: cpPulseDot 2.6s ease-out infinite;
}
/* Ambient movement on the hero background washes */
.hero__aurora--one {
    animation: cpDrift 22s ease-in-out infinite;
}
.hero__aurora--two {
    animation: cpDrift 26s ease-in-out infinite reverse;
}
/* Glass panel settles in after the illustration */
.hero__glass {
    animation: cpFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}
/* Gentle float on the hero illustration */
.hero__figure {
    animation: cpFloat 9s ease-in-out infinite;
}
/* Counter digits do not reflow while animating */
.counter {
    font-variant-numeric: tabular-nums;
}
/* ==========================================================================
   4. REDUCED MOTION
   Respect the operating-system preference and disable all decorative motion.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }
    .hero__figure,
    .hero__aurora--one,
    .hero__aurora--two,
    .hero__eyebrow-dot {
        animation: none !important;
    }
}