/* ===================================
   SHIFANI HYGIENIC PRODUCT - ANIMATIONS CSS
   All keyframes and animation utilities
   =================================== */

/* ---------- Keyframe Animations ---------- */

/* Preloader */
@keyframes preloaderBounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* Floating elements */
@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-30px) rotate(3deg);
    }
}

@keyframes leafFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) rotate(10deg);
    }
    75% {
        transform: translateY(10px) rotate(-5deg);
    }
}

@keyframes sparkle {
    0%, 100% {
        opacity: 0.2;
        transform: scale(0.8);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

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

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* Pulse animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.5);
    }
}

/* Scroll indicator */
@keyframes scrollWheel {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }
}

/* Ticker / Marquee */
@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* WhatsApp pulse */
@keyframes whatsappPulse {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
    }
    50% {
        box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4), 0 0 0 12px rgba(37, 211, 102, 0.08);
    }
}

/* ---------- Scroll-triggered Animations ---------- */

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Down */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Left */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale In */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Zoom In */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Rotate In */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-10deg) scale(0.9);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

/* Slide In from bottom with bounce */
@keyframes slideInBounce {
    0% {
        opacity: 0;
        transform: translateY(60px);
    }
    60% {
        opacity: 1;
        transform: translateY(-8px);
    }
    80% {
        transform: translateY(3px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Number count up shimmer */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* ---------- Scroll Animation Classes (Appear Animation Disabled) ---------- */
.animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.animate-on-scroll.animated {
    opacity: 1 !important;
    transform: none !important;
}

/* Staggered delays disabled */
.animate-on-scroll:nth-child(1),
.animate-on-scroll:nth-child(2),
.animate-on-scroll:nth-child(3),
.animate-on-scroll:nth-child(4),
.animate-on-scroll:nth-child(5),
.animate-on-scroll:nth-child(6) { 
    transition-delay: 0s !important; 
}

/* ---------- Hover Animations ---------- */

/* Lift effect */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Scale effect */
.hover-scale {
    transition: transform var(--transition-base);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* Glow effect */
.hover-glow {
    transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(0, 87, 184, 0.3);
}

/* ---------- Loading Animation for Images ---------- */
.img-loading {
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 37%, var(--gray-100) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* ---------- Ripple Effect for Buttons ---------- */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform 0.5s, opacity 1s;
}

.ripple:active::after {
    transform: scale(0, 0);
    opacity: 0.3;
    transition: 0s;
}

/* ---------- Text Reveal Animation ---------- */
@keyframes textReveal {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

/* ---------- Gradient Text Shimmer ---------- */
@keyframes gradientShimmer {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.shimmer-text {
    background-size: 200% 200%;
    animation: gradientShimmer 4s ease infinite;
}

/* ---------- Counter Animation Helper ---------- */
.count-animated {
    display: inline-block;
}

/* ---------- Particle effect for hero ---------- */
@keyframes particleRise {
    0% {
        opacity: 0;
        transform: translateY(100%) scale(0);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-100vh) scale(1);
    }
}

/* ---------- Border glow animation ---------- */
@keyframes borderGlow {
    0%, 100% {
        border-color: rgba(0, 87, 184, 0.15);
    }
    50% {
        border-color: rgba(0, 87, 184, 0.35);
    }
}

/* ---------- Entrance Animation for Hero Text ---------- */
.hero-content .hero-badge {
    animation: fadeInDown 0.6s ease 0.2s both;
}

.hero-content .hero-title {
    animation: fadeInUp 0.7s ease 0.4s both;
}

.hero-content .hero-description {
    animation: fadeInUp 0.7s ease 0.6s both;
}

.hero-content .hero-actions {
    animation: fadeInUp 0.7s ease 0.8s both;
}

.hero-content .hero-stats {
    animation: fadeInUp 0.7s ease 1s both;
}

.hero-image {
    animation: fadeInRight 0.8s ease 0.5s both;
}

/* ---------- Auto-animated elements ---------- */
.hero-content .hero-badge,
.hero-content .hero-title,
.hero-content .hero-description,
.hero-content .hero-actions,
.hero-content .hero-stats,
.hero-image {
    /* Override the animate-on-scroll for hero since these auto-play */
    opacity: 1;
    transform: none;
}