/* ==========================================================================
   Cloudycap — animations.css
   Keyframes + scroll-reveal states + premium micro-interactions
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0) translateX(0); }
    50%      { transform: translateY(-18px) translateX(6px); }
}

@keyframes pulse-glow {
    0%, 100% { opacity: .5; }
    50%      { opacity: .85; }
}

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

@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

/* Continuous logo marquee (Trusted-By slider, phase 2) */
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Scroll Reveal
   Elements start hidden; JS adds `.is-visible` when they enter the viewport.
   Fallback: if JS disabled, `.no-js` keeps everything visible.
   -------------------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="blur"]  { filter: blur(12px); transform: translateY(20px); }

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Stagger children via inline --delay set by JS */
[data-reveal][style*="--delay"] { transition-delay: var(--delay); }

.no-js [data-reveal] { opacity: 1; transform: none; filter: none; }

/* --------------------------------------------------------------------------
   Hover Glow (magnetic buttons get JS translate; this is the light layer)
   -------------------------------------------------------------------------- */
.hover-glow { transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.hover-glow:hover { box-shadow: var(--glow-blue); }

/* Animated gradient border ring (used on featured cards) */
.ring-anim { position: relative; }
.ring-anim::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, transparent, var(--c-blue), var(--c-purple), transparent);
    animation: spin-slow 6s linear infinite;
    z-index: -1;
    opacity: 0;
    transition: opacity .4s var(--ease);
}
.ring-anim:hover::after { opacity: .6; }

/* Shimmer skeleton (lazy image placeholder) */
.shimmer {
    background: linear-gradient(90deg, #0f1220 0px, #171a2b 200px, #0f1220 400px);
    background-size: 800px 100%;
    animation: shimmer 1.6s infinite linear;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}