/* =========================================================
   SCROLL ANIMATIONS (site-wide)
   Classes are added by Js/scroll-animations.js.
   Uses the individual `translate` / `scale` properties so it
   never overrides an element's own hover `transform`.
   ========================================================= */

/* !important: these replace any one-off entrance animation the
   element already had (e.g. the hero's fadeInUp), which would
   otherwise hold it invisible or fight with this one. */
.sr {
    opacity: 0;
    animation: none !important;
}

.sr.sr-in {
    animation: sr-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--sr-delay, 0s) both !important;
}

/* Re-entering from the top while scrolling up */
.sr.sr-in.sr-from-top        { animation-name: sr-down !important; }

.sr-left.sr-in,
.sr-left.sr-in.sr-from-top   { animation-name: sr-left !important; }
.sr-right.sr-in,
.sr-right.sr-in.sr-from-top  { animation-name: sr-right !important; }
.sr-zoom.sr-in,
.sr-zoom.sr-in.sr-from-top   { animation-name: sr-zoom !important; }

@keyframes sr-up {
    from { opacity: 0; translate: 0 50px; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes sr-down {
    from { opacity: 0; translate: 0 -50px; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes sr-left {
    from { opacity: 0; translate: -70px 0; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes sr-right {
    from { opacity: 0; translate: 70px 0; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes sr-zoom {
    from { opacity: 0; scale: 0.88; }
    to   { opacity: 1; scale: 1; }
}

/* Smaller movement on phones so nothing causes sideways scroll */
@media (max-width: 768px) {
    @keyframes sr-left  { from { opacity: 0; translate: -30px 0; } to { opacity: 1; translate: 0 0; } }
    @keyframes sr-right { from { opacity: 0; translate: 30px 0; }  to { opacity: 1; translate: 0 0; } }
}

@media (prefers-reduced-motion: reduce) {
    .sr, .sr.sr-in { opacity: 1; animation: none; }
}