/* ─── Scroll Reveal ───────────────────────────────────────── */
.jj-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--duration-slower) var(--ease-out),
                transform var(--duration-slower) var(--ease-out);
}

.jj-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.jj-reveal--left {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity var(--duration-slower) var(--ease-out),
                transform var(--duration-slower) var(--ease-out);
}
.jj-reveal--left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.jj-reveal--right {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity var(--duration-slower) var(--ease-out),
                transform var(--duration-slower) var(--ease-out);
}
.jj-reveal--right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.jj-reveal--scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity var(--duration-slower) var(--ease-out),
                transform var(--duration-slower) var(--ease-out);
}
.jj-reveal--scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Staggered children */
.jj-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
}

.jj-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.jj-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.jj-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.jj-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.jj-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.jj-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.jj-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.jj-stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
.jj-stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }

/* ─── Hover Effects ───────────────────────────────────────── */
.jj-lift {
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.jj-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
}

.jj-glow {
    transition: box-shadow var(--duration-base) var(--ease-out);
}
.jj-glow:hover {
    box-shadow: var(--shadow-glow);
}

.jj-scale {
    transition: transform var(--duration-base) var(--ease-out);
}
.jj-scale:hover {
    transform: scale(1.02);
}

/* Image zoom on hover */
.jj-img-zoom {
    overflow: hidden;
}
.jj-img-zoom img {
    transition: transform var(--duration-slow) var(--ease-out);
}
.jj-img-zoom:hover img {
    transform: scale(1.05);
}

/* ─── Keyframe Animations ────────────────────────────────── */

/* CTA pulse */
@keyframes jj-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(180, 139, 148, 0.3); }
    50% { box-shadow: 0 0 0 12px rgba(180, 139, 148, 0); }
}
.jj-pulse {
    animation: jj-pulse 3s ease-in-out infinite;
}

/* Ripple on click */
@keyframes jj-ripple {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}
.jj-ripple {
    position: relative;
    overflow: hidden;
}
.jj-ripple__wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: jj-ripple var(--duration-slow) var(--ease-out);
    pointer-events: none;
}

/* Sparkle float */
@keyframes jj-sparkle-float {
    0% {
        transform: translateY(0) rotate(0deg) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(-10vh) rotate(72deg) scale(1);
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100vh) rotate(720deg) scale(0);
        opacity: 0;
    }
}

/* Gentle float (for decorative elements) */
@keyframes jj-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.jj-float {
    animation: jj-float 4s ease-in-out infinite;
}

/* Slide in from right (mobile menu) */
@keyframes jj-slide-in-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes jj-slide-out-right {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

/* Fade in */
@keyframes jj-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes jj-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Scale in (modals) */
@keyframes jj-scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* SVG draw */
@keyframes jj-draw {
    to { stroke-dashoffset: 0; }
}

/* Skeleton shimmer */
@keyframes jj-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.jj-skeleton {
    background: linear-gradient(
        90deg,
        var(--jj-ivory) 25%,
        var(--jj-ivory-dark) 50%,
        var(--jj-ivory) 75%
    );
    background-size: 200% 100%;
    animation: jj-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

/* Spin (loading) */
@keyframes jj-spin {
    to { transform: rotate(360deg); }
}
.jj-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--jj-rose-light);
    border-top-color: var(--jj-mauve);
    border-radius: 50%;
    animation: jj-spin 0.6s linear infinite;
}

/* Bounce (cart badge) */
@keyframes jj-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}
.jj-bounce {
    animation: jj-bounce 0.4s var(--ease-bounce);
}

/* Scroll indicator */
@keyframes jj-scroll-hint {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50% { transform: translateY(6px); opacity: 1; }
}

/* Parallax-ready */
.jj-parallax {
    will-change: transform;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .jj-reveal,
    .jj-reveal--left,
    .jj-reveal--right,
    .jj-reveal--scale {
        opacity: 1;
        transform: none;
    }
    .jj-stagger > * {
        opacity: 1;
        transform: none;
    }
}