/* ============================================================================ * sword_motion_system.css — Sword Motion System (Bauteil A) * ---------------------------------------------------------------------------- * Ergänzt sword_anim_engine.css additiv: * (1) CSS Custom Properties (Motion Tokens) — einheitliche Timing/Glow-Werte * für alle Sword-UI-Bausteine (B/C/D/E). * (2) presenting-State — goldener Kompass-Akzent (Vollbild-Präsentation). * (3) Reduced-Motion-Schalter — class="motion-reduced" auf via * SwordMotion.setReducedMotion(true); stoppt bekannte Sword-Animationen * ohne die Media-Query-Grenze zu touchieren. * * FE-2-Konform: nur transform/opacity/filter in @keyframes. * 0 externe Requests. SANDBOX ONLY. * ========================================================================== */ /* ── (1) Motion Tokens ─────────────────────────────────────────────────────── */ :root { /* Dauer */ --sword-dur-fast: 180ms; --sword-dur-medium: 420ms; --sword-dur-slow: 800ms; /* Easing */ --sword-ease-out: cubic-bezier(.22, 1, .36, 1); /* spring-artiger Auslauf */ --sword-ease-in-out: cubic-bezier(.4, 0, .2, 1); /* Material-Standard */ /* Glow — Cyan */ --sword-glow-low: 0 0 8px rgba(52,209,232,.25); --sword-glow-medium: 0 0 18px rgba(52,209,232,.5), 0 0 40px rgba(52,209,232,.18); --sword-glow-high: 0 0 32px rgba(52,209,232,.75), 0 0 80px rgba(52,209,232,.3), 0 0 140px rgba(52,209,232,.12); /* Glow — Gold (Präsentations-/Presenting-Akzent) */ --sword-glow-gold-low: 0 0 8px rgba(212,168,83,.25); --sword-glow-gold-medium: 0 0 18px rgba(212,168,83,.5), 0 0 40px rgba(212,168,83,.15); --sword-glow-gold-high: 0 0 32px rgba(212,168,83,.75), 0 0 80px rgba(212,168,83,.25); } /* ── (2) presenting-State ──────────────────────────────────────────────────── */ /* Aktivierung durch SwordMotion.setState("presenting") → SwordAnim.setState("presenting") * → engine setzt data-mode="presenting" auf dem Kompass-Host. * Goldener Glow unterscheidet den Präsentations-State deutlich von Cyan-Antwort. */ .gksw-compass[data-mode="presenting"] .gksw-cmp-glow { background: radial-gradient(circle, rgba(212,168,83,.55), transparent 62%); opacity: 0.95; animation-duration: 1.8s; } .gksw-compass[data-mode="presenting"] .gksw-cmp-core { animation-duration: 1.8s; filter: drop-shadow(0 0 12px rgba(212,168,83,.9)); } /* reduced-motion: presenting-State deaktivieren */ @media (prefers-reduced-motion: reduce) { .gksw-compass[data-mode="presenting"] .gksw-cmp-glow, .gksw-compass[data-mode="presenting"] .gksw-cmp-core { animation: none !important; } } /* ── (3) Reduced-Motion-Schalter (class-basiert) ───────────────────────────── */ /* SwordMotion.setReducedMotion(true) setzt html.motion-reduced. * Stoppt gezielt alle bekannten Sword-Animations-Klassen — kein universeller * *-Selektor (Performance). Neue Bausteine ergänzen ihre Klassen hier. */ /* Kompass-Engine */ :root.motion-reduced .gksw-cmp-core, :root.motion-reduced .gksw-cmp-glow, :root.motion-reduced .gksw-cmp-orbit { animation: none !important; transition: none !important; } /* Thinking-V2 (swth-*) */ :root.motion-reduced .swth-ring-1, :root.motion-reduced .swth-ring-2, :root.motion-reduced .swth-ring-3, :root.motion-reduced .swth-pulse-ring, :root.motion-reduced .swth-core, :root.motion-reduced .swth-line, :root.motion-reduced .swth-label { animation: none !important; transition: none !important; } :root.motion-reduced .swth-ring-1, :root.motion-reduced .swth-ring-2, :root.motion-reduced .swth-ring-3 { opacity: .5 !important; } /* SVG-Karte (BUILD-1) */ :root.motion-reduced #gk-map-route, :root.motion-reduced .gkm-pulse { animation: none !important; } /* Stage-Vorhang (sword_stage.js — JS-gesteuert; CSS stoppt CSS-Transitions) */ :root.motion-reduced .swst-root, :root.motion-reduced .swst-root * { transition-duration: 0.01ms !important; }