/**
 * ReducedMotion.css - Reduzierte Bewegung
 * ========================================
 * WCAG 2.3.1: Three Flashes or Below Threshold - Level A
 * WCAG 2.3.3: Animation from Interactions - Level AAA
 *
 * Deaktiviert oder reduziert Animationen und Transitions
 * fuer Benutzer, die dies bevorzugen oder benoetigen.
 *
 * Features:
 * - prefers-reduced-motion: reduce (System-Praeferenz)
 * - [data-reduced-motion="true"] (User-Override)
 * - Selektive Animation-Steuerung
 * - Essential Motion erlauben
 *
 * @version 1.0.0
 * @since TYPO3 13 LTS
 * @author made in nature Projektagentur
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* Standard Animation-Werte */
    --min-motion-duration-fast: 150ms;
    --min-motion-duration-normal: 300ms;
    --min-motion-duration-slow: 500ms;

    /* Reduzierte Werte */
    --min-motion-duration-reduced: 0.01ms;
    --min-motion-iteration-reduced: 1;

    /* Timing Functions */
    --min-motion-ease: ease-out;
    --min-motion-ease-reduced: linear;

    /* Scroll Behavior */
    --min-motion-scroll: smooth;
    --min-motion-scroll-reduced: auto;
}

/* ==========================================================================
   System-Praeferenz: prefers-reduced-motion: reduce
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    /* Globale Animation-Deaktivierung */
    *,
    *::before,
    *::after {
        animation-duration: var(--min-motion-duration-reduced) !important;
        animation-iteration-count: var(--min-motion-iteration-reduced) !important;
        transition-duration: var(--min-motion-duration-reduced) !important;
        scroll-behavior: var(--min-motion-scroll-reduced) !important;
    }

    /* Parallax-Effekte deaktivieren */
    [class*="parallax"],
    [data-parallax],
    [data-scroll] {
        transform: none !important;
        position: relative !important;
        background-attachment: scroll !important;
    }

    /* Background-Attachment fixed deaktivieren */
    * {
        background-attachment: scroll !important;
    }

    /* Autoplay-Videos pausieren (CSS-only Hinweis) */
    video[autoplay] {
        /* Video sollte via JS pausiert werden */
        /* Hier nur visueller Hinweis moeglich */
    }

    /* Karussells/Slider: Kein Auto-Advance */
    [class*="carousel"],
    [class*="slider"],
    [class*="swiper"] {
        /* Auto-Rotation via JS deaktivieren */
    }

    /* Skeleton Loading Animation stoppen */
    [class*="skeleton"],
    [class*="loading"] {
        animation: none !important;
        background: currentColor !important;
        opacity: 0.1 !important;
    }

    /* Pulsierende/Blinkende Elemente */
    [class*="pulse"],
    [class*="blink"],
    [class*="flash"] {
        animation: none !important;
    }

    /* Hover-Effekte reduzieren */
    a:hover,
    button:hover,
    [role="button"]:hover {
        transition: none !important;
    }

    /* Transform-Animationen */
    [class*="zoom"],
    [class*="scale"],
    [class*="rotate"],
    [class*="slide"],
    [class*="fade"],
    [class*="bounce"],
    [class*="spin"],
    [class*="shake"],
    [class*="wobble"],
    [class*="flip"] {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    /* Smooth Scroll deaktivieren */
    html {
        scroll-behavior: auto !important;
    }

    /* Scroll-Snap beibehalten aber ohne Animation */
    [class*="scroll-snap"] {
        scroll-snap-type: none !important;
    }
}

/* ==========================================================================
   User-Override: [data-reduced-motion="true"]
   ========================================================================== */

html[data-reduced-motion="true"],
html[data-reduced-motion="true"] *,
html[data-reduced-motion="true"] *::before,
html[data-reduced-motion="true"] *::after {
    animation-duration: var(--min-motion-duration-reduced) !important;
    animation-iteration-count: var(--min-motion-iteration-reduced) !important;
    transition-duration: var(--min-motion-duration-reduced) !important;
    scroll-behavior: var(--min-motion-scroll-reduced) !important;
}

html[data-reduced-motion="true"] {
    scroll-behavior: auto !important;
}

/* Parallax deaktivieren */
html[data-reduced-motion="true"] [class*="parallax"],
html[data-reduced-motion="true"] [data-parallax],
html[data-reduced-motion="true"] [data-scroll] {
    transform: none !important;
    position: relative !important;
    background-attachment: scroll !important;
}

/* Background-Attachment */
html[data-reduced-motion="true"] * {
    background-attachment: scroll !important;
}

/* Transform-Animationen */
html[data-reduced-motion="true"] [class*="zoom"],
html[data-reduced-motion="true"] [class*="scale"],
html[data-reduced-motion="true"] [class*="rotate"],
html[data-reduced-motion="true"] [class*="slide"],
html[data-reduced-motion="true"] [class*="fade"],
html[data-reduced-motion="true"] [class*="bounce"] {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

/* Skeleton Loading */
html[data-reduced-motion="true"] [class*="skeleton"],
html[data-reduced-motion="true"] [class*="loading"] {
    animation: none !important;
}

/* ==========================================================================
   Essentielle Animationen (erlaubt)
   ========================================================================== */

/*
 * Manche Animationen sind wichtig fuer das Verstaendnis:
 * - Focus-Ringe (instant, aber sichtbar)
 * - Fortschrittsanzeigen (linear, keine Bounce)
 * - Ladeindikatoren (einfache Rotation)
 * - Eingabe-Feedback
 */

/* Focus-Indikatoren immer erlauben */
@media (prefers-reduced-motion: reduce) {
    :focus-visible {
        outline-style: solid !important;
        outline-width: 3px !important;
        /* Keine Transition, aber sichtbar */
    }
}

html[data-reduced-motion="true"] :focus-visible {
    outline-style: solid !important;
    outline-width: 3px !important;
}

/* Progress Bars - Lineare Bewegung erlauben */
@media (prefers-reduced-motion: reduce) {
    progress,
    [role="progressbar"] {
        /* Fortschrittsbewegung ist essenziell */
    }

    progress::-webkit-progress-value,
    progress::-moz-progress-bar {
        transition: width 100ms linear !important;
    }
}

/* Spinner - Einfache Rotation erlauben (optional) */
.min-motion-essential-spinner {
    animation: min-essential-spin 1.5s linear infinite !important;
}

@keyframes min-essential-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Mit prefers-reduced-motion: Spinner statisch */
@media (prefers-reduced-motion: reduce) {
    .min-motion-essential-spinner {
        animation: none !important;
        /* Alternative: Statisches Lade-Symbol */
    }

    .min-motion-essential-spinner::after {
        content: "...";
        animation: none !important;
    }
}

/* ==========================================================================
   Fade-In als Alternative (sanft, kurz)
   ========================================================================== */

/*
 * Fuer Seiten die Fade-Ins benoetigen:
 * Kurze, sanfte Opacity-Aenderung ist akzeptabel
 */

.min-motion-subtle-fade {
    opacity: 1;
    transition: opacity 100ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .min-motion-subtle-fade {
        transition: none;
    }
}

html[data-reduced-motion="true"] .min-motion-subtle-fade {
    transition: none;
}

/* ==========================================================================
   GIF und Video Handling
   ========================================================================== */

/* Hinweis fuer animierte GIFs */
@media (prefers-reduced-motion: reduce) {
    img[src$=".gif"] {
        /* GIFs koennen nicht via CSS gestoppt werden */
        /* Empfehlung: data-src-static Fallback */
    }

    /* Wenn statisches Fallback verfuegbar */
    img[src$=".gif"][data-src-static] {
        /* Via JS: src = dataset.srcStatic */
    }
}

/* Video Pause-Button anzeigen */
@media (prefers-reduced-motion: reduce) {
    .min-video-pause-button {
        display: block !important;
    }
}

/* Autoplay-Warnung */
.min-motion-autoplay-warning {
    display: none;
    padding: 0.75rem 1rem;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    font-size: 0.875rem;
    margin: 0.5rem 0;
}

@media (prefers-reduced-motion: reduce) {
    .min-motion-autoplay-warning {
        display: block;
    }
}

html[data-reduced-motion="true"] .min-motion-autoplay-warning {
    display: block;
}

/* ==========================================================================
   Scroll-Linked Animations deaktivieren
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    /* CSS Scroll-Driven Animations */
    * {
        animation-timeline: none !important;
        view-timeline: none !important;
    }

    /* Sticky-Elemente ohne Animation */
    .sticky,
    [class*="sticky"] {
        position: sticky; /* Sticky beibehalten, aber ohne Animation */
    }
}

html[data-reduced-motion="true"] * {
    animation-timeline: none !important;
    view-timeline: none !important;
}

/* ==========================================================================
   Hover-Transformationen
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    /* Kein Scale bei Hover */
    a:hover,
    button:hover,
    [class*="card"]:hover,
    img:hover {
        transform: none !important;
    }

    /* Kein Schatten-Animation bei Hover */
    *:hover {
        box-shadow: inherit !important;
    }
}

html[data-reduced-motion="true"] a:hover,
html[data-reduced-motion="true"] button:hover,
html[data-reduced-motion="true"] [class*="card"]:hover,
html[data-reduced-motion="true"] img:hover {
    transform: none !important;
}

/* ==========================================================================
   Marquee und Ticker deaktivieren
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    marquee {
        animation: none !important;
        -webkit-animation: none !important;
    }

    [class*="ticker"],
    [class*="marquee"],
    [class*="scroll-text"] {
        animation: none !important;
        transform: none !important;
        white-space: normal !important;
        overflow: visible !important;
    }
}

html[data-reduced-motion="true"] marquee,
html[data-reduced-motion="true"] [class*="ticker"],
html[data-reduced-motion="true"] [class*="marquee"] {
    animation: none !important;
    transform: none !important;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Animation auch bei reduced-motion erlauben (bewusste Entscheidung) */
.min-motion-allow {
    animation-duration: inherit !important;
    transition-duration: inherit !important;
}

/* Animation IMMER deaktivieren */
.min-motion-none {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

/* Sanfte Transitions erlauben (Opacity only) */
.min-motion-opacity-only {
    transition-property: opacity !important;
    transition-duration: 150ms !important;
}

@media (prefers-reduced-motion: reduce) {
    .min-motion-opacity-only {
        transition: none !important;
    }
}

/* ==========================================================================
   Toggle UI Component
   ========================================================================== */

.min-reduced-motion-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 2px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.min-reduced-motion-toggle:focus-visible {
    outline: 3px solid var(--min-focus-color, #005fcc);
    outline-offset: 2px;
}

.min-reduced-motion-toggle__icon {
    width: 1.25em;
    height: 1.25em;
}

/* Icon wechselt je nach Status */
.min-reduced-motion-toggle__icon--motion {
    display: block;
}

.min-reduced-motion-toggle__icon--no-motion {
    display: none;
}

[data-reduced-motion="true"] .min-reduced-motion-toggle__icon--motion {
    display: none;
}

[data-reduced-motion="true"] .min-reduced-motion-toggle__icon--no-motion {
    display: block;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    /* Keine Animationen im Druck */
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   Dark Mode Anpassungen
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .min-motion-autoplay-warning {
        background-color: #332600;
        border-color: #665200;
        color: #ffd700;
    }
}