/* ==========================================================================
   NIRVANA AYURVEDIC WELLNESS — KEYFRAME & CSS ANIMATIONS
   ========================================================================== */

/* Initial states for intersection observer classes */
[data-animate] {
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

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

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

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

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

[data-animate="scale-up"] {
    transform: scale(0.85);
}

/* Activated State */
[data-animate].animated {
    opacity: 1;
    transform: translate(0) scale(1);
    transition-delay: var(--delay, 0s);
}

/* Floating element continuous animation */
@keyframes continuousFloat {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-12px) rotate(1.5deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.float-element {
    animation: continuousFloat 6s ease-in-out infinite;
}

/* Synergy SVG Dash Animation */
@keyframes dashLine {
    to {
        stroke-dashoffset: -100;
    }
}

/* Button Ripple Hover Effect */
.nrv-btn--ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s ease;
}

.nrv-btn--ripple:active::after {
    transform: translate(-50%, -50%) scale(1);
    transition: 0s;
}