/*
 * Noam HaShabbos — animation classes
 * ==================================
 * Add classes to any element (Bricks: element → Style → CSS classes). Animations play
 * when the element scrolls into view, driven by GSAP (assets/js/animations.js).
 *
 * EFFECTS (combine freely: "anim-fade-up anim-blur" fades up *and* de-blurs)
 *   anim-fade            fade in
 *   anim-fade-up         fade in, rising from below
 *   anim-fade-down       fade in, dropping from above
 *   anim-fade-left       fade in, sliding in from the right
 *   anim-fade-right      fade in, sliding in from the left
 *   anim-blur            de-blur while fading in
 *   anim-scale-in        grow from 85%
 *   anim-zoom-out        settle from 115%
 *   anim-rotate-in       small rotation + rise
 *   anim-no-fade         keep full opacity (movement / blur / scale only)
 *
 * STAGGER (put on the parent; its direct children animate one after another)
 *   anim-stagger                   container; children use the container's effect classes
 *   anim-stagger-fast|slow         0.06s / 0.22s between items (default 0.1s)
 *   anim-stagger-{ms}              any gap, e.g. anim-stagger-150
 *   anim-stagger-from-end|center|edges|random   order of the sequence
 *   anim-batch                     animate children row by row as they scroll in
 *                                  (automatic when there are more than 12 children)
 *
 * TIMING
 *   anim-delay-{ms}      e.g. anim-delay-300, anim-delay-1200   (default 0)
 *   anim-duration-{ms}   e.g. anim-duration-1200                (default 800)
 *   anim-ease-out|soft|in-out|back|elastic|linear               (default out)
 *
 * DISTANCE
 *   anim-dist-xs|sm|md|lg|xl     12 / 24 / 40 (default) / 64 / 96 px
 *   or set --anim-distance: 50px on the element
 *
 * TRIGGER
 *   anim-on-load         play immediately instead of on scroll
 *   anim-repeat          replay every time it scrolls back into view
 *   anim-start-early     trigger sooner (top of element at 98% of the viewport)
 *   anim-start-late      trigger later  (top of element at 70% of the viewport)
 *
 * EXTRAS (pure CSS)
 *   anim-hover-lift | anim-hover-scale | anim-hover-glow
 *   anim-float | anim-pulse | anim-spin-slow     (looping)
 *
 * Content is only hidden once JavaScript has confirmed GSAP loaded (html.noam-js), and
 * everything is shown immediately for visitors who prefer reduced motion.
 */

:root {
    --anim-distance: 40px;
}

/* ---- Effect definitions: each class only sets the "from" state variables ---- */
.anim-fade,
.anim-fade-up,
.anim-fade-down,
.anim-fade-left,
.anim-fade-right,
.anim-blur,
.anim-scale-in,
.anim-zoom-out,
.anim-rotate-in {
    --anim-o: 0;
}
.anim-no-fade { --anim-o: 1 !important; }

.anim-fade-up    { --anim-y: var(--anim-distance); }
.anim-fade-down  { --anim-y: calc(var(--anim-distance) * -1); }
.anim-fade-left  { --anim-x: var(--anim-distance); }
.anim-fade-right { --anim-x: calc(var(--anim-distance) * -1); }
.anim-blur       { --anim-b: 14px; }
.anim-scale-in   { --anim-s: 0.85; }
.anim-zoom-out   { --anim-s: 1.15; }
.anim-rotate-in  { --anim-r: -6deg; --anim-y: calc(var(--anim-distance) * 0.5); }

.anim-dist-xs { --anim-distance: 12px; }
.anim-dist-sm { --anim-distance: 24px; }
.anim-dist-md { --anim-distance: 40px; }
.anim-dist-lg { --anim-distance: 64px; }
.anim-dist-xl { --anim-distance: 96px; }

/* ---- Hidden "before" state (only when GSAP is confirmed, never in the builder) ---- */
.noam-js :is(.anim-fade, .anim-fade-up, .anim-fade-down, .anim-fade-left, .anim-fade-right,
             .anim-blur, .anim-scale-in, .anim-zoom-out, .anim-rotate-in):not(.anim-stagger):not(.is-animated),
.noam-js .anim-stagger > :not(.is-animated) {
    opacity: var(--anim-o, 0);
    transform: translate(var(--anim-x, 0px), var(--anim-y, 0px)) scale(var(--anim-s, 1)) rotate(var(--anim-r, 0deg));
    filter: blur(var(--anim-b, 0px));
    will-change: opacity, transform, filter;
    transition: none !important; /* a CSS transition would fight GSAP's per-frame updates */
}

/* ---- Reduced motion: show everything, run nothing ---- */
@media (prefers-reduced-motion: reduce) {
    .noam-js :is(.anim-fade, .anim-fade-up, .anim-fade-down, .anim-fade-left, .anim-fade-right,
                 .anim-blur, .anim-scale-in, .anim-zoom-out, .anim-rotate-in):not(.anim-stagger):not(.is-animated),
    .noam-js .anim-stagger > :not(.is-animated) {
        opacity: 1;
        transform: none;
        filter: none;
    }
    .anim-float, .anim-pulse, .anim-spin-slow { animation: none !important; }
}

/* ---- Hover helpers ---- */
.anim-hover-lift,
.anim-hover-scale,
.anim-hover-glow {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.anim-hover-lift:hover  { transform: translateY(-6px); }
.anim-hover-scale:hover { transform: scale(1.04); }
.anim-hover-glow:hover  { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 40px -10px rgba(176, 125, 79, 0.55); }

/* ---- Looping helpers ---- */
@keyframes noam-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes noam-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}
@keyframes noam-spin {
    to { transform: rotate(360deg); }
}
.anim-float     { animation: noam-float 5s ease-in-out infinite; }
.anim-pulse     { animation: noam-pulse 2.6s ease-in-out infinite; }
.anim-spin-slow { animation: noam-spin 24s linear infinite; }