/* ============================================
   CLOUDSPHARMA — Animation Keyframes & Effects
   From: Hero section & Marquee - 01
   ============================================ */

/* ===== FLOATING ANIMATIONS ===== */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

/* ===== ABOUT SECTION ANIMATIONS (from About us - 02) ===== */
@keyframes gridPulse {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(0.95);
    }

    50% {
        opacity: 0.6;
        transform: scale(1);
    }
}

@keyframes dispenserArm {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(30px);
    }

    50% {
        transform: translateX(30px) scaleY(3);
    }

    75% {
        transform: translateX(0) scaleY(3);
    }

    85% {
        transform: translateX(0) scaleY(1);
    }
}

@keyframes dispenserSlide {

    0%,
    70% {
        left: -80px;
    }

    85% {
        left: 0;
    }

    100% {
        left: 80px;
    }
}

@keyframes dashFlow {
    to {
        stroke-dashoffset: -24;
    }
}

@keyframes dotMove {
    0% {
        cx: 10;
        cy: 100;
    }

    25% {
        cx: 75;
        cy: 20;
    }

    50% {
        cx: 150;
        cy: 100;
    }

    75% {
        cx: 225;
        cy: 180;
    }

    100% {
        cx: 290;
        cy: 100;
    }
}

@keyframes floatSlow {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(2deg);
    }
}

@keyframes spinSlow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes ripple {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

@keyframes dashAnimation {
    to {
        stroke-dashoffset: -20;
    }
}

/* ===== HOVER EFFECTS ===== */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* ===== SVG PATH ANIMATIONS ===== */
.svg-draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2s ease;
}

.svg-draw.animate {
    stroke-dashoffset: 0;
}

/* ===== PARTICLE EFFECTS ===== */
.particles-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--blue);
    opacity: 0;
    animation: particleFloat 3s ease-in-out infinite;
}

@keyframes particleFloat {
    0% {
        opacity: 0;
        transform: translateY(100px) scale(0);
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
        transform: translateY(-100px) scale(1);
    }
}

/* ===== GRADIENT BORDER ANIMATION ===== */
.gradient-border {
    position: relative;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--blue), var(--orange), var(--blue));
    background-size: 300% 300%;
    animation: gradientMove 4s ease infinite;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gradient-border:hover::before {
    opacity: 1;
}

/* ===== GLOW EFFECTS ===== */
.glow-blue {
    box-shadow: 0 0 20px rgba(43, 125, 233, 0.3);
}

.glow-orange {
    box-shadow: 0 0 20px rgba(245, 132, 31, 0.3);
}

/* ===== LINE DRAWING ===== */
.line-draw {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: lineDraw 2s ease forwards;
}

@keyframes lineDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* ===== TYPING CURSOR ===== */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ===== MACHINE ANIMATIONS ===== */
.med-selected {
    animation: medPulse 2s ease-in-out infinite;
}

@keyframes medPulse {

    0%,
    100% {
        stroke-width: 2;
    }

    50% {
        stroke-width: 3;
        filter: drop-shadow(0 0 8px rgba(43, 125, 233, 0.3));
    }
}

/* ===== COUNTER ANIMATION HELPER ===== */
.counter-animated {
    display: inline-block;
    transition: all 0.5s ease;
}

/* ===== MAGNETIC HOVER ===== */
.magnetic {
    transition: transform 0.3s ease;
}

/* ===== STAGGER CHILDREN ANIMATIONS ===== */
.stagger-children>* {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.stagger-children.animate>*:nth-child(1) {
    transition-delay: 0.1s;
    opacity: 1;
    transform: translateY(0);
}

.stagger-children.animate>*:nth-child(2) {
    transition-delay: 0.2s;
    opacity: 1;
    transform: translateY(0);
}

.stagger-children.animate>*:nth-child(3) {
    transition-delay: 0.3s;
    opacity: 1;
    transform: translateY(0);
}

.stagger-children.animate>*:nth-child(4) {
    transition-delay: 0.4s;
    opacity: 1;
    transform: translateY(0);
}

.stagger-children.animate>*:nth-child(5) {
    transition-delay: 0.5s;
    opacity: 1;
    transform: translateY(0);
}

.stagger-children.animate>*:nth-child(6) {
    transition-delay: 0.6s;
    opacity: 1;
    transform: translateY(0);
}

.stagger-children.animate>*:nth-child(7) {
    transition-delay: 0.7s;
    opacity: 1;
    transform: translateY(0);
}

.stagger-children.animate>*:nth-child(8) {
    transition-delay: 0.8s;
    opacity: 1;
    transform: translateY(0);
}

.stagger-children.animate>*:nth-child(9) {
    transition-delay: 0.9s;
    opacity: 1;
    transform: translateY(0);
}

.stagger-children.animate>*:nth-child(10) {
    transition-delay: 1.0s;
    opacity: 1;
    transform: translateY(0);
}

/* ===== SMOOTH SCROLL INDICATOR ===== */
@keyframes scrollBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

/* ===== GLASSMORPHISM UTILITY ===== */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ===== NOISE TEXTURE OVERLAY ===== */
.noise-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* ===== SKU FLOW ANIMATIONS ===== */
@keyframes flowDash {
    to {
        stroke-dashoffset: -40;
    }
}

@keyframes nodeAppear {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===== AOS REPLACEMENT STYLES ===== */
[data-aos] {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-aos="fade-up"] {
    transform: translateY(40px);
}

[data-aos="fade-left"] {
    transform: translateX(40px);
}

[data-aos="fade-right"] {
    transform: translateX(-40px);
}

[data-aos="zoom-in"] {
    transform: scale(0.9);
}

[data-aos].animated {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Delay Utilities */
[data-aos-delay="100"] {
    transition-delay: 0.1s;
}

[data-aos-delay="200"] {
    transition-delay: 0.2s;
}

[data-aos-delay="300"] {
    transition-delay: 0.3s;
}

[data-aos-delay="400"] {
    transition-delay: 0.4s;
}

[data-aos-delay="500"] {
    transition-delay: 0.5s;
}

[data-aos-delay="600"] {
    transition-delay: 0.6s;
}

[data-aos-delay="700"] {
    transition-delay: 0.7s;
}

[data-aos-delay="800"] {
    transition-delay: 0.8s;
}