/* ==========================================================
   IO ANIMATION SYSTEM (AOS-like, container-scroll safe)
   ========================================================== */

/* ---------- Group defaults ---------- */
.io-group {
  --io-duration: 700ms;
  --io-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Base: animatable elements inside group ---------- */
/* KEIN display hier -> damit <p>, <a> usw. nicht kaputt gehen */
.io-group [class^="io-"],
.io-group [class*=" io-"] {
  opacity: 0;
  transition:
    opacity var(--io-duration) var(--io-ease),
    transform var(--io-duration) var(--io-ease),
    filter var(--io-duration) var(--io-ease);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform, filter;
}

/* Nur bei echten Inline-Elementen: damit translate sichtbar wirkt */
.io-group span[class^="io-"],
.io-group span[class*=" io-"],
.io-group i[class^="io-"],
.io-group i[class*=" io-"] {
  display: inline-block;
}

/* ---------- Active (group is visible) ---------- */
.io-group.io-visible [class^="io-"],
.io-group.io-visible [class*=" io-"] {
  opacity: 1;
  filter: none;
}

/* ---------- Fade Directions ---------- */
.io-fade-left   { transform: translate3d(-48px, 0, 0); }
.io-fade-right  { transform: translate3d( 48px, 0, 0); }
.io-fade-up     { transform: translate3d(0,  28px, 0); }
.io-fade-down   { transform: translate3d(0, -28px, 0); }

/* ---------- Zoom ---------- */
.io-zoom-in     { transform: scale(.92); }
.io-zoom-out    { transform: scale(1.06); }

/* ---------- Blur ---------- */
.io-blur        { filter: blur(6px); }

/* ---------- Rotate ---------- */
.io-rotate-left  { transform: rotate(-2deg) translate3d(-20px,0,0); }
.io-rotate-right { transform: rotate( 2deg) translate3d( 20px,0,0); }

/* ---------- Flip ---------- */
.io-flip-up    { transform: perspective(800px) rotateX(-12deg); }
.io-flip-down  { transform: perspective(800px) rotateX( 12deg); }

/* ---------- Reset transforms when visible ---------- */
.io-group.io-visible .io-fade-left,
.io-group.io-visible .io-fade-right,
.io-group.io-visible .io-fade-up,
.io-group.io-visible .io-fade-down,
.io-group.io-visible .io-zoom-in,
.io-group.io-visible .io-zoom-out,
.io-group.io-visible .io-rotate-left,
.io-group.io-visible .io-rotate-right,
.io-group.io-visible .io-flip-up,
.io-group.io-visible .io-flip-down {
  transform: none;
}

/* ---------- Optional: Checklist line helper ---------- */
.io-line {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .io-group [class^="io-"],
  .io-group [class*=" io-"] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}