/* ===== SHARED ANIMATION STYLES - Kids Writing Consult ===== */

/* Base hidden states */
.anim-fade-up { opacity: 0; transform: translateY(50px); transition: opacity 0.75s cubic-bezier(.25,.8,.25,1), transform 0.75s cubic-bezier(.25,.8,.25,1); }
.anim-fade-left { opacity: 0; transform: translateX(-60px); transition: opacity 0.75s cubic-bezier(.25,.8,.25,1), transform 0.75s cubic-bezier(.25,.8,.25,1); }
.anim-fade-right { opacity: 0; transform: translateX(60px); transition: opacity 0.75s cubic-bezier(.25,.8,.25,1), transform 0.75s cubic-bezier(.25,.8,.25,1); }
.anim-zoom-in { opacity: 0; transform: scale(0.85); transition: opacity 0.75s cubic-bezier(.25,.8,.25,1), transform 0.75s cubic-bezier(.25,.8,.25,1); }
.anim-zoom-out { opacity: 0; transform: scale(1.12); transition: opacity 0.75s cubic-bezier(.25,.8,.25,1), transform 0.75s cubic-bezier(.25,.8,.25,1); }

/* Delays */
.anim-d1 { transition-delay: 0.1s; }
.anim-d2 { transition-delay: 0.2s; }
.anim-d3 { transition-delay: 0.3s; }
.anim-d4 { transition-delay: 0.4s; }
.anim-d5 { transition-delay: 0.5s; }
.anim-d6 { transition-delay: 0.6s; }
.anim-d7 { transition-delay: 0.7s; }
.anim-d8 { transition-delay: 0.8s; }

/* Visible state - triggered by JS */
.anim-visible { opacity: 1 !important; transform: none !important; }

/* WhatsApp pulse ring */
.wa-pulse-btn {
    position: relative;
}
.wa-pulse-btn::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50px;
    border: 2px solid currentColor;
    opacity: 0;
    animation: waPulse 2s ease-out infinite;
    pointer-events: none;
}
.wa-float::before { border-radius: 50%; }
.wa-pulse-btn::after {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50px;
    border: 2px solid currentColor;
    opacity: 0;
    animation: waPulse 2s ease-out 0.5s infinite;
    pointer-events: none;
}
.wa-float::after { border-radius: 50%; }

@keyframes waPulse {
    0% { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.35); }
}

/* Continuous gallery slide */
@keyframes gallerySlide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.gallery-marquee-track {
    display: flex;
    gap: 12px;
    animation: gallerySlide 18s linear infinite;
    width: max-content;
}
.gallery-marquee-wrap {
    overflow: hidden;
}
.gallery-marquee-track img {
    height: 200px;
    width: auto;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}