@charset "UTF-8";
/* =====================================================================
Micro Scroll Anim Library
- Modern transform properties: translate / scale / rotate / rotateX/Y
- Composable effects + utilities via CSS Custom Properties
- A11y: respects prefers-reduced-motion
- Performance: no transition: all; minimal will-change usage
===================================================================== */
/* ===== Settings ======================================================= */
/* ===== Base =========================================================== */
:where(.show-on-scroll) {
  /* Default, overridable via CSS vars per element */
  --a-delay: 0.2s;
  --a-move-dur: 700ms;
  --a-fade-dur: 300ms;
  --a-ease: cubic-bezier(0, 1, 0.3, 1);
  /* Start state */
  opacity: 0;
  translate: 0 0;
  scale: 1;
  /* Target only specific properties */
  transition: translate var(--a-move-dur) var(--a-delay) var(--a-ease), scale var(--a-move-dur) var(--a-delay) var(--a-ease), rotate var(--a-move-dur) var(--a-delay) var(--a-ease), filter var(--a-move-dur) var(--a-delay) var(--a-ease), clip-path var(--a-move-dur) var(--a-delay) var(--a-ease), opacity var(--a-fade-dur) var(--a-delay) ease-out;
  /* Hint compositor only while hidden */
  will-change: translate, scale, rotate, filter, clip-path, opacity;
}
:where(.show-on-scroll).is-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  rotate: 0deg;
  will-change: auto;
}

/* ===== Mixins ========================================================= */
/* ===== Directional Fades ============================================== */
.fade-from-left {
  opacity: 0;
  translate: -2rem 0;
}
.fade-from-left.is-visible {
  opacity: 1;
  translate: 0 0;
}

.fade-from-right {
  opacity: 0;
  translate: 2rem 0;
}
.fade-from-right.is-visible {
  opacity: 1;
  translate: 0 0;
}

.fade-up {
  opacity: 0;
  translate: 0 2rem;
}
.fade-up.is-visible {
  opacity: 1;
  translate: 0 0;
}

.fade-down {
  opacity: 0;
  translate: 0 -2rem;
}
.fade-down.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* Larger travel */
.fade-to-left {
  opacity: 0;
  translate: 6rem 0;
}
.fade-to-left.is-visible {
  opacity: 1;
  translate: 0 0;
}

.fade-to-right {
  opacity: 0;
  translate: -6rem 0;
}
.fade-to-right.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* Pure fade */
.fade-in {
  opacity: 0;
}
.fade-in.is-visible {
  opacity: 1;
}

/* ===== Scale / Rotate / Flip ========================================= */
.scale-in {
  opacity: 0;
  scale: 0.92;
}
.scale-in.is-visible {
  opacity: 1;
  scale: 1;
}

.rotate-in {
  opacity: 0;
  rotate: -6deg;
  transform-origin: center;
}
.rotate-in.is-visible {
  opacity: 1;
  rotate: 0deg;
}

/* 3D flips — use per-element perspective via parent if desired */
.flip-in-x,
.flip-in-y {
  opacity: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform-origin: center;
}

@supports (rotateX: 0deg) and (rotateY: 0deg) {
  .flip-in-x {
    rotatex: -75deg;
  }
  .flip-in-y {
    rotatey: 75deg;
  }
  .flip-in-x.is-visible {
    opacity: 1;
    rotatex: 0deg;
  }
  .flip-in-y.is-visible {
    opacity: 1;
    rotatey: 0deg;
  }
}
@supports not (rotateX: 0deg) {
  /* Fallback: gentle z-rotate */
  .flip-in-x,
  .flip-in-y {
    rotate: -6deg;
  }
  .flip-in-x.is-visible,
  .flip-in-y.is-visible {
    opacity: 1;
    rotate: 0deg;
  }
}
/* ===== Reveal (clip-path wipes) ======================================= */
.reveal-right,
.reveal-left,
.reveal-up,
.reveal-down {
  opacity: 1;
  will-change: clip-path;
  transition: clip-path var(--a-move-dur) var(--a-delay) var(--a-ease);
}

/* Observer setzt .is-visible auf den Wrapper */
.show-on-scroll.is-visible .reveal-right,
.show-on-scroll.is-visible .reveal-left,
.show-on-scroll.is-visible .reveal-up,
.show-on-scroll.is-visible .reveal-down {
  clip-path: inset(0 0 0 0);
}

/* Startwerte bleiben wie gehabt (voll maskiert) */
.reveal-right {
  clip-path: inset(0 100% 0 0);
  --webkit-clip-path: inset(0 100% 0 0);
  --moz-clip-path: inset(0 100% 0 0);
}

.reveal-left {
  clip-path: inset(0 0 0 100%);
  --webkit-clip-path: inset(0 0 0 100%);
  --moz-clip-path:inset(0 0 0 100%);
}

.reveal-up {
  clip-path: inset(100% 0 0 0);
  --webkit-clip-path: inset(100% 0 0 0);
  --moz-clip-path:inset(100% 0 0 0);
}

.reveal-down {
  clip-path: inset(0 0 100% 0);
  --webkit-clip-path: inset(0 0 100% 0);
  --moz-clip-path: inset(0 0 100% 0);
}

/* Optional: der innere Knoten soll die Transition besitzen */
.reveal-right,
.reveal-left,
.reveal-up,
.reveal-down {
  transition: clip-path var(--a-move-dur) var(--a-delay) var(--a-ease);
  will-change: clip-path;
}

.reveal-right {
  clip-path: inset(0 100% 0 0);
  --webkit-clip-path: inset(0 100% 0 0);
  --moz-clip-path: inset(0 100% 0 0);
}

.reveal-left {
  clip-path: inset(0 0 0 100%);
  --webkit-clip-path: inset(0 0 0 100%);
  --moz-clip-path: inset(0 0 0 100%);
}

.reveal-up {
  clip-path: inset(100% 0 0 0);
  --webkit-clip-path: inset(100% 0 0 0);
  --moz-clip-path: inset(100% 0 0 0);
}

.reveal-down {
  clip-path: inset(0 0 100% 0);
  --webkit-clip-path: inset(0 0 100% 0);
  --moz-clip-path: inset(0 0 100% 0);
}

.reveal-right.is-visible,
.reveal-left.is-visible,
.reveal-up.is-visible,
.reveal-down.is-visible {
  clip-path: inset(0 0 0 0);
  --webkit-clip-path: inset(0 0 0 0);
  --moz-clip-path: inset(0 0 0 0);
}

/* ===== Blur / Parallax / Pop ========================================== */
.blur-in {
  filter: blur(10px);
}
.blur-in.is-visible {
  filter: blur(0);
  opacity: 1;
}

.zoom-parallax {
  opacity: 0;
  translate: 0 1.2rem;
  scale: 0.98;
}
.zoom-parallax.is-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* Micro-overshoot then settle */
.pop-in {
  opacity: 0;
  scale: 0.86;
}

.pop-in.is-visible {
  opacity: 1;
  scale: 1.02;
}

.pop-in.is-visible {
  transition: scale calc(var(--a-move-dur) * 0.6) calc(var(--a-delay) + var(--a-move-dur)) ease-out, opacity var(--a-fade-dur) var(--a-delay) ease-out;
  scale: 1;
}

/* ===== SVG stroke draw ================================================ */
.svg-stroke-reveal {
  stroke-dasharray: var(--stroke, 400);
  stroke-dashoffset: var(--stroke, 400);
  transition: stroke-dashoffset var(--a-move-dur) var(--a-delay) var(--a-ease);
}

.svg-stroke-reveal.is-visible {
  stroke-dashoffset: 0;
}

/* ===== Utilities ======================================================= */
/* Delays */
.delay-00 {
  --a-delay: 0s;
}

.delay-02 {
  --a-delay: 0.2s;
}

.delay-04 {
  --a-delay: 0.4s;
}

.delay-06 {
  --a-delay: 0.6s;
}

.delay-08 {
  --a-delay: 0.8s;
}

.delay-10 {
  --a-delay: 1s;
}

.delay-12 {
  --a-delay: 1.2s;
}

.delay-15 {
  --a-delay: 1.5s;
}

.delay-20 {
  --a-delay: 2s;
}

.delay-25 {
  --a-delay: 2.5s;
}

/* Speeds */
.speed-200 {
  --a-move-dur: 200ms;
  --a-fade-dur: 200ms;
}

.speed-300 {
  --a-move-dur: 300ms;
  --a-fade-dur: 200ms;
}

.speed-500 {
  --a-move-dur: 500ms;
  --a-fade-dur: 300ms;
}

.speed-700 {
  --a-move-dur: 700ms;
  --a-fade-dur: 300ms;
}

.speed-1000 {
  --a-move-dur: 1000ms;
  --a-fade-dur: 400ms;
}

/* Easing presets */
.ease-snap {
  --a-ease: cubic-bezier(0, 1, 0.3, 1);
}

.ease-smooth {
  --a-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ease-emph {
  --a-ease: cubic-bezier(0.17, 0.67, 0.12, 1.28);
}

/* Distances (opt-in — use by customizing your direction classes if desired) */
.dist-sm {
  --a-dist: 1rem;
}

.dist-md {
  --a-dist: 2rem;
}

.dist-lg {
  --a-dist: 4rem;
}

/* Stagger helpers (10 items) */
.stagger-100 > *:nth-child(1) {
  --a-delay: calc(0.2s + 0s);
}

.stagger-100 > *:nth-child(2) {
  --a-delay: calc(0.2s + 0.1s);
}

.stagger-100 > *:nth-child(3) {
  --a-delay: calc(0.2s + 0.2s);
}

.stagger-100 > *:nth-child(4) {
  --a-delay: calc(0.2s + 0.3s);
}

.stagger-100 > *:nth-child(5) {
  --a-delay: calc(0.2s + 0.4s);
}

.stagger-100 > *:nth-child(6) {
  --a-delay: calc(0.2s + 0.5s);
}

.stagger-100 > *:nth-child(7) {
  --a-delay: calc(0.2s + 0.6s);
}

.stagger-100 > *:nth-child(8) {
  --a-delay: calc(0.2s + 0.7s);
}

.stagger-100 > *:nth-child(9) {
  --a-delay: calc(0.2s + 0.8s);
}

.stagger-100 > *:nth-child(10) {
  --a-delay: calc(0.2s + 0.9s);
}

/* ===== Motion safety =================================================== */
@media (prefers-reduced-motion: reduce) {
  :where(.show-on-scroll) {
    transition: none !important;
  }
  :where(.show-on-scroll),
  :where(.show-on-scroll.is-visible) {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
    rotate: 0deg !important;
    filter: none !important;
    clip-path: inset(0 0 0 0) !important;
  }
  .svg-stroke-reveal,
  .svg-stroke-reveal.is-visible {
    stroke-dashoffset: 0 !important;
  }
}/*# sourceMappingURL=MicroAnim.css.map */