/* ==========================================================================
   JewishLogos micro-animations.
   Opt-in utility classes. Initial (hidden) states only apply when the head
   script added .jl-js (motion allowed + JS running); GSAP reveals them via
   ScrollTrigger and then adds .jl-done. Without JS / with reduced motion,
   everything is simply visible.

   Usage:  <div class="jl-fade-up jl-delay-2"> ... </div>
           <ul class="jl-stagger"> <li>…</li> <li>…</li> </ul>   (children reveal one by one)
   ========================================================================== */

:root {
  --jl-a-distance: 10px;   /* how far elements travel — keep it subtle */
  --jl-a-blur: 4px;
  --jl-a-dur: .55s;
  --jl-a-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---- Initial states (JS only). .jl-done is added by jl-anim.js after the reveal,
   so finished elements carry no animation rules and hover effects work normally. */
.jl-js .jl-fade:not(.jl-done),
.jl-js .jl-fade-up:not(.jl-done),
.jl-js .jl-fade-down:not(.jl-done),
.jl-js .jl-fade-left:not(.jl-done),
.jl-js .jl-fade-right:not(.jl-done),
.jl-js .jl-scale-in:not(.jl-done),
.jl-js .jl-blur-in:not(.jl-done),
.jl-js .jl-blur-up:not(.jl-done),
.jl-js .jl-stagger > *:not(.jl-done) { opacity: 0; }

.jl-js .jl-fade-up:not(.jl-done)    { transform: translate3d(0, var(--jl-a-distance), 0); }
.jl-js .jl-fade-down:not(.jl-done)  { transform: translate3d(0, calc(var(--jl-a-distance) * -1), 0); }
.jl-js .jl-fade-left:not(.jl-done)  { transform: translate3d(var(--jl-a-distance), 0, 0); }
.jl-js .jl-fade-right:not(.jl-done) { transform: translate3d(calc(var(--jl-a-distance) * -1), 0, 0); }
.jl-js .jl-scale-in:not(.jl-done)   { transform: scale(.96); }
.jl-js .jl-blur-in:not(.jl-done)    { filter: blur(var(--jl-a-blur)); }
.jl-js .jl-blur-up:not(.jl-done)    { filter: blur(var(--jl-a-blur)); transform: translate3d(0, var(--jl-a-distance), 0); }
.jl-js .jl-stagger > *:not(.jl-done) { transform: translate3d(0, var(--jl-a-distance), 0); }

/* ---- Modifiers read by jl-anim.js --------------------------------------- */
/* Delays:  jl-delay-1 … jl-delay-5  (0.08s steps)
   Speed:   jl-fast (.35s)  jl-slow (.9s)
   Stagger: jl-stagger-fast (.04s)  jl-stagger-slow (.14s)  (default .07s) */

/* ---- CSS-only micro-interactions (always on, cheap) -------------------- */
.jl-hover-lift { transition: transform .2s var(--jl-a-ease), box-shadow .2s var(--jl-a-ease); }
.jl-hover-lift:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgb(0 0 0 / .25); }
.jl-press:active { transform: scale(.97); }
.jl-pulse { animation: jl-pulse 2.4s ease-in-out infinite; }
@keyframes jl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.jl-shake { animation: jl-shake .4s var(--jl-a-ease); }
@keyframes jl-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* Site elements the plugin outputs get a tiny hover polish too */
.letter-card, .logo-categories li a, .letter-list a { transition: transform .2s var(--jl-a-ease), box-shadow .2s var(--jl-a-ease), background-color .2s; }

@media (prefers-reduced-motion: reduce) {
  .jl-fade, .jl-fade-up, .jl-fade-down, .jl-fade-left, .jl-fade-right,
  .jl-scale-in, .jl-blur-in, .jl-blur-up, .jl-stagger > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  .jl-pulse, .jl-shake, .jl-tabs-content, .jl-toast, .jl-dialog { animation: none !important; }
  .jl-btn, .jl-card, .jl-link, .jl-logo-tile, .jl-credit { transition: none !important; }
}