/* =============================================
   SCROLL REVEAL ANIMATIONS — raspilim.com
   ============================================= */

/* Initial hidden state — ONLY for pending elements */
[data-sa="pending"] {
    opacity: 0;
    will-change: transform, opacity;
}

/* ===== APPEAR ===== */
@keyframes saFadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes saFadeScale {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes saSlideLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes saSlideRight {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes saFlipX {
    from { opacity: 0; transform: perspective(600px) rotateX(-15deg); }
    to   { opacity: 1; transform: perspective(600px) rotateX(0); }
}
@keyframes saBlur {
    from { opacity: 0; filter: blur(8px); transform: scale(0.95); }
    to   { opacity: 1; filter: blur(0);   transform: scale(1); }
}
@keyframes saClip {
    from { opacity: 0; clip-path: inset(100% 0 0 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* ===== DISAPPEAR ===== */
@keyframes saFadeOutDown {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(30px); }
}
@keyframes saScaleOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.85); }
}
@keyframes saBlurOut {
    from { opacity: 1; filter: blur(0); }
    to   { opacity: 0; filter: blur(6px); }
}

/* ===== CLASSES ===== */
.sa-fade-up      { animation: saFadeUp      0.6s cubic-bezier(0.22,1,0.36,1) both; }
.sa-fade-scale   { animation: saFadeScale   0.6s cubic-bezier(0.22,1,0.36,1) both; }
.sa-slide-left   { animation: saSlideLeft   0.6s cubic-bezier(0.22,1,0.36,1) both; }
.sa-slide-right  { animation: saSlideRight  0.6s cubic-bezier(0.22,1,0.36,1) both; }
.sa-flip-x       { animation: saFlipX       0.7s cubic-bezier(0.22,1,0.36,1) both; }
.sa-blur         { animation: saBlur        0.7s cubic-bezier(0.22,1,0.36,1) both; }
.sa-clip         { animation: saClip        0.7s cubic-bezier(0.22,1,0.36,1) both; }

.sa-out-down     { animation: saFadeOutDown 0.4s ease-in both; }
.sa-out-scale    { animation: saScaleOut    0.4s ease-in both; }
.sa-out-blur     { animation: saBlurOut     0.4s ease-in both; }

/* Stagger delay */
[data-sa] { animation-delay: var(--sa-delay, 0s); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    [data-sa] {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }
}