/* ============================================================ HyGaia FX Kit — 15 Premium UI Effects Version: 2.0 · 2026-03-15 Usage: Add classes to your HTML elements. That's it. Set A (7): Hero-Gradient, SVG-Shadow, Scroll-Progress, Scroll-Hint, Share-Button, Glow-Border, Tabular-Nums Set B (8): Reveal-on-Scroll, Conic-Gauge, Animated-Counter, Morphing-Blob, 3D-Tilt, Confetti, SVG-Line-Draw, Mask-Reveal ============================================================ */ /* ---- Brand Tokens ---- */ :root { --hg-navy: #2A4759; --hg-teal: #5EA2A6; --hg-teal-light: #7bc0c4; --hg-bg: #f7fafa; } /* ============================================================ A · ATMENDER HERO-GRADIENT Usage:

...

============================================================ */ .hg-hero-gradient { background: linear-gradient(135deg, var(--hg-navy), #1a2f3d, var(--hg-teal), var(--hg-navy)); background-size: 400% 400%; animation: hg-breathe 12s ease-in-out infinite; color: #fff; } @keyframes hg-breathe { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ============================================================ B · DROP-SHADOW AUF SVGs Usage: ============================================================ */ .hg-svg-shadow { filter: drop-shadow(2px 4px 6px rgba(42, 71, 89, 0.25)); transition: filter 0.3s ease; } .hg-svg-shadow:hover { filter: drop-shadow(3px 6px 10px rgba(42, 71, 89, 0.35)); } /* ============================================================ C · SCROLL-PROGRESS-BAR Usage:

(direkt nach ) JS required: hygaia-fx.js ============================================================ */ .hg-scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--hg-teal), var(--hg-teal-light)); z-index: 9999; transition: width 0.1s linear; border-radius: 0 2px 2px 0; } /* ============================================================ X1 · "SCROLLE WEITER" PFEIL Usage:

oder eigener Content

Verschwindet automatisch nach erstem Scroll (JS). ============================================================ */ .hg-scroll-hint { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); animation: hg-bounce 2s ease-in-out infinite; opacity: 1; transition: opacity 0.5s ease; cursor: default; z-index: 10; } .hg-scroll-hint.hidden { opacity: 0; pointer-events: none; } .hg-scroll-hint svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 2; fill: none; } @keyframes hg-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } } /* ============================================================ X2 · SHARE-BUTTON Usage: JS required: hygaia-fx.js ============================================================ */ .hg-share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border: none; border-radius: 28px; background: linear-gradient(135deg, var(--hg-teal), var(--hg-navy)); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .hg-share-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(94, 162, 166, 0.35); } .hg-share-btn:active { transform: translateY(0); } /* Toast notification for clipboard fallback */ .hg-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--hg-navy); color: #fff; padding: 10px 24px; border-radius: 24px; font-size: 13px; font-weight: 500; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 10000; pointer-events: none; } .hg-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================================ X3 · ROTIERENDE GRADIENT-BORDER Usage:

Content

Farbe folgt dem Score: --hg-glow-color (default: teal) ============================================================ */ .hg-glow-border { --hg-glow-color: var(--hg-teal); position: relative; padding: 3px; border-radius: 20px; background: conic-gradient(from var(--hg-glow-angle, 0deg), var(--hg-glow-color), transparent 40%, var(--hg-glow-color) 60%, transparent); animation: hg-glow-spin 3s linear infinite; } .hg-glow-inner { background: #fff; border-radius: 17px; padding: 24px; position: relative; z-index: 1; } @property --hg-glow-angle { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes hg-glow-spin { to { --hg-glow-angle: 360deg; } } /* Fallback for browsers without @property */ @supports not (background: conic-gradient(from 0deg, red, blue)) { .hg-glow-border { border: 3px solid var(--hg-glow-color); background: none; animation: none; } } /* Score-Farben */ .hg-glow-border.score-green { --hg-glow-color: #4caf50; } .hg-glow-border.score-yellow { --hg-glow-color: #ff9800; } .hg-glow-border.score-red { --hg-glow-color: #e53935; } /* ============================================================ X4 · TABULAR NUMBERS Usage: class="hg-nums" auf jedes Element mit Zahlen Verhindert Ziffern-Flackern bei Countup-Animationen ============================================================ */ .hg-nums { font-variant-numeric: tabular-nums; } /* ============================================================ T1 · REVEAL-ON-SCROLL (Intersection Observer) Usage: class="hg-reveal" (fade up) class="hg-reveal hg-reveal-left" (slide from left) class="hg-reveal hg-reveal-right" (slide from right) class="hg-reveal hg-reveal-scale" (scale up) JS required: hygaia-fx.js (IntersectionObserver) ============================================================ */ .hg-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; } .hg-reveal.hg-reveal-left { transform: translateX(-40px); } .hg-reveal.hg-reveal-right { transform: translateX(40px); } .hg-reveal.hg-reveal-scale { transform: scale(0.9); } .hg-reveal.visible { opacity: 1; transform: translateY(0) translateX(0) scale(1); } /* Stagger: data-hg-delay="1" bis "4" */ .hg-reveal[data-hg-delay="1"] { transition-delay: 0.1s; } .hg-reveal[data-hg-delay="2"] { transition-delay: 0.2s; } .hg-reveal[data-hg-delay="3"] { transition-delay: 0.3s; } .hg-reveal[data-hg-delay="4"] { transition-delay: 0.4s; } /* ============================================================ T2 · CONIC-GRADIENT GAUGE Usage:

75%

============================================================ */ .hg-gauge { --hg-gauge-pct: 0; --hg-gauge-color: var(--hg-teal); --hg-gauge-bg: #e8eef0; --hg-gauge-size: 140px; width: var(--hg-gauge-size); height: var(--hg-gauge-size); border-radius: 50%; background: conic-gradient( var(--hg-gauge-color) calc(var(--hg-gauge-pct) * 3.6deg), var(--hg-gauge-bg) calc(var(--hg-gauge-pct) * 3.6deg) ); display: flex; align-items: center; justify-content: center; position: relative; transition: background 1s ease; } .hg-gauge::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: #fff; } .hg-gauge-value { position: relative; z-index: 1; font-family: 'Raleway', sans-serif; font-size: 28px; font-weight: 700; color: var(--hg-navy); } /* Size variants */ .hg-gauge.sm { --hg-gauge-size: 90px; } .hg-gauge.sm .hg-gauge-value { font-size: 18px; } .hg-gauge.sm::after { inset: 8px; } .hg-gauge.lg { --hg-gauge-size: 200px; } .hg-gauge.lg .hg-gauge-value { font-size: 40px; } /* ============================================================ T3 · ANIMATED COUNTER Usage: 0 Optional: data-hg-duration="2000" (ms), data-hg-suffix="%" JS required: hygaia-fx.js ============================================================ */ /* (Styling via hg-nums + your own CSS — no extra styles needed) */ /* ============================================================ T4 · MORPHING BLOB Usage:

Variants: hg-blob-teal, hg-blob-navy Use as background deko behind content ============================================================ */ .hg-blob { width: 300px; height: 300px; background: linear-gradient(135deg, var(--hg-teal), var(--hg-teal-light)); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; animation: hg-morph 8s ease-in-out infinite; opacity: 0.12; position: absolute; filter: blur(40px); pointer-events: none; z-index: 0; } .hg-blob-navy { background: linear-gradient(135deg, var(--hg-navy), #1a2f3d); } .hg-blob-teal { background: linear-gradient(135deg, var(--hg-teal), var(--hg-teal-light)); } .hg-blob.sm { width: 150px; height: 150px; } .hg-blob.lg { width: 500px; height: 500px; } @keyframes hg-morph { 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(0deg); } 25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } 50% { border-radius: 50% 60% 30% 40% / 40% 70% 50% 60%; transform: rotate(180deg); } 75% { border-radius: 40% 30% 60% 50% / 60% 40% 60% 30%; } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(360deg); } } /* ============================================================ T5 · 3D TILT Usage: class="hg-tilt" auf Cards JS required: hygaia-fx.js (mousemove) ============================================================ */ .hg-tilt { transition: transform 0.15s ease; transform-style: preserve-3d; will-change: transform; } .hg-tilt:hover { box-shadow: 0 12px 32px rgba(42, 71, 89, 0.12); } /* ============================================================ T6 · CONFETTI Usage: Or trigger via JS: HyGaiaFX.confetti(element) JS required: hygaia-fx.js ============================================================ */ .hg-confetti-piece { position: fixed; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; z-index: 10001; animation: hg-confetti-fall 1.2s ease-out forwards; } @keyframes hg-confetti-fall { 0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); } 100% { opacity: 0; transform: translateY(300px) rotate(720deg) scale(0.3); } } /* ============================================================ T7 · SVG LINE-DRAWING Usage: All paths/lines/circles inside get the draw animation. Optional: data-hg-draw-duration="2" (seconds) JS required: hygaia-fx.js (calculates stroke-dasharray) ============================================================ */ .hg-line-draw path, .hg-line-draw line, .hg-line-draw circle, .hg-line-draw polyline, .hg-line-draw polygon, .hg-line-draw rect { stroke-dashoffset: var(--hg-dash-length, 1000); stroke-dasharray: var(--hg-dash-length, 1000); transition: stroke-dashoffset var(--hg-draw-dur, 2s) ease; } .hg-line-draw.drawn path, .hg-line-draw.drawn line, .hg-line-draw.drawn circle, .hg-line-draw.drawn polyline, .hg-line-draw.drawn polygon, .hg-line-draw.drawn rect { stroke-dashoffset: 0; } /* ============================================================ T8 · CSS MASK-IMAGE REVEAL Usage: class="hg-mask-reveal" (gradient wipe from left) class="hg-mask-reveal hg-mask-radial" (radial reveal from center) Triggers when element gets .visible (combine with hg-reveal) ============================================================ */ .hg-mask-reveal { -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 0%); mask-image: linear-gradient(90deg, #000 0%, transparent 0%); -webkit-mask-size: 200% 100%; mask-size: 200% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; transition: -webkit-mask-position 1s ease, mask-position 1s ease; } .hg-mask-reveal.visible { -webkit-mask-position: 0% 0; mask-position: 0% 0; } .hg-mask-reveal.hg-mask-radial { -webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 0%); mask-image: radial-gradient(circle at center, #000 0%, transparent 0%); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; transition: -webkit-mask-image 1s ease, mask-image 1s ease; } .hg-mask-reveal.hg-mask-radial.visible { -webkit-mask-image: radial-gradient(circle at center, #000 0%, #000 100%); mask-image: radial-gradient(circle at center, #000 0%, #000 100%); } /* ============================================================ PREFERS-REDUCED-MOTION Respektiert System-Einstellung: schaltet ALLE Animationen ab ============================================================ */ @media (prefers-reduced-motion: reduce) { .hg-hero-gradient { animation: none; } .hg-scroll-hint { animation: none; } .hg-glow-border { animation: none; } .hg-scroll-progress { transition: none; } .hg-share-btn { transition: none; } .hg-svg-shadow { transition: none; } .hg-reveal { opacity: 1; transform: none; transition: none; } .hg-blob { animation: none; } .hg-tilt { transition: none; } .hg-confetti-piece { animation: none; display: none; } .hg-line-draw path, .hg-line-draw line, .hg-line-draw circle, .hg-line-draw polyline { stroke-dashoffset: 0; transition: none; } .hg-mask-reveal { -webkit-mask-image: none; mask-image: none; } }