/* ════════════════════════════════════════════════════════════ React-Bits Effekt-Bundle (geteilt) — maxaowl.de Eingebunden auf allen Seiten AUSSER: - index.html (Effekte dort inline, inkl. Shiny-Text + Hero-Sterne) - eevee.html + test-eevee-*.html - n8f-g1s.html (OBS-Overlay, muss transparent bleiben) Aktiviert durch fx.js (setzt + injiziert den Grain-Filter). ════════════════════════════════════════════════════════════ */ /* ── Effekt-Ebene hinter ALLES legen ── Statt einzelne (unterschiedlich verschachtelte) Inhalts-Wrapper nach vorn zu heben, ziehen wir den dunklen Hintergrund auf und machen transparent. Sterne (z-index:-2) und Grain (z-index:-1) liegen damit garantiert hinter dem gesamten Seiteninhalt — egal wie er strukturiert ist. (fx.css wird nur auf den Effekt-Seiten geladen → sauber gescoped.) */ html { background:var(--bg,#05030a); } body.rb-fx { background:transparent !important; } /* ── Grain / Noise-Overlay ── */ body.rb-fx::after { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:transparent; opacity:.04; filter:url(#grain); } /* ── Sternenfeld (fixiert, hinter dem Inhalt) ── */ .rb-starfield { position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; } .rb-starfield .star-wrap { position:absolute; animation:rb-star-drift var(--dr,14s) ease-in-out infinite; animation-delay:var(--dd,0s); } .rb-starfield .dot { display:block; width:100%; height:100%; border-radius:50%; background:var(--neon,#a78bfa); opacity:.4; animation:rb-twinkle var(--d,3s) ease-in-out infinite; } @keyframes rb-twinkle { 0%,100%{opacity:.06;transform:scale(1)} 50%{opacity:.4;transform:scale(1.4)} } @keyframes rb-star-drift { 0% { transform:translate(0,0); } 25% { transform:translate(calc(var(--dx,8) * 1px),calc(var(--dy,-5) * 1px)); } 50% { transform:translate(calc(var(--dx,8) * -0.6px),calc(var(--dy,-5) * -0.8px)); } 75% { transform:translate(calc(var(--dx,8) * -0.3px),calc(var(--dy,-5) * 0.4px)); } 100% { transform:translate(0,0); } } /* ── [Grün] StarBorder — wandernder Neon-Glow am LIVE-Badge ── */ @property --rb-sb-angle { syntax:''; inherits:false; initial-value:0deg; } .hero-live-badge { position:relative; } .hero-live-badge::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:conic-gradient(from var(--rb-sb-angle), transparent 55%, #c084fc 70%, #f0abfc 80%, #c084fc 90%, transparent 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:rb-sb-spin 3.5s linear infinite; pointer-events:none; } @keyframes rb-sb-spin { to { --rb-sb-angle:360deg; } } /* ── [Grün] GlareHover — Licht-Streif über Game- & Social-Cards ── */ .game-card, .social-card { position:relative; overflow:hidden; } .game-card::after, .social-card::after { content:''; position:absolute; top:0; left:-75%; width:50%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent); transform:skewX(-20deg); pointer-events:none; transition:left .6s ease; z-index:2; } .game-card:hover::after, .social-card:hover::after { left:130%; } /* ── [Grün] ScrollReveal — Opt-in via data-rb-reveal (Klasse per JS) ── */ [data-rb-reveal] { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; } [data-rb-reveal].rb-reveal-in { opacity:1; transform:none; } /* ── [Gelb] ClickSpark — Funken-Partikel beim Klick ── */ .rb-spark { position:fixed; width:4px; height:4px; border-radius:50%; background:#e879f9; box-shadow:0 0 6px #e879f9; pointer-events:none; z-index:9999; animation:rb-spark-fly .5s ease-out forwards; } @keyframes rb-spark-fly { 0% { transform:translate(0,0) scale(1); opacity:1; } 100% { transform:translate(var(--sx,0),var(--sy,0)) scale(.2); opacity:0; } } /* ── prefers-reduced-motion: alle Bewegungen aus ── */ @media (prefers-reduced-motion:reduce) { body.rb-fx::after { display:none; } .rb-starfield .star-wrap { animation:none; } .hero-live-badge::before { animation:none; } .game-card::after, .social-card::after { display:none; } [data-rb-reveal] { opacity:1; transform:none; transition:none; } }