/* ============================================================ HMG SOLUTION — effects.css Scroll-Reveal, Line-Draw, Mikro-Interaktionen (additiv nach base.css) ============================================================ */ /* ---------- No-JS-Sicherung (PFLICHT) ---------- Reveal darf Content NIE gaten: shared.js ist eine einzige IIFE — ein Fehler im Loader-/Nav-Block würde sonst die halbe Seite unsichtbar lassen. wird per Inline-Script im sofort entfernt; bleibt sie stehen (JS aus/kaputt), ist alles sichtbar. */ .no-js [data-reveal], .no-js [data-stagger] > *, .no-js .draw{ opacity:1 !important; transform:none !important; } .no-js .loader{ display:none !important; } /* Zusätzlicher Gürtel für Browser mit abgeschaltetem Scripting */ @media (scripting: none){ [data-reveal],[data-stagger] > *,.draw{ opacity:1 !important; transform:none !important; } .loader{ display:none !important; } } /* ---------- Scroll-Reveal ---------- */ [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); } /* Startzustaende der Richtungsvarianten - MUESSEN vor .is-in stehen. [data-reveal][data-reveal="right"] und [data-reveal].is-in haben dieselbe Spezifitaet (0,2,0); stand die Richtung danach, gewann sie auch nach dem Einblenden und das Element blieb dauerhaft 30px verschoben (ragte damit ueber die Content-Kante hinaus). */ [data-reveal][data-reveal="left"]{ transform:translateX(-30px); } [data-reveal][data-reveal="right"]{ transform:translateX(30px); } [data-reveal][data-reveal="scale"]{ transform:scale(.96); } /* Mobil: horizontale Reveals erzeugen H-Overflow -> nur vertikal einblenden */ @media (max-width:900px){ [data-reveal][data-reveal="left"], [data-reveal][data-reveal="right"]{ transform:translateY(26px); } } /* Endzustand zuletzt, damit er jede Richtungsvariante ueberschreibt */ [data-reveal].is-in{ opacity:1; transform:none; } /* Gestaffelte Kinder */ [data-stagger] > *{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); } [data-stagger].is-in > *{ opacity:1; transform:none; } [data-stagger].is-in > *:nth-child(1){ transition-delay:.05s; } [data-stagger].is-in > *:nth-child(2){ transition-delay:.12s; } [data-stagger].is-in > *:nth-child(3){ transition-delay:.19s; } [data-stagger].is-in > *:nth-child(4){ transition-delay:.26s; } [data-stagger].is-in > *:nth-child(5){ transition-delay:.33s; } [data-stagger].is-in > *:nth-child(6){ transition-delay:.40s; } [data-stagger].is-in > *:nth-child(7){ transition-delay:.47s; } [data-stagger].is-in > *:nth-child(8){ transition-delay:.54s; } /* Industry hat 9 Leistungskarten — ohne diese Zeilen bekäme Karte 9 den Delay 0s und erschiene VOR allen anderen. Bis 12 vorgehalten. */ [data-stagger].is-in > *:nth-child(9){ transition-delay:.61s; } [data-stagger].is-in > *:nth-child(10){ transition-delay:.68s; } [data-stagger].is-in > *:nth-child(11){ transition-delay:.75s; } [data-stagger].is-in > *:nth-child(12){ transition-delay:.82s; } /* ---------- SVG Line-Draw ---------- */ .draw path, .draw line, .draw polyline, .draw circle, .draw rect{ stroke-dasharray:var(--len,1200); stroke-dashoffset:var(--len,1200); transition:stroke-dashoffset 1.6s var(--ease-io); } .draw.is-in path, .draw.is-in line, .draw.is-in polyline, .draw.is-in circle, .draw.is-in rect{ stroke-dashoffset:0; } /* ---------- Animierte Wellen / Puls (Sensorik) ---------- */ @keyframes dash-flow{ to{ stroke-dashoffset:-1000; } } .flow{ stroke-dasharray:8 10; animation:dash-flow 18s linear infinite; } @keyframes pulse-ring{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(2.4); opacity:0; } } .pulse-ring{ transform-origin:center; animation:pulse-ring 3s var(--ease-io) infinite; } .pulse-ring--2{ animation-delay:1s; } .pulse-ring--3{ animation-delay:2s; } @keyframes float-y{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } } .float{ animation:float-y 6s ease-in-out infinite; } @keyframes scan{ 0%{ transform:translateY(-100%);} 100%{ transform:translateY(100%);} } /* ---------- Dauerhafte, dezente Ambient-Loops ---------- */ @keyframes spin-slow{ to{ transform:rotate(360deg); } } .spin-slow{ transform-box:fill-box; transform-origin:center; animation:spin-slow 80s linear infinite; } .spin-rev{ transform-box:fill-box; transform-origin:center; animation:spin-slow 120s linear infinite reverse; } @keyframes breathe{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } } .breathe{ animation:breathe 4.5s ease-in-out infinite; } .breathe--2{ animation-delay:1.2s; } .breathe--3{ animation-delay:2.4s; } .breathe--4{ animation-delay:3.3s; } /* Knoten, der entlang eines Pfades pulsiert (Datenfluss-Gefühl) */ @keyframes travel{ to{ stroke-dashoffset:-2000; } } .travel{ stroke-dasharray:2 22; animation:travel 6s linear infinite; } .travel--slow{ animation-duration:11s; } .travel--fast{ animation-duration:3.5s; } /* sanftes Driften des Blueprint-Rasters */ @keyframes grid-drift{ from{ background-position:0 0,0 0; } to{ background-position:64px 64px,64px 64px; } } .grid-bg.drift{ animation:grid-drift 40s linear infinite; } /* leichtes vertikales Schweben mit Versatz */ .float--2{ animation:float-y 7.5s ease-in-out infinite; animation-delay:.6s; } .float--3{ animation:float-y 9s ease-in-out infinite; animation-delay:1.4s; } /* Scan-Linie, die dauerhaft durch ein Panel wandert */ @keyframes scan-y{ 0%{ transform:translateY(-10%); opacity:0; } 12%,88%{ opacity:.5; } 100%{ transform:translateY(110%); opacity:0; } } .scan-loop{ animation:scan-y 6s ease-in-out infinite; } /* ---------- Counter ---------- */ .count{ font-variant-numeric:tabular-nums; } /* ---------- Hover-Glow für Karten ---------- */ .glow-hover{ position:relative; } .glow-hover::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), var(--accent-tint), transparent 60%); opacity:0; transition:opacity var(--t); } .glow-hover:hover::before{ opacity:1; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce){ [data-reveal], [data-stagger] > *{ opacity:1 !important; transform:none !important; transition:none !important; } .draw path,.draw line,.draw polyline,.draw circle,.draw rect{ stroke-dashoffset:0 !important; transition:none; } .flow,.pulse-ring,.float,.float--2,.float--3{ animation:none !important; } .spin-slow,.spin-rev,.breathe,.travel,.grid-bg.drift,.scan-loop{ animation:none !important; } }