/* ==========================================================================
   Shared widget animations — entrance (scroll-triggered, staggered) + hover.
   Used by the Grid ("grid-layout") and Cards ("grid") widgets and available
   to any widget that opts in with data-wa-anim / .wa-hover-* classes.
   The `.wa-js` class is added to <html> by widget-animations.js so that,
   when JavaScript is unavailable, content is never left hidden.
   ========================================================================== */

.wa-js [data-wa-anim] {
    opacity: 0;
    will-change: transform, opacity;
}

.wa-js [data-wa-anim].wa-in {
    opacity: 1;
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-fill-mode: both;
    animation-delay: var(--wa-delay, 0ms);
}

.wa-js [data-wa-anim="fade-in"].wa-in     { animation-name: waFade; }
.wa-js [data-wa-anim="slide-up"].wa-in    { animation-name: waSlideUp; }
.wa-js [data-wa-anim="slide-down"].wa-in  { animation-name: waSlideDown; }
.wa-js [data-wa-anim="slide-left"].wa-in  { animation-name: waSlideLeft; }
.wa-js [data-wa-anim="slide-right"].wa-in { animation-name: waSlideRight; }
.wa-js [data-wa-anim="zoom-in"].wa-in     { animation-name: waZoom; }
.wa-js [data-wa-anim="flip"].wa-in        { animation-name: waFlip; }
.wa-js [data-wa-anim="bounce"].wa-in      { animation-name: waBounce; }

@keyframes waFade       { from { opacity: 0; } to { opacity: 1; } }
@keyframes waSlideUp    { from { opacity: 0; transform: translateY(28px); }  to { opacity: 1; transform: none; } }
@keyframes waSlideDown  { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
@keyframes waSlideLeft  { from { opacity: 0; transform: translateX(28px); }  to { opacity: 1; transform: none; } }
@keyframes waSlideRight { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes waZoom       { from { opacity: 0; transform: scale(0.9); }        to { opacity: 1; transform: none; } }
@keyframes waFlip       { from { opacity: 0; transform: perspective(600px) rotateX(-25deg); } to { opacity: 1; transform: none; } }
@keyframes waBounce {
    0%   { opacity: 0; transform: translateY(28px); }
    60%  { opacity: 1; transform: translateY(-6px); }
    100% { transform: none; }
}

/* ── Hover effects ─────────────────────────────────────────────────────── */
.wa-hover-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.wa-hover-lift:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); }

.wa-hover-zoom { transition: transform 0.3s ease; }
.wa-hover-zoom:hover { transform: scale(1.03); }

.wa-hover-glow { transition: box-shadow 0.3s ease; }
.wa-hover-glow:hover { box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.4), 0 8px 30px rgba(99, 102, 241, 0.25); }

/* ── Respect the user's reduced-motion preference ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wa-js [data-wa-anim] { opacity: 1 !important; animation: none !important; }
    .wa-hover-lift, .wa-hover-zoom, .wa-hover-glow { transition: none !important; }
    .wa-hover-lift:hover, .wa-hover-zoom:hover { transform: none !important; }
}