/* =============================================================================
   Brro FX — Motion Effects CSS
   Version: 1.1.0
   Author:  Ronald Postma (Brro) & Claude (Anthropic)
   License: GPL-2.0-or-later
   =============================================================================

   STACKING STRATEGY
   Every scroll-mapped effect writes to its own CSS custom property:
     --brro-translate-x  (horizontal-scroll)
     --brro-translate-y  (vertical-scroll)
     --brro-rotate       (rotate)
     --brro-blur         (blur)
     --brro-opacity      (fade)
   A single shared rule combines them all, so multiple effects on one element
   compose automatically without specificity conflicts.

   PER-EFFECT PARAMETERS (v1.1.0+)
   Each effect can take its own direction / start / end / speed via scoped
   classes handled entirely in brro-fx.js:
     brro-fx--{vertical|horizontal|fade|blur|rotate}-direction-*
     brro-fx--{vertical|horizontal|fade|blur|rotate}-start-{0-100}
     brro-fx--{vertical|horizontal|fade|blur|rotate}-end-{0-100}
     brro-fx--{vertical|horizontal|blur|rotate}-speed-{1-10}
   Fade uses in/out: brro-fx--fade-direction-in (default) / -out.
   Scoped classes override the legacy globals (brro-fx--start-*, etc.) per
   effect; globals remain as fallbacks. No CSS rule changes needed for this —
   the same custom properties above keep driving the shared transform/filter/
   opacity rule.
   ============================================================================= */


/* ── Easing variables ──────────────────────────────────────────────────────── */

:root {
  --cubix:     cubic-bezier(.8,  0, .4, 1);
  --cubixslow: cubic-bezier(.55, 0, 0,  1);
}


/* ── Scroll-mapped effects base ────────────────────────────────────────────── */

.brro-fx--vertical-scroll,
.brro-fx--horizontal-scroll,
.brro-fx--fade,
.brro-fx--blur,
.brro-fx--rotate {
  will-change: transform, opacity, filter;
  transform:
    translateX(var(--brro-translate-x, 0px))
    translateY(var(--brro-translate-y, 0px))
    rotate(var(--brro-rotate, 0deg));
  filter:  blur(var(--brro-blur, 0px));
  opacity: var(--brro-opacity, 1);
}


/* ── Entrance: Fade In ─────────────────────────────────────────────────────── */

.brro-fx--fade-in {
  opacity: 0;
  transition: opacity 0.65s ease;
  will-change: opacity;
}

.brro-fx--fade-in.brro-fx--is-visible {
  opacity: 1;
}

/* ── Entrance: Fade In Up (legacy brro-fx--fade-in behavior) ──────────────── */

.brro-fx--fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
  will-change: opacity, transform;
}

.brro-fx--fade-in-up.brro-fx--is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Loop: Heartbeat keyframes ─────────────────────────────────────────────── */

@keyframes brro-fx--heartbeat {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: var(--brro-fx--scale);
  }
}


/* ── Loop: Heartbeat base ──────────────────────────────────────────────────── */

.brro-fx--heartbeat {
  display: inline-block; /* transform needs a block formatting context */
  animation: brro-fx--heartbeat 4000ms ease-in-out infinite;
  will-change: transform;
  --brro-fx--scale: scale(.95, .95);
}

/* ── Duration utilities (animations & transitions) ─────────────────────────────
   Must load AFTER .brro-fx--heartbeat (and after fade-in / fade-in-up shorthands).
   Same specificity as those rules: later longhands override duration embedded in
   animation / transition shorthands — no !important needed.
*/

.brro-fx--duration-400  { animation-duration: 400ms;  transition-duration: 400ms;  }
.brro-fx--duration-600  { animation-duration: 600ms;  transition-duration: 600ms;  }
.brro-fx--duration-800  { animation-duration: 800ms;  transition-duration: 800ms;  }
.brro-fx--duration-1000 { animation-duration: 1000ms; transition-duration: 1000ms; }
.brro-fx--duration-1200 { animation-duration: 1200ms; transition-duration: 1200ms; }
.brro-fx--duration-1400 { animation-duration: 1400ms; transition-duration: 1400ms; }
.brro-fx--duration-1600 { animation-duration: 1600ms; transition-duration: 1600ms; }
.brro-fx--duration-2000 { animation-duration: 2000ms; transition-duration: 2000ms; }
.brro-fx--duration-2400 { animation-duration: 2400ms; transition-duration: 2400ms; }
.brro-fx--duration-2800 { animation-duration: 2800ms; transition-duration: 2800ms; }
.brro-fx--duration-3200 { animation-duration: 3200ms; transition-duration: 3200ms; }
.brro-fx--duration-3600 { animation-duration: 3600ms; transition-duration: 3600ms; }
.brro-fx--duration-4000 { animation-duration: 4000ms; transition-duration: 4000ms; }

/* ── Delay utilities (ms) ─────────────────────────────────────────────────── */
/*
  For CSS animations/transitions only (entrance + heartbeat etc).
  Not used by scroll-mapped effects (those are updated per-frame via JS).
*/

.brro-fx--delay-100  { transition-delay: 100ms;  animation-delay: 100ms; }
.brro-fx--delay-200  { transition-delay: 200ms;  animation-delay: 200ms; }
.brro-fx--delay-300  { transition-delay: 300ms;  animation-delay: 300ms; }
.brro-fx--delay-400  { transition-delay: 400ms;  animation-delay: 400ms; }
.brro-fx--delay-500  { transition-delay: 500ms;  animation-delay: 500ms; }
.brro-fx--delay-600  { transition-delay: 600ms;  animation-delay: 600ms; }
.brro-fx--delay-700  { transition-delay: 700ms;  animation-delay: 700ms; }
.brro-fx--delay-800  { transition-delay: 800ms;  animation-delay: 800ms; }
.brro-fx--delay-900  { transition-delay: 900ms;  animation-delay: 900ms; }
.brro-fx--delay-1000 { transition-delay: 1000ms; animation-delay: 1000ms; }
.brro-fx--delay-1100 { transition-delay: 1100ms; animation-delay: 1100ms; }
.brro-fx--delay-1200 { transition-delay: 1200ms; animation-delay: 1200ms; }
.brro-fx--delay-1300 { transition-delay: 1300ms; animation-delay: 1300ms; }
.brro-fx--delay-1400 { transition-delay: 1400ms; animation-delay: 1400ms; }
.brro-fx--delay-1500 { transition-delay: 1500ms; animation-delay: 1500ms; }

/* Scaling variants */
/* Shrink */
.brro-fx--scale-0-5 { --brro-fx--scale: scale(.5, .5); }
.brro-fx--scale-0-6 { --brro-fx--scale: scale(.6, .6); }
.brro-fx--scale-0-7 { --brro-fx--scale: scale(.7, .7); }
.brro-fx--scale-0-8 { --brro-fx--scale: scale(.8, .8); }
.brro-fx--scale-0-9 { --brro-fx--scale: scale(.9, .9); }
/* Grow */
.brro-fx--scale-1-1 { --brro-fx--scale: scale(1.1, 1.1); }
.brro-fx--scale-1-2 { --brro-fx--scale: scale(1.2, 1.2); }
.brro-fx--scale-1-3 { --brro-fx--scale: scale(1.3, 1.3); }
.brro-fx--scale-1-4 { --brro-fx--scale: scale(1.4, 1.4); }
.brro-fx--scale-1-5 { --brro-fx--scale: scale(1.5, 1.5); }