/* ============================================================================ EF Portal — ANIMATIONS-SCHICHT (gemeinsam · theme- & style-bewusst) ---------------------------------------------------------------------------- Eingeführt 16.06.2026. Eine zentrale Datei für alle Seiten (Portal + HUB + NVE), analog zum Style-System (style-glass/style-terminal). KEINE Doppelpflege. PRINZIP • Aktiv NUR, wenn anim.js setzt. Ohne JS oder bei prefers-reduced-motion bleibt JEDER Inhalt sofort sichtbar (kein FOUC, nichts versteckt) — die Reveal-Regeln greifen ausschließlich unter html.anim-ready .a-reveal. • Nur transform/opacity (GPU-compositiert) → performant, kein Layout-Reflow. • FARBE kommt aus den Theme-Variablen (--accent/--nve/--hub/--success) → jedes Farbschema färbt die Animationen automatisch mit. • CHARAKTER kommt aus den --a-*-Tokens, die pro data-style gesetzt werden (Tempo, Easing, Distanz, Glow, Sheen). So fühlt sich jeder Style anders an. • Style setzt die GLOW-BASIS (--a-glow-base), Theme einen FAKTOR (--a-glow-f). Effektiv = calc(base * f). Dadurch komponieren beide konfliktfrei (Terminal bleibt knackig ohne Glow, auch in Neon-Themes; Licht-Themes dimmen den Glow gegen Schmutz-Look). ============================================================================ */ /* ---- Tokens: Default-Charakter (= Style 'klassik') ------------------------ */ :root{ --a-dur: .52s; /* Reveal-Dauer */ --a-dur-q: .2s; /* Mikro-Interaktionen */ --a-ease: cubic-bezier(.22,.61,.36,1); /* sanftes ease-out */ --a-rise: 14px; /* Eintritts-Versatz nach oben */ --a-scale: .97; /* Pop-Startskalierung */ --a-stag: 58ms; /* Stagger-Schritt je Kachel */ --a-glow: var(--accent); /* Glow-Farbe folgt Theme-Akzent*/ --a-glow-base: 0px; /* Glow-Radius (klassik: keiner)*/ --a-glow-f: 1; /* Glow-Faktor (Theme skaliert) */ } /* ---- Style: TERMINAL — knackig, maschinell, hart, kein Weichzeichner ------ */ html[data-style="terminal"]{ --a-dur: .28s; --a-dur-q: .1s; --a-ease: cubic-bezier(.2,.9,.3,1); /* schnell rein, kein Overshoot */ --a-rise: 6px; --a-scale: 1; /* kein Pop, reines Aufblenden */ --a-stag: 32ms; /* dichtes „Daten ticken rein" */ --a-glow-base: 0px; /* hart, nie Glow */ } /* ---- Style: GLASS — schwebend, weich, mit Glow & Licht-Sheen -------------- */ html[data-style="glass"]{ --a-dur: .62s; --a-dur-q: .26s; --a-ease: cubic-bezier(.16,.84,.34,1.05);/* leichtes Overshoot → schwebt */ --a-rise: 22px; --a-scale: .93; --a-stag: 80ms; --a-glow-base: 22px; /* weicher Glow in Akzentfarbe */ } /* ---- Theme-Flair: Glow-Faktor je Farbschema ------------------------------ */ /* Licht-Themes: Glow würde auf hellen Flächen schmutzig wirken → aus. */ html[data-theme="hell"], html[data-theme="beige"]{ --a-glow-f:0; } /* Neon-/Spielerei-Themes: kräftiger leuchten. */ html[data-theme="matrix"], html[data-theme="synthwave"], html[data-theme="tron"], html[data-theme="bunt"]{ --a-glow-f:1.5; } html[data-theme="dracula"], html[data-theme="azeroth"], html[data-theme="horde"]{ --a-glow-f:1.2; } /* ============================================================================ KEYFRAMES (nur transform/opacity bzw. einmalige box-shadow-Glows) ============================================================================ */ @keyframes a-reveal{ from{ opacity:0; transform:translate3d(0,var(--a-rise),0) scale(var(--a-scale)); } to { opacity:1; transform:none; } } /* Einmaliger Akzent-Glow beim Erscheinen (nur sichtbar, wenn base*f > 0). */ @keyframes a-glow-once{ 0% { box-shadow:0 0 0 0 transparent; } 38% { box-shadow:0 0 calc(var(--a-glow-base) * var(--a-glow-f)) 0 color-mix(in srgb, var(--a-glow) 50%, transparent); } 100%{ box-shadow:0 0 0 0 transparent; } } /* Dauer-Puls für Status-Punkte (Farbe folgt Akzent/Erfolg). */ @keyframes a-pulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--a-glow) 60%, transparent); } 70% { box-shadow:0 0 0 7px transparent; } } /* ============================================================================ REVEAL — gilt NUR unter html.anim-ready (sonst alles sichtbar) ============================================================================ */ html.anim-ready .a-reveal{ opacity:0; will-change:transform,opacity; } html.anim-ready .a-reveal.a-in{ opacity:1; animation: a-reveal var(--a-dur) var(--a-ease) both; animation-delay: calc(var(--a-i,0) * var(--a-stag)); } /* KPI-/Stat-Kacheln bekommen zusätzlich den einmaligen Akzent-Glow beim Reveal. */ html.anim-ready .stat-card.a-in, html.anim-ready .a-glow-card.a-in{ animation: a-reveal var(--a-dur) var(--a-ease) both, a-glow-once var(--a-dur) var(--a-ease) both; animation-delay: calc(var(--a-i,0) * var(--a-stag)); } /* Status-Punkt-Puls: opt-in über .a-pulse (Farbe via --a-glow überschreibbar). */ html.anim-ready .a-pulse{ animation: a-pulse 2.2s var(--a-ease) infinite; } /* ============================================================================ REDUCED MOTION — doppelte Absicherung (anim.js setzt anim-ready dann gar nicht; diese Regeln greifen falls die Klasse anderweitig gesetzt wäre). ============================================================================ */ @media (prefers-reduced-motion: reduce){ html.anim-ready .a-reveal, html.anim-ready .stat-card.a-in, html.anim-ready .a-glow-card.a-in{ opacity:1 !important; transform:none !important; animation:none !important; } html.anim-ready .a-pulse{ animation:none !important; } }