/* ==========================================================================
   Atlaso --- animations.css
   Base states for GSAP-driven reveals. Elements start hidden and are revealed
   by animations.js. If JS is unavailable, a fallback makes them visible.
   ========================================================================== */

[data-anim] { will-change: transform, opacity; }

/* Pre-animation hidden states (only applied when JS is active) */
.js [data-anim="up"],
.js [data-anim="title"],
.js [data-anim="panel"],
.js [data-anim="stage"],
.js [data-anim="pop"] { opacity: 0; }

.js [data-anim="up"] { transform: translateY(24px); }
.js [data-anim="panel"] { transform: translateY(16px); }
.js [data-anim="pop"] { transform: scale(0.92); }

.js [data-anim="stagger"] > * { opacity: 0; transform: translateY(16px); }

/* Loading shimmer for thumbnails */
@keyframes shimmer { 100% { background-position: -200% 0; } }
.is-loading {
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
    background-size: 200% 100%;
    animation: shimmer 1.3s infinite linear;
}

/* Saved micro-feedback pulse */
@keyframes savedPulse { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.saved-pulse { animation: savedPulse 0.4s var(--ease); }

@media (prefers-reduced-motion: reduce) {
    .js [data-anim] { opacity: 1 !important; transform: none !important; }
    .is-loading { animation: none; }
}