/* ============================================================
   glitch.css – Animation des Seitentitels

   Wichtig: Die Animation läuft dauerhaft und in Endlosschleife.
   Für Menschen mit vestibulären Störungen, Migräne oder
   Epilepsie kann so etwas Beschwerden auslösen. Sie wird
   deshalb abgeschaltet, sobald im Betriebssystem
   "Bewegung reduzieren" eingestellt ist (WCAG 2.3.3).
   ============================================================ */

.glitch-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    text-align: center;
}

.glitch {
    position: relative;
    z-index: 1;

    display: inline-block;
    letter-spacing: 2px;

    transform: skewX(0deg);
    animation: shift 4s ease-in-out infinite alternate;

    /* Eigene Ebene für den Browser, damit die Animation nicht
       bei jedem Durchlauf die ganze Seite neu berechnet. */
    will-change: transform;
}

@keyframes shift {
    0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
        transform: skewX(0deg);
    }
    41% { transform: skewX(10deg); }
    42% { transform: skewX(-10deg); }
    59% { transform: skewX(35deg) skewY(10deg); }
    60% { transform: skewX(-35deg) skewY(-10deg); }
    63% { transform: skewX(10deg) skewY(-5deg); }
    70% { transform: skewX(-30deg) skewY(-20deg); }
    71% { transform: skewX(10deg) skewY(-10deg); }
}


/* ------------------------------------------------------------
   Systemeinstellung "Bewegung reduzieren" beachten
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {

    .glitch {
        animation: none;
        transform: none;
        will-change: auto;
    }

    /* Sicherheitsnetz: schaltet auch alle anderen Animationen
       und weiche Übergänge auf der Seite ab. */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}