/* =========================================================
   FOREDI NUSANTARA - ANIMATION.CSS
   ========================================================= */

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

.loader-spinner{
    animation:spin .9s linear infinite;
}

@keyframes heroFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-14px); }
}

.hero-image > img{
    animation:heroFloat 4.5s ease-in-out infinite;
}

@keyframes glowPulse{
    0%,100%{ opacity:.65; transform:scale(.96); }
    50%{ opacity:1; transform:scale(1.05); }
}

.hero-glow{
    animation:glowPulse 3.5s ease-in-out infinite;
}

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

.ring-1{ animation:ringRotate 18s linear infinite; }
.ring-2{ animation:ringRotate 24s linear infinite reverse; }
.ring-3{ animation:ringRotate 30s linear infinite; }

@keyframes particleRise{
    0%{
        transform:translateY(0) scale(.65);
        opacity:0;
    }
    20%{ opacity:1; }
    100%{
        transform:translateY(-240px) scale(1.15);
        opacity:0;
    }
}

.hero-particles span{
    animation:particleRise linear infinite;
}

.hero-particles span:nth-child(1){ left:8%; animation-duration:3.6s; animation-delay:.2s; }
.hero-particles span:nth-child(2){ left:18%; animation-duration:4.4s; animation-delay:1s; }
.hero-particles span:nth-child(3){ left:31%; animation-duration:3.9s; animation-delay:1.7s; }
.hero-particles span:nth-child(4){ left:44%; animation-duration:4.8s; animation-delay:.6s; }
.hero-particles span:nth-child(5){ left:57%; animation-duration:4.1s; animation-delay:1.3s; }
.hero-particles span:nth-child(6){ left:69%; animation-duration:3.7s; animation-delay:2.1s; }
.hero-particles span:nth-child(7){ left:81%; animation-duration:4.6s; animation-delay:.9s; }
.hero-particles span:nth-child(8){ left:91%; animation-duration:3.8s; animation-delay:2.4s; }

@keyframes waPulse{
    0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5),0 16px 34px rgba(37,211,102,.35); }
    70%{ box-shadow:0 0 0 18px rgba(37,211,102,0),0 16px 34px rgba(37,211,102,.35); }
    100%{ box-shadow:0 0 0 0 rgba(37,211,102,0),0 16px 34px rgba(37,211,102,.35); }
}

.wa-floating{
    animation:waPulse 2.2s infinite;
}

@media (prefers-reduced-motion:reduce){
    .hero-image > img,
    .hero-glow,
    .hero-ring,
    .hero-particles span,
    .wa-floating,
    .loader-spinner{
        animation:none !important;
    }
}