/* ==========================================================================
   GLAESS Bewegung 10/2026 - Eye-Catcher der Startseite
   --------------------------------------------------------------------------
   Eigene Schicht nach design-2026.css. Jede Bewegung haengt an einer Klasse
   auf <html> (mo-1 ... mo-10), die layout.php nach der gewaehlten Stufe setzt:

     mo-1   Logo-LEDs        Markenpunkte im Hero leuchten nacheinander auf
     mo-2   Headline-Glanz   Lichtkante laeuft ueber "von der SPS bis zur KI."
     mo-3   Hero-Datenfluss  Signal laeuft Excel -> Portal -> SAP
     mo-4   KPI-Umschlag     "3-4 Monate" wird gestrichen, "4 Wochen" erscheint
     mo-5   Neu-Puls         Badge "Neu aus der Praxis" pulsiert
     mo-6   Saeulen-Balken   Farbbalken der drei Saeulen laden sich auf
     mo-7   Haken            Haken "Mit GLAESS" zeichnen sich nacheinander
     mo-8   Praxis-Zaehler   35.000 zaehlt hoch, Pfeile im Datenfluss laufen
     mo-9   Schritt-Spur     Linie der vier Schritte zeichnet sich durch
     mo-10  CTA-Aurora       Markenfarben ziehen durch den Abschluss, Knopf glaenzt

   Grundsaetze:
   - Alles steht in "prefers-reduced-motion: no-preference". Wer reduzierte
     Bewegung eingestellt hat, sieht die Seite unveraendert.
   - Versteckte Ausgangszustaende nur mit .mo-js (setzt motion.js). Ohne
     JavaScript bleibt jeder Inhalt sichtbar.
   - Nur transform, opacity, Farbe und Schatten - kein Layout-Sprung (CLS).
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

/* ---------- mo-1 Logo-LEDs ------------------------------------------------ */
/* Wie die Statusanzeige einer Steuerung: vier LEDs, eine nach der anderen. */
.mo-1 .brand-dots i { color: var(--dot-blue); animation: mo-led 7s ease-out infinite; animation-delay: .5s; }
.mo-1 .brand-dots i:nth-child(2) { color: var(--dot-red);    animation-delay: .68s; }
.mo-1 .brand-dots i:nth-child(3) { color: var(--dot-orange); animation-delay: .86s; }
.mo-1 .brand-dots i:nth-child(4) { color: var(--dot-green);  animation-delay: 1.04s; }
@keyframes mo-led {
    0%, 9%, 100% { transform: none; box-shadow: 0 0 0 0 transparent; }
    3%           { transform: scale(1.5); box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent), 0 0 10px currentColor; }
}

/* ---------- mo-2 Headline-Glanz ------------------------------------------ */
.mo-2 .home-hero h1 .hl {
    background-image: linear-gradient(100deg, var(--blue-700) 0%, #0a8fd0 38%, #8fd3ff 48%, #0a8fd0 58%, var(--blue-700) 100%);
    background-size: 260% 100%;
    background-position: 100% 0;
    animation: mo-sheen 9s var(--ease) 1s infinite;
}
@keyframes mo-sheen {
    0%        { background-position: 100% 0; }
    16%, 100% { background-position: 0 0; }
}

/* ---------- mo-3 Hero-Datenfluss ----------------------------------------- */
/* Ein Signal laeuft unter den drei Stationen durch; jede Station leuchtet
   auf, wenn es ankommt. Taktet alle 4,5 Sekunden. */
.mo-3 .hero-case-flow { position: relative; }
.mo-3 .hero-case-flow::after {
    content: ""; position: absolute; left: 6%; right: 6%; bottom: -11px; height: 2px; border-radius: 2px;
    background:
        linear-gradient(90deg, transparent, #5fb3ff 45%, #fff 50%, #5fb3ff 55%, transparent) no-repeat,
        rgba(255, 255, 255, .08);
    background-size: 30% 100%, 100% 100%;
    background-position: -40% 0, 0 0;
    animation: mo-signal 4.5s cubic-bezier(.45, 0, .25, 1) 1s infinite;
}
@keyframes mo-signal {
    0%        { background-position: -45% 0, 0 0; }
    55%, 100% { background-position: 145% 0, 0 0; }
}
.mo-3 .hero-case-flow li { animation: mo-station 4.5s ease-out 1.05s infinite; }
.mo-3 .hero-case-flow li:nth-child(2) { animation-name: mo-station-core; animation-delay: 1.85s; }
.mo-3 .hero-case-flow li:nth-child(3) { animation-delay: 2.65s; }
.mo-3 .hero-case-flow li .hcf-ico { animation: mo-station-ico 4.5s ease-out infinite; animation-delay: inherit; }
@keyframes mo-station {
    0%, 22%, 100% { border-color: rgba(255, 255, 255, .09); box-shadow: none; }
    6%            { border-color: rgba(95, 179, 255, .8); box-shadow: 0 0 18px -2px rgba(95, 179, 255, .55); }
}
@keyframes mo-station-core {
    0%, 22%, 100% { border-color: rgba(110, 160, 255, .55); box-shadow: none; }
    6%            { border-color: #9fc6ff; box-shadow: 0 0 24px 0 rgba(95, 179, 255, .6); }
}
@keyframes mo-station-ico {
    0%, 22%, 100% { background: rgba(255, 255, 255, .08); transform: none; }
    6%            { background: rgba(95, 179, 255, .35); transform: scale(1.08); }
}

/* ---------- mo-4 KPI-Umschlag -------------------------------------------- */
/* Einmal nach dem Laden: der alte Wert wird durchgestrichen und tritt
   zurueck, der neue kommt dazu. Endzustand = statischer Zustand plus Strich. */
.mo-4 .kv-from {
    background: linear-gradient(currentColor, currentColor) 0 56% / 0 2px no-repeat;
    animation: mo-strike .6s var(--ease) both; animation-delay: 1.2s;
}
.mo-4 .hero-case-kpis div + div .kv-from { animation-delay: 1.7s; }
@keyframes mo-strike {
    to { background-size: 100% 2px; color: #8ea2c4; }
}
.mo-4 .kv-arrow { display: inline-block; animation: mo-arrow-in .45s var(--ease) both; animation-delay: 1.65s; }
.mo-4 .hero-case-kpis div + div .kv-arrow { animation-delay: 2.15s; }
@keyframes mo-arrow-in {
    from { opacity: 0; transform: translateX(-8px); }
}
.mo-4 .kv-to { display: inline-block; animation: mo-pop .55s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: 1.85s; }
.mo-4 .hero-case-kpis div + div .kv-to { animation-delay: 2.35s; }
@keyframes mo-pop {
    0%   { opacity: 0; transform: scale(.7); }
    60%  { text-shadow: 0 0 18px rgba(95, 211, 141, .8); color: #8ff0b6; }
    100% { opacity: 1; transform: none; }
}

/* ---------- mo-5 Neu-Puls ------------------------------------------------ */
.mo-5 .top-news-badge { animation: mo-badge 2.6s ease-out infinite; }
@keyframes mo-badge {
    0%        { box-shadow: 0 0 0 0 rgba(243, 146, 0, .65); }
    70%, 100% { box-shadow: 0 0 0 10px rgba(243, 146, 0, 0); }
}
.mo-5 .top-news-cta svg { animation: mo-nudge 2.6s var(--ease) infinite; }
@keyframes mo-nudge {
    0%, 60%, 100% { transform: none; }
    75%           { transform: translateX(4px); }
}

/* ---------- mo-6 Saeulen-Balken ------------------------------------------ */
.mo-js.mo-6 .pillar-card::before { transform: scaleX(0); transform-origin: left center; transition: transform 1s var(--ease); }
.mo-js.mo-6 .pillar-card.mo-in::before { transform: none; }
.mo-6 .pillar-card:nth-child(2)::before { transition-delay: .25s; }
.mo-6 .pillar-card:nth-child(3)::before { transition-delay: .5s; }
.mo-6 .pillar-card.mo-in .pillar-nr { animation: mo-nr 1.8s ease-out both; }
.mo-6 .pillar-card.mo-in:nth-child(2) .pillar-nr { animation-delay: .25s; }
.mo-6 .pillar-card.mo-in:nth-child(3) .pillar-nr { animation-delay: .5s; }
@keyframes mo-nr {
    0%, 100% { color: #e6ebf3; }
    35%      { color: var(--tone); }
}
.mo-6 .pillar-card:hover .pillar-icon { animation: mo-wiggle .5s var(--ease); }
@keyframes mo-wiggle {
    30% { transform: rotate(-8deg) scale(1.06); }
    65% { transform: rotate(5deg); }
}

/* ---------- mo-7 Haken --------------------------------------------------- */
/* motion.js setzt pathLength="1" auf die Haken - damit stimmt die
   Strichlaenge unabhaengig von der Symbolgroesse. */
.mo-js.mo-7 .compare-checks svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mo-js.mo-7 .compare-after.mo-in .compare-checks svg path { animation: mo-draw .45s var(--ease) forwards; }
.mo-7 .compare-after.mo-in .compare-checks li:nth-child(1) svg path { animation-delay: .35s; }
.mo-7 .compare-after.mo-in .compare-checks li:nth-child(2) svg path { animation-delay: .6s; }
.mo-7 .compare-after.mo-in .compare-checks li:nth-child(3) svg path { animation-delay: .85s; }
.mo-7 .compare-after.mo-in .compare-checks li:nth-child(4) svg path { animation-delay: 1.1s; }
.mo-7 .compare-after.mo-in .compare-checks li:nth-child(5) svg path { animation-delay: 1.35s; }
@keyframes mo-draw { to { stroke-dashoffset: 0; } }
.mo-7 .compare-arrow svg { animation: mo-push 2.8s var(--ease) infinite; }
@keyframes mo-push {
    0%, 55%, 100% { transform: none; box-shadow: var(--shadow); }
    70%           { transform: translateX(6px); box-shadow: 0 0 0 6px rgba(37, 99, 235, .12); }
}

/* ---------- mo-8 Praxis-Zaehler und Datenfluss --------------------------- */
/* Die Zahl bleibt im HTML als 35.000 stehen (Suchmaschinen, ohne JS);
   motion.js zaehlt erst beim Hineinscrollen hoch. */
.mo-8 .mo-count { font-variant-numeric: tabular-nums; transition: opacity .2s; }
.mo-js.mo-8 .mo-count:not(.mo-in) { opacity: 0; }
.mo-8 .case-flow .flow-arrow svg { animation: mo-march 3s var(--ease) infinite; }
.mo-8 .case-flow .flow-arrow ~ .flow-arrow svg { animation-delay: .5s; }
@keyframes mo-march {
    0%, 40%, 100% { transform: none; opacity: 1; }
    20%           { transform: translateX(7px); opacity: .55; }
}
.mo-8 .case-flow .flow-node-core { animation: mo-core 3s ease-out infinite; animation-delay: .3s; }
@keyframes mo-core {
    0%, 45%, 100% { box-shadow: 0 0 0 1px var(--color-accent), var(--shadow); }
    15%           { box-shadow: 0 0 0 1px var(--color-accent), 0 0 0 8px rgba(37, 99, 235, .14), var(--shadow-md); }
}
.mo-8 .case-flow .flow-node-after .flow-ico { animation: mo-done 3s ease-out infinite; animation-delay: .8s; }
@keyframes mo-done {
    0%, 45%, 100% { background: var(--color-surface); color: var(--color-muted); }
    18%           { background: #d9f2e2; color: var(--dot-green); }
}

/* ---------- mo-9 Schritt-Spur -------------------------------------------- */
.mo-js.mo-9 .step-track::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.8s cubic-bezier(.5, 0, .3, 1), opacity 1.8s; }
.mo-js.mo-9 .step-track.mo-in::before { transform: none; opacity: .85; }
.mo-9 .step-track.mo-in .step-num { animation: mo-step 1s ease-out both; }
.mo-9 .step-track.mo-in .step:nth-child(1) .step-num { --mo-ring: var(--dot-blue);   animation-delay: .1s; }
.mo-9 .step-track.mo-in .step:nth-child(2) .step-num { --mo-ring: var(--dot-red);    animation-delay: .6s; }
.mo-9 .step-track.mo-in .step:nth-child(3) .step-num { --mo-ring: var(--dot-orange); animation-delay: 1.1s; }
.mo-9 .step-track.mo-in .step:nth-child(4) .step-num { --mo-ring: var(--dot-green);  animation-delay: 1.6s; }
@keyframes mo-step {
    0%   { box-shadow: 0 0 0 6px var(--color-surface); transform: none; }
    35%  { box-shadow: 0 0 0 6px var(--color-surface), 0 0 0 9px var(--mo-ring); transform: scale(1.1); }
    100% { box-shadow: 0 0 0 6px var(--color-surface), 0 0 0 8px var(--mo-ring); transform: none; }
}

/* ---------- mo-10 CTA-Aurora --------------------------------------------- */
.mo-10 .cta-panel > * { z-index: 1; }
.mo-10 .cta-panel::after {
    content: ""; position: absolute; z-index: 0; inset: -40%; pointer-events: none;
    background:
        radial-gradient(closest-side at 30% 40%, rgba(0, 166, 230, .30), transparent),
        radial-gradient(closest-side at 70% 60%, rgba(37, 99, 235, .32), transparent),
        radial-gradient(closest-side at 55% 25%, rgba(0, 154, 62, .14), transparent),
        radial-gradient(closest-side at 40% 75%, rgba(243, 146, 0, .12), transparent);
    animation: mo-aurora 22s ease-in-out infinite alternate;
}
@keyframes mo-aurora {
    0%   { transform: translate(-6%, -4%) rotate(0deg); }
    50%  { transform: translate(5%, 3%) rotate(12deg); }
    100% { transform: translate(-3%, 6%) rotate(-8deg); }
}
.mo-10 .cta-panel .btn-primary { position: relative; overflow: hidden; }
.mo-10 .cta-panel .btn-primary::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-18deg);
    animation: mo-shine 6s ease-in-out 1.5s infinite;
}
@keyframes mo-shine {
    0%        { left: -60%; }
    18%, 100% { left: 130%; }
}

} /* Ende prefers-reduced-motion */

/* ---------- Vorschau-Schalter (nur Staging/lokal) ------------------------ */
.mo-demo {
    position: fixed; left: 16px; bottom: 16px; z-index: 200; width: 290px; max-width: calc(100vw - 32px);
    font: 500 .86rem/1.4 var(--font); color: #e8eefb;
    background: rgba(11, 23, 48, .96); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .5);
}
.mo-demo summary { cursor: pointer; padding: 10px 14px; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 8px; }
.mo-demo summary::-webkit-details-marker { display: none; }
.mo-demo summary .brand-dots i { animation: none; }
.mo-demo-body { padding: 0 14px 14px; }
.mo-demo-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 10px; }
.mo-demo-presets a {
    display: block; padding: 6px 2px; border-radius: 8px; text-align: center; font-size: .76rem; font-weight: 700;
    color: #c9d5ea; background: rgba(255, 255, 255, .06); text-decoration: none;
}
.mo-demo-presets a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.mo-demo-presets a[aria-current="true"] { background: var(--blue-600); color: #fff; }
.mo-demo-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 2px; }
.mo-demo-list li { display: flex; align-items: center; gap: 8px; }
.mo-demo-list label { display: flex; gap: 8px; align-items: center; padding: 2px 0; cursor: pointer; }
.mo-demo-list a { margin-left: auto; color: #9fc0ff; font-size: .74rem; }
.mo-demo-list input { accent-color: var(--blue-500); }
.mo-demo-replay { width: 100%; padding: 7px; border: 0; border-radius: 8px; font: inherit; font-weight: 700; color: #fff; background: var(--blue-600); cursor: pointer; }
.mo-demo-replay:hover { background: var(--blue-700); }
.mo-demo-note { margin: 8px 0 0; font-size: .74rem; color: #8ea2c4; }
@media (max-width: 768px) { .mo-demo { bottom: 96px; } }
@media print { .mo-demo { display: none !important; } }