/* ============================================================
   xNetwork — animations.css
   Alle @keyframes zentral definiert. Animations-Klassen die
   direkt auf Elemente angewendet werden koennen.

   Utilities:
     .anim-fade-slide-up   — Standard Entrance-Animation
     .anim-fade-in         — Simples Einblenden
     .anim-pulse-accent    — Pulsierendes Leuchten (Accent)
     .anim-spin            — Rotation (Ladeindikator)
     .anim-shake           — Fehler-Schüttel-Effekt

   Entrance-System (xs-anim):
     Gesteuert via animations.js — data-anim + data-anim-delay
   ============================================================ */


/* ============================================================
   KEYFRAMES
   ============================================================ */

/* BEGIN KF-FADE-SLIDE-UP */
@keyframes fadeSlideUp {
    from {
        opacity:   0;
        transform: translateY(18px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}
/* END KF-FADE-SLIDE-UP */

/* BEGIN KF-FADE-IN */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* END KF-FADE-IN */

/* BEGIN KF-FADE-SLIDE-DOWN */
@keyframes fadeSlideDown {
    from {
        opacity:   0;
        transform: translateY(-12px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}
/* END KF-FADE-SLIDE-DOWN */

/* BEGIN KF-SCALE-IN */
@keyframes scaleIn {
    from {
        opacity:   0;
        transform: scale(0.92);
    }
    to {
        opacity:   1;
        transform: scale(1);
    }
}
/* END KF-SCALE-IN */

/* BEGIN KF-SPIN */
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* END KF-SPIN */

/* BEGIN KF-PULSE-ACCENT */
@keyframes pulseAccent {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
    50%       { box-shadow: 0 0 0 8px transparent; }
}
/* END KF-PULSE-ACCENT */

/* BEGIN KF-ERROR-GLOW-PULSE */
@keyframes errorGlowPulse {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 1; }
}
/* END KF-ERROR-GLOW-PULSE */

/* BEGIN KF-SHAKE */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}
/* END KF-SHAKE */

/* BEGIN KF-TOAST-IN */
@keyframes toastIn {
    from {
        opacity:   0;
        transform: translateY(12px) scale(0.96);
    }
    to {
        opacity:   1;
        transform: translateY(0) scale(1);
    }
}
/* END KF-TOAST-IN */

/* BEGIN KF-TOAST-OUT */
@keyframes toastOut {
    from {
        opacity:   1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity:   0;
        transform: translateY(8px) scale(0.96);
    }
}
/* END KF-TOAST-OUT */


/* ============================================================
   UTILITY-KLASSEN
   ============================================================ */

/* BEGIN ANIM-FADE-SLIDE-UP */
.anim-fade-slide-up {
    animation: fadeSlideUp var(--transition-slow) both;
}
/* END ANIM-FADE-SLIDE-UP */

/* BEGIN ANIM-FADE-IN */
.anim-fade-in {
    animation: fadeIn var(--transition-slow) both;
}
/* END ANIM-FADE-IN */

/* BEGIN ANIM-PULSE-ACCENT */
.anim-pulse-accent {
    animation: pulseAccent 2s ease-in-out infinite;
}
/* END ANIM-PULSE-ACCENT */

/* BEGIN ANIM-SPIN */
.anim-spin {
    animation: spin 0.8s linear infinite;
}
/* END ANIM-SPIN */

/* BEGIN ANIM-SHAKE */
.anim-shake {
    animation: shake 0.4s ease-in-out;
}
/* END ANIM-SHAKE */



/* ============================================================
   ENTRANCE-SYSTEM (xs-anim)
   Gesteuert via /shared/js/animations.js
   data-anim="fade-slide-up|fade-in|scale-in|fade-slide-down"
   data-anim-delay="0..N" (Reihenfolge)
   ============================================================ */

/* BEGIN XS-ANIM-INIT */
[data-anim] {
    opacity: 0;
}
/* END XS-ANIM-INIT */

/* BEGIN XS-ANIM-VARIANTS */
[data-anim].is-visible[data-anim="fade-slide-up"] {
    animation: fadeSlideUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-anim].is-visible[data-anim="fade-in"] {
    animation: fadeIn 0.45s ease both;
}

[data-anim].is-visible[data-anim="scale-in"] {
    animation: scaleIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-anim].is-visible[data-anim="fade-slide-down"] {
    animation: fadeSlideDown 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* END XS-ANIM-VARIANTS */

/* BEGIN XS-ANIM-DELAYS */
[data-anim-delay="0"]  { animation-delay: 0ms; }
[data-anim-delay="1"]  { animation-delay: 60ms; }
[data-anim-delay="2"]  { animation-delay: 120ms; }
[data-anim-delay="3"]  { animation-delay: 180ms; }
[data-anim-delay="4"]  { animation-delay: 240ms; }
[data-anim-delay="5"]  { animation-delay: 300ms; }
[data-anim-delay="6"]  { animation-delay: 360ms; }
[data-anim-delay="7"]  { animation-delay: 420ms; }
[data-anim-delay="8"]  { animation-delay: 480ms; }
/* END XS-ANIM-DELAYS */


/* ============================================================
   REDUCED MOTION
   ============================================================ */

/* BEGIN REDUCED-MOTION */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:   0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:  0.01ms !important;
    }

    [data-anim] {
        opacity: 1;
    }
}
/* END REDUCED-MOTION */