/**
 * Theme Animation - GPU-accelerated CSS animations
 * Compatible with Hyvä Theme / Tailwind
 *
 * @category  Cap
 * @package   Cap_ThemeAnimation
 * @author    Nola Consulting
 */

#theme-animation-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 99998;
    opacity: 1;
}

#theme-animation-canvas [data-emoji] {
    position: absolute;
    user-select: none;
    line-height: 1;
    will-change: transform;
    font-size: clamp(20px, 3vw, 50px);
    left: var(--x);
}

/* ─── Halloween + Dental: fall down + rotate + horizontal drift ─── */
#theme-animation-canvas.halloween-theme {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(50, 20, 0, 0.1) 100%);
}
#theme-animation-canvas.dental-theme {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 100, 200, 0.05) 100%);
}
#theme-animation-canvas.halloween-theme [data-emoji],
#theme-animation-canvas.dental-theme [data-emoji] {
    top: -60px;
    animation: cap-anim-fall var(--dur) linear var(--delay) infinite;
}
@keyframes cap-anim-fall {
    from {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--scale, 1));
    }
    to {
        transform: translate3d(var(--drift, 0), 110vh, 0) rotate(var(--rot, 360deg)) scale(var(--scale, 1));
    }
}

/* ─── Christmas: fall + horizontal swing (sin-like) ─── */
#theme-animation-canvas.christmas-theme {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 50, 100, 0.1) 100%);
}
#theme-animation-canvas.christmas-theme [data-emoji] {
    top: -100px;
    animation:
        cap-anim-fall var(--dur) linear var(--delay) infinite,
        cap-anim-swing 3s ease-in-out var(--delay) infinite alternate;
}
@keyframes cap-anim-swing {
    from { margin-left: -45px; }
    to { margin-left: 45px; }
}

/* ─── Easter: bounce up from bottom + scale + opacity fade ─── */
#theme-animation-canvas.easter-theme {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(150, 200, 100, 0.05) 100%);
}
#theme-animation-canvas.easter-theme [data-emoji] {
    bottom: -60px;
    animation: cap-anim-bounce var(--dur) cubic-bezier(0.5, 0, 0.5, 1) var(--delay) infinite;
}
@keyframes cap-anim-bounce {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--scale, 1)); opacity: 0; }
    10%  { opacity: 1; }
    50%  { transform: translate3d(var(--drift, 0), -85vh, 0) rotate(calc(var(--rot, 180deg) / 2)) scale(calc(var(--scale, 1) * 1.1)); opacity: 1; }
    90%  { opacity: 0.8; }
    100% { transform: translate3d(var(--drift, 0), 0, 0) rotate(var(--rot, 360deg)) scale(var(--scale, 1)); opacity: 0; }
}

/* ─── Valentine: rise from bottom + pulse scale ─── */
#theme-animation-canvas.valentine-theme {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(255, 100, 150, 0.1) 100%);
}
#theme-animation-canvas.valentine-theme [data-emoji] {
    bottom: -60px;
    animation:
        cap-anim-rise var(--dur) linear var(--delay) infinite,
        cap-anim-pulse 2s ease-in-out var(--delay) infinite;
}
@keyframes cap-anim-rise {
    from { transform: translate3d(0, 0, 0) rotate(0deg); }
    to { transform: translate3d(var(--drift, 0), -110vh, 0) rotate(var(--rot, 0deg)); }
}
@keyframes cap-anim-pulse {
    0%, 100% { scale: var(--scale, 1); }
    50%      { scale: calc(var(--scale, 1) * 1.15); }
}

/* ─── Accessibility: respect reduced motion preference ─── */
@media (prefers-reduced-motion: reduce) {
    #theme-animation-canvas {
        display: none !important;
    }
}

/* ─── Print styles: hide animations ─── */
@media print {
    #theme-animation-canvas,
    #theme-animation-root {
        display: none !important;
    }
}