/* =========================================================
   animations.css — composable: fade + move (clean)
   ========================================================= */

.animated-done{
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-animate].animate-prep,
  [data-animate].animate-prep.animate-start,
  .animated-done{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Disable transitions while we place the element into its prep position */
.anim-no-trans{ transition: none !important; }

/* =========================
   CORE ENGINE (NO OPACITY by default)
   ========================= */
[data-animate].animate-prep{
  --ax: 0px;
  --ay: 0px;
  --as: 1;
  --ar: 0deg;
  --ab: 0px;

  transform: translate(var(--ax), var(--ay)) scale(var(--as)) rotate(var(--ar));
  filter: blur(var(--ab));

  transition-property: transform, filter;
  transition-duration: var(--dur, 600ms), var(--dur, 600ms);
   transition-delay: var(--delay, 0ms), var(--delay, 0ms); 
  transition-timing-function: var(--ease, cubic-bezier(0.2,0.8,0.2,1)),
                              var(--ease, cubic-bezier(0.2,0.8,0.2,1));

  will-change: transform, filter;
}

[data-animate].animate-prep.animate-start{
  --ax: 0px;
  --ay: 0px;
  --as: 1;
  --ar: 0deg;
  --ab: 0px;

  filter: blur(0px);
}

/* =========================
   DISTANCES
   ========================= */
.dist-8   { --dist-x: 8px; }
.dist-16  { --dist-x: 16px; }
.dist-24  { --dist-x: 24px; }
.dist-40  { --dist-x: 40px; }
.dist-80  { --dist-x: 80px; }
.dist-120 { --dist-x: 120px; }
.dist-180 { --dist-x: 180px; }
.dist-240 { --dist-x: 240px; }

.dist-y-8   { --dist-y: 8px; }
.dist-y-16  { --dist-y: 16px; }
.dist-y-24  { --dist-y: 24px; }
.dist-y-40  { --dist-y: 40px; }
.dist-y-60  { --dist-y: 60px; }

/* =========================
   MOVE ONLY (apply only BEFORE animate-start)
   Correct directions:
   - left  = negative X
   - right = positive X
   - up    = negative Y
   - down  = positive Y
   ========================= */
/* FROM BOTTOM → UP */
[data-animate].animate-prep:not(.animate-start).move-up{
  --ay: var(--dist-y, 24px);
}
/* FROM TOP → DOWN */
[data-animate].animate-prep:not(.animate-start).move-down{
  --ay: calc(-1 * var(--dist-y, 24px));
}
[data-animate].animate-prep:not(.animate-start).move-left{
  --ax: calc(-1 * var(--dist-x, 24px));
}
[data-animate].animate-prep:not(.animate-start).move-right{
  --ax: var(--dist-x, 24px);
}

/* Optional aliases (match the corrected directions) */
[data-animate].animate-prep:not(.animate-start).slide-right{ --ax: var(--dist-x, 24px); }
[data-animate].animate-prep:not(.animate-start).slide-left { --ax: calc(-1 * var(--dist-x, 24px)); }
[data-animate].animate-prep:not(.animate-start).fade-in-up  { --ay: calc(-1 * var(--dist-y, 24px)); }
[data-animate].animate-prep:not(.animate-start).fade-in-down{ --ay: var(--dist-y, 24px); }

/* =========================
   FADE (OPT-IN)
   ========================= */
[data-animate].animate-prep.fade-in{
  opacity: 0;
  transition-property: opacity, transform, filter;
  transition-duration: var(--dur, 600ms), var(--dur, 600ms), var(--dur, 600ms);
  transition-timing-function: var(--ease, cubic-bezier(0.2,0.8,0.2,1)),
                              var(--ease, cubic-bezier(0.2,0.8,0.2,1)),
                              var(--ease, cubic-bezier(0.2,0.8,0.2,1));
  will-change: opacity, transform, filter;
}
[data-animate].animate-prep.fade-in.animate-start{
  opacity: 1;
}

/* Fade out (optional) */
[data-animate].animate-prep.fade-out{
  opacity: 1;
  transition-property: opacity, transform, filter;
  transition-duration: var(--dur, 600ms), var(--dur, 600ms), var(--dur, 600ms);
  transition-timing-function: var(--ease, cubic-bezier(0.2,0.8,0.2,1)),
                              var(--ease, cubic-bezier(0.2,0.8,0.2,1)),
                              var(--ease, cubic-bezier(0.2,0.8,0.2,1));
  will-change: opacity, transform, filter;
}
[data-animate].animate-prep.fade-out.animate-start{
  opacity: 0;
}

/* =========================
   TIMING UTILITIES (vars)
   ========================= */
.dur-200  { --dur: 200ms; }
.dur-300  { --dur: 300ms; }
.dur-400  { --dur: 400ms; }
.dur-600  { --dur: 600ms; }
.dur-800  { --dur: 800ms; }
.dur-1000 { --dur: 1000ms; }
.dur-2000 { --dur: 2000ms; }
.dur-12000{ --dur: 12000ms; }

.ease-linear { --ease: linear; }
.ease-out    { --ease: cubic-bezier(0,0,0.2,1); }
.ease-in     { --ease: cubic-bezier(0.4,0,1,1); }
.ease-in-out { --ease: cubic-bezier(0.4,0,0.2,1); }

/* =========================
   SIZE (SCALE) — OPT-IN
   ========================= */

/* In prep (before animate-start), shrink */
[data-animate].animate-prep:not(.animate-start).scale-in-90 { --as: 0.90; }
[data-animate].animate-prep:not(.animate-start).scale-in-80 { --as: 0.80; }
[data-animate].animate-prep:not(.animate-start).scale-in-70 { --as: 0.70; }

/* In prep (before animate-start), grow */
[data-animate].animate-prep:not(.animate-start).scale-down-110 { --as: 1.10; }
[data-animate].animate-prep:not(.animate-start).scale-down-120 { --as: 1.20; }

/* Optional: set origin */
.origin-center { transform-origin: center; }
.origin-top    { transform-origin: top; }
.origin-bottom { transform-origin: bottom; }
.origin-left   { transform-origin: left; }
.origin-right  { transform-origin: right; }


.delay-100  { --delay: 100ms; }
.delay-200  { --delay: 200ms; }
.delay-300  { --delay: 300ms; }
.delay-400  { --delay: 400ms; }
.delay-600  { --delay: 600ms; }
.delay-800  { --delay: 800ms; }
.delay-1000 { --delay: 1000ms; }
.delay-1500 { --delay: 1500ms; }