/* ===================================================================
   DAS DEMO-BILD DES LIVE-FARBANPASSUNGS-MODUS — 1:1

   Quelle: `00_Engine_Core/views/Settings/AccessibilityDemos/
            AeronaLiveEditorDemo.jsx`

   Sechs Sekunden, drei Bewegungen, die zusammen eine Geschichte
   erzählen — und zwar genau die, die der Modus tut:

     0–20 %   der Zeiger kommt von rechts unten
     20–30 %  er drückt auf den Knopf (er schrumpft auf 0,85)
     25 %     der Knopf bekommt seinen gestrichelten Rahmen
     30–75 %  das Farbmenü ist offen
     45–55 %  der Zeiger drückt auf Rot
     50 %     der Knopf wird rot
     80–100 % alles geht zurück in den Ruhezustand

   Die drei Uhren laufen getrennt, aber gleich lang. Deshalb passt der
   Druck auf den Farbpunkt genau zu dem Augenblick, in dem der Knopf
   die Farbe wechselt — ohne dass eine Bewegung auf die andere warten
   müsste.
   =================================================================== */

.lf-demo {
    position: relative;
    width: 100%;
    height: 100%;
    background: #0a0f1d;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lf-demo-knopf {
    position: relative;
    padding: 10px 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    animation: elementColor 6s infinite ease-in-out;
}

.lf-demo-menue {
    position: absolute;
    top: 120%;
    left: 50%;
    background: rgba(20, 25, 40, .95);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    gap: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .5);
    z-index: 5;
    animation: menuShow 6s infinite ease-in-out;
}

.lf-demo-menue i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.lf-demo-menue i:nth-child(1) {
    background: #ef4444;
}

.lf-demo-menue i:nth-child(2) {
    background: #3b82f6;
}

.lf-demo-menue i:nth-child(3) {
    background: #10b981;
}

.lf-demo-zeiger {
    position: absolute;
    z-index: 10;
    color: #fff;
    animation: cursorMove 6s infinite ease-in-out;
}

.lf-demo-zeiger svg {
    fill: rgba(0, 0, 0, .5);
}

@keyframes cursorMove {
    0%, 10% { top: 90%; left: 80%; transform: scale(1); }
    20% { top: 50%; left: 55%; transform: scale(1); }
    25% { top: 50%; left: 55%; transform: scale(.85); }
    30%, 40% { top: 50%; left: 55%; transform: scale(1); }
    45% { top: 62%; left: 45%; transform: scale(1); }
    50% { top: 62%; left: 45%; transform: scale(.85); }
    55%, 70% { top: 62%; left: 45%; transform: scale(1); }
    80%, 100% { top: 90%; left: 80%; transform: scale(1); }
}

@keyframes menuShow {
    0%, 25% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.9); }
    30%, 75% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    80%, 100% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.9); }
}

@keyframes elementColor {
    0%, 24% { background: #3b82f6; outline: 2px dashed transparent; outline-offset: 4px; }
    25%, 49% { background: #3b82f6; outline: 2px dashed rgba(239, 68, 68, .8); outline-offset: 4px; }
    50%, 74% { background: #ef4444; outline: 2px dashed rgba(239, 68, 68, .8); outline-offset: 4px; }
    75%, 100% { background: #ef4444; outline: 2px dashed transparent; outline-offset: 4px; }
}

@media (prefers-reduced-motion: reduce) {

    .lf-demo-knopf,
    .lf-demo-menue,
    .lf-demo-zeiger {
        animation: none;
    }

    .lf-demo-knopf {
        background: #3b82f6;
    }

    .lf-demo-menue,
    .lf-demo-zeiger {
        display: none;
    }
}