/* ════════════════════════════════════════════════════════════════ AI Status Quo · Motion-System (Briefing: 6 Dynamik-Stufen) Eine Quelle der Wahrheit: data-motion="1".."6" am . Additiv & monoton: höhere Stufe = mehr Bedeutungs-Schichten. Reduced-Motion klemmt hart auf Stufe 1 (greift bereits via aisq3; Ambiente hier zusätzlich abgesichert). Lädt NACH aisq5.css. Demo-Mapping der drei Ausbaustufen: a = 2 „Reduziert" → nur Reaktion (Hover/Press). Reveal/Signatur/ Ambiente aus. (≈ Baseline, lebt minimal.) b = 4 „Editorial" → + Orientierung (Eintritts-Reveal) + Verbindung (Empfangen-Glow bei „für dich gemacht"). Heutiger Default-Geist. c = 6 „Lebendig" → + Kontinuität/Ambiente (atmender CTA) + Signatur (Selbst-Zeichnen) + ausgeprägte Hover-Choreografie. Manifest. ════════════════════════════════════════════════════════════════ */ /* ── ab Stufe 3 · Orientierung: Eintritts-Reveal ────────────────── Unter 3 (Stufe 1/2): Sektionen erscheinen sofort, ohne Einschwung. */ body[data-motion="1"] .aq-will-reveal, body[data-motion="2"] .aq-will-reveal{opacity:1 !important; transform:none !important;} /* ── ab Stufe 4 · Verbindung: Empfangen-Glow (Quittung) ─────────── „Für dich gemacht" (3+ Treffer) wird als Aha-Moment bestätigt. transform/opacity only (kein Filter → kein WebKit-Black-Tile). */ body[data-motion="4"] .aq-resobox.is-fit .aq-reso-smiley, body[data-motion="5"] .aq-resobox.is-fit .aq-reso-smiley, body[data-motion="6"] .aq-resobox.is-fit .aq-reso-smiley{position:relative;} body[data-motion="4"] .aq-resobox.is-fit .aq-reso-smiley::after, body[data-motion="5"] .aq-resobox.is-fit .aq-reso-smiley::after, body[data-motion="6"] .aq-resobox.is-fit .aq-reso-smiley::after{ content:""; position:absolute; left:50%; top:30px; width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%; border:2px solid var(--blue); opacity:0; pointer-events:none; animation:aqMoReceive 1.1s var(--ease) .35s 2; } @keyframes aqMoReceive{ 0%{transform:scale(.5); opacity:.55;} 100%{transform:scale(1.8); opacity:0;} } /* ── ab Stufe 6 · Signatur: Selbst-Zeichnen ─────────────────────── Unter 6: Hero-Strich & Preis-Kringel statisch fertig gezeichnet (Information bleibt — nur die Hand-Geste entfällt). */ body:not([data-motion="6"]) .aq-underline path{animation:none !important; stroke-dashoffset:0 !important;} body:not([data-motion="6"]) .aq-mk-circle path{animation:none !important; stroke-dashoffset:0 !important;} /* ── ab Stufe 6 · Ambiente: atmender Haupt-CTA ──────────────────── Leben ohne Aufmerksamkeitsforderung. Nur transform (GPU). */ body[data-motion="6"] .aq-hero .aq-btn--primary{animation:aqMoBreath 3.6s ease-in-out 1.2s infinite;} @keyframes aqMoBreath{0%,100%{transform:none;}50%{transform:scale(1.03);}} /* ── ab Stufe 6 · ausgeprägte Hover-Choreografie ────────────────── Pro Motiv eine kleine Sequenz, nie alles gleichzeitig. */ body[data-motion="6"] .aq-weg{transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);} body[data-motion="6"] .aq-weg:not(.aq-weg--main):hover{transform:translateY(-3px); border-color:var(--blue);} body[data-motion="6"] .aq-out-col{transition:transform .18s var(--ease), box-shadow .18s var(--ease);} body[data-motion="6"] .aq-out-col:hover{transform:translateY(-2px); box-shadow:9px 9px 0 -1px var(--blue-wash);} body[data-motion="6"] .aq-risk-card{transition:transform .16s var(--ease);} body[data-motion="6"] .aq-risk-card:hover{transform:translateY(-3px);} body[data-motion="6"] .aq-st-rail{transition:background .2s var(--ease);} body[data-motion="6"] .aq-st-rail:hover{background:rgba(0,0,254,.03);} /* ── Globaler Clamp: Reduced-Motion = Stufe 1 (Ambiente sicher aus) ── */ @media (prefers-reduced-motion: reduce){ body[data-motion] .aq-hero .aq-btn--primary{animation:none !important;} body[data-motion] .aq-reso-smiley::after{animation:none !important; opacity:0 !important;} body[data-motion] .aq-will-reveal{opacity:1 !important; transform:none !important;} } /* ── Motion-Demo-Badge (nur Vergleichsseiten) ─────────────────────── */ .aq-mo-badge{ position:fixed; left:16px; bottom:16px; z-index:80; background:var(--ink); color:#fff; border-radius:999px; padding:8px 14px; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; box-shadow:0 8px 24px -8px rgba(0,0,0,.4); } .aq-mo-badge b{color:var(--yellow); font-weight:400;}