/* ============================================================= WIZARD 30 — MOTION SYSTEM Kopierfertige CSS-Keyframes & Utility-Klassen für alle Animationen aus Abschnitt 06 des Designsystems. Verwendung: - Diese Datei als z.B. `wizard-motion.css` ins Projekt legen und importieren, ODER den Inhalt in dein Stylesheet kopieren. - Jede Animation hat (a) @keyframes und (b) eine Utility-Klasse. - One-shot-Animationen (Karte spielen, Bombe, Flip, ...) per Klasse togglen: Klasse hinzufügen → bei `animationend` wieder entfernen (oder Element neu mounten). - Loop-Animationen (aktiver Spieler) bleiben dauerhaft als Klasse am Element. React/Framer-Hinweise stehen ganz unten in diesem File. Alle Zeiten/Easings entsprechen dem Handoff-README. ============================================================= */ :root { /* Motion-Tokens — zeigen auf tokens.css, dort steht die Wahrheit. */ --mo-ease-out: var(--ds-ease-ui); --mo-ease-inout: var(--ds-ease-inout); --gold: #D4A843; --gold-light: #e6c072; --bombe-warn: #D6362B; } @media (prefers-reduced-motion: reduce) { /* Barrierefreiheit: Bewegungen drastisch reduzieren */ *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ------------------------------------------------------------- 1) KARTE AUSSPIELEN — 0.4s ease-out Karte gleitet von der Hand zur Tischmitte, leicht skalierend. Setze --from-x / --from-y als Differenz (Hand → Tischmitte) in px. Berechnung im JS: from = handRect - tableSlotRect. ------------------------------------------------------------- */ @keyframes wz-play-card { 0% { transform: translate(var(--from-x, 0), var(--from-y, 120px)) scale(0.92) rotate(var(--from-rot, -8deg)); opacity: 0.85; } 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; } } .wz-play-card { animation: wz-play-card 0.4s var(--mo-ease-out) both; } /* ------------------------------------------------------------- 2) STICH EINSAMMELN — 0.5s glide + 0.3s fade Karten gleiten zum Gewinner, dann sanftes Fade. --to-x / --to-y = Vektor zur Gewinner-Position. ------------------------------------------------------------- */ @keyframes wz-collect-trick { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 62% { transform: translate(var(--to-x, 0), var(--to-y, -160px)) scale(0.7); opacity: 1; } 100% { transform: translate(var(--to-x, 0), var(--to-y, -160px)) scale(0.55); opacity: 0; } } .wz-collect-trick { animation: wz-collect-trick 0.8s var(--mo-ease-inout) forwards; } /* ------------------------------------------------------------- 3) BOMBE EXPLODIERT — 0.6s shake + scatter Karten zittern, fliegen auseinander, faden aus. --scatter-x / --scatter-y / --scatter-rot pro Karte zufällig setzen (z.B. ±200px, ±60deg), damit jede Karte in andere Richtung fliegt. ------------------------------------------------------------- */ @keyframes wz-bomb { 0% { transform: translate(0,0) rotate(0); } 8% { transform: translate(-4px, 2px) rotate(-2deg); } 16% { transform: translate(4px, -2px) rotate(2deg); } 24% { transform: translate(-5px, 1px) rotate(-3deg); } 32% { transform: translate(5px, -1px) rotate(3deg); } 40% { transform: translate(0,0) rotate(0); } 100% { transform: translate(var(--scatter-x, 160px), var(--scatter-y, -140px)) rotate(var(--scatter-rot, 45deg)) scale(0.6); opacity: 0; } } .wz-bomb { animation: wz-bomb 0.6s var(--mo-ease-out) forwards; } /* Optionaler roter Blitz über dem Tisch */ @keyframes wz-bomb-flash { 0% { opacity: 0; } 10% { opacity: 0.85; } 100% { opacity: 0; } } .wz-bomb-flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, var(--bombe-warn), transparent 60%); animation: wz-bomb-flash 0.6s ease-out forwards; } /* ------------------------------------------------------------- 4) FEE SCHLÄGT DRACHEN — 0.5s twinkle Glitzer-Burst über der Fee-Karte. Lege ein Overlay-Element (.wz-sparkle-burst) über die Fee und animiere es. ------------------------------------------------------------- */ @keyframes wz-sparkle-burst { 0% { opacity: 0; transform: scale(0.4); } 35% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.4); } } .wz-sparkle-burst { position: absolute; inset: -10px; pointer-events: none; background: radial-gradient(2px 2px at 30% 30%, #fff, transparent), radial-gradient(2px 2px at 70% 25%, #dff0f8, transparent), radial-gradient(2px 2px at 50% 55%, #fff, transparent), radial-gradient(2px 2px at 25% 70%, #bcdcec, transparent), radial-gradient(2px 2px at 78% 68%, #fff, transparent); animation: wz-sparkle-burst 0.5s ease-out forwards; } /* ------------------------------------------------------------- 5) WIZARD GESPIELT — 0.45s ease-out goldener Puls/Glow ------------------------------------------------------------- */ @keyframes wz-wizard-pulse { 0% { box-shadow: 0 0 0 0 rgba(200,150,60,0), 0 0 0 rgba(240,214,138,0); } 40% { box-shadow: 0 0 0 6px rgba(200,150,60,.35), 0 0 40px 8px rgba(240,214,138,.7); } 100% { box-shadow: 0 0 0 0 rgba(200,150,60,0), 0 0 0 rgba(240,214,138,0); } } .wz-wizard-pulse { animation: wz-wizard-pulse 0.45s var(--mo-ease-out); } /* ------------------------------------------------------------- 6) SONDERKARTE GESPIELT — ~0.4s Aufleuchten in Karten-Farbe --special-color pro Karte setzen (z.B. var(--drache)). ------------------------------------------------------------- */ @keyframes wz-special-flash { 0% { box-shadow: 0 0 0 0 transparent; } 45% { box-shadow: 0 0 28px 6px var(--special-color, #fff); } 100% { box-shadow: 0 0 0 0 transparent; } } .wz-special-flash { animation: wz-special-flash 0.4s var(--mo-ease-out); } /* ------------------------------------------------------------- 7) TRUMPF AUFDECKEN — 0.6s ease-in-out 3D-Flip Struktur: .wz-flip > .wz-flip-inner mit .wz-face-front / .wz-face-back ------------------------------------------------------------- */ .wz-flip { perspective: 900px; } .wz-flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 600ms var(--mo-ease-inout); } .wz-flip.is-revealed .wz-flip-inner { transform: rotateY(180deg); } .wz-face-front, .wz-face-back { position: absolute; inset: 0; backface-visibility: hidden; } .wz-face-back { transform: rotateY(180deg); } /* 8) WERWOLF-TAUSCH entfiel: Der Transformator zeigt seinen Wechsel als Szene auf dem Tisch (js/motion-szenen.js), die Karten tauschen nicht mehr sichtbar die Plätze. Nummerierung bleibt lückenhaft, damit die Abschnitte weiter zum Designsystem passen. */ /* ------------------------------------------------------------- 9) RUNDEN-ÜBERGANG — 0.8s fade-to-black Overlay-Element über den ganzen Screen legen. in: fade-in zu schwarz; out: fade-out (für neues Scoreboard). ------------------------------------------------------------- */ @keyframes wz-fade-to-black { 0% { opacity: 0; } 100% { opacity: 1; } } .wz-round-curtain { position: fixed; inset: 0; z-index: 100; pointer-events: none; background: #08061a; animation: wz-fade-to-black 0.8s ease-in-out forwards; } .wz-round-curtain.is-leaving { animation: wz-fade-to-black 0.8s ease-in-out reverse forwards; } /* ------------------------------------------------------------- 10) HOVER EIGENE KARTE — ~0.2s hebt 10px + Schatten Transition statt Keyframe (reagiert auf :hover). ------------------------------------------------------------- */ .wz-hand-card { transition: transform var(--ds-t-micro) var(--mo-ease-out), box-shadow var(--ds-t-micro) var(--mo-ease-out); } .wz-hand-card:hover { transform: translateY(-10px); box-shadow: 0 16px 30px rgba(0,0,0,.5), 0 0 22px rgba(200,150,60,.5), 0 0 0 1.5px var(--gold); } /* ------------------------------------------------------------- 11) AKTIVER SPIELER — 2.4s infinite ease-in-out Sanft pulsierender Ring in der SITZ-Akzentfarbe var(--ac) (Dauer-Loop). Wird für Gegner (.seat-avatar) und den eigenen Sitz (#my-avatar-circle) gesetzt – beide definieren --ac. Ergänzt das goldene Panel/Badge um ein Signal, das eindeutig zeigt WER dran ist, auch peripher erkennbar. ------------------------------------------------------------- */ @keyframes wz-active-pulse { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 55%, transparent), 0 0 22px color-mix(in srgb, var(--ac) 35%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac) 70%, transparent), 0 0 34px color-mix(in srgb, var(--ac) 60%, transparent); } } .wz-active-player { --ac: var(--gold); /* Fallback, falls kein Sitz-Akzent gesetzt ist */ /* Statischer Ring als Basis – bleibt sichtbar, wenn die Animation per prefers-reduced-motion abgeschaltet wird. */ box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 60%, transparent), 0 0 18px color-mix(in srgb, var(--ac) 45%, transparent); animation: wz-active-pulse 2.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .wz-active-player { animation: none; } } /* Die BONUS-Dauerloops des Prototyps (.wz-twinkle für den Fee-Glitzer, .wz-irid für das Schimmern des Gestaltenwandlers) sind entfallen: Sie lagen auf den Karten-Emblemen, und die tragen seit dem Handoff die gezeichneten Illustrationen aus img/sonderkarten/. */ /* 12) FUNKENFEE-FLUG entfiel mit der Overlay-Ebene: Die Fee fliegt seit dem 02.08.2026 als Rig-Figur auf dem Tisch zum Dampfkoloss (js/motion-szenen.js). Nummerierung bleibt lückenhaft, damit die Abschnitte weiter zum Designsystem passen. */ /* ============================================================= REACT-NUTZUNG (Vanilla CSS, ohne Lib) ------------------------------------------------------------- // One-shot: Klasse setzen, bei animationend entfernen function PlayedCard({ fromX, fromY }) { const [animating, setAnimating] = React.useState(true); return (
setAnimating(false)} /> ); } FRAMER MOTION (Alternative für die Bewegungs-Animationen 1,2,3,8) ------------------------------------------------------------- // Karte ausspielen // Tipp: Für "Stich einsammeln" eignet sich Framers `layout`-Prop // + AnimatePresence, damit Positionen automatisch interpoliert werden. ============================================================= */