/* ============================================================ Groupler Glow-Up — OniCenter-style premium background chrome. Purely ADDITIVE: keeps dark bg on , makes transparent so the fixed glow (z-index < 0) shows through, while all existing content (z-index auto) paints above it. Uses Groupler's own palette (pink / violet / cyan). ============================================================ */ html{background:var(--bg-1,#1a0b2e)!important;} body{background:transparent!important;} #grp-canvas{position:fixed;inset:0;z-index:-2;pointer-events:none;} .grp-orb{position:fixed;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:-2;will-change:transform;} .grp-orb-1{width:720px;height:720px;top:-260px;left:-200px;background:radial-gradient(circle,rgba(255,96,151,0.16) 0%,transparent 65%);animation:grpOrb 28s ease-in-out infinite;} .grp-orb-2{width:620px;height:620px;bottom:-160px;right:-160px;background:radial-gradient(circle,rgba(192,132,252,0.13) 0%,transparent 65%);animation:grpOrb 35s ease-in-out infinite reverse;} .grp-orb-3{width:420px;height:420px;top:42%;left:36%;background:radial-gradient(circle,rgba(61,220,151,0.08) 0%,transparent 65%);animation:grpOrb 22s ease-in-out infinite;} .grp-orb-4{width:320px;height:320px;top:16%;right:16%;background:radial-gradient(circle,rgba(255,96,151,0.09) 0%,transparent 65%);animation:grpOrb 18s ease-in-out infinite 5s;} /* hero halo — soft glow bloom behind the headline */ .grp-orb-5{width:900px;height:520px;top:-120px;left:50%;transform:translateX(-50%);filter:blur(140px); background:radial-gradient(ellipse at center,rgba(255,96,151,0.10) 0%,rgba(192,132,252,0.06) 45%,transparent 72%); animation:grpHalo 9s ease-in-out infinite;} @keyframes grpHalo{0%,100%{opacity:.75;}50%{opacity:1;}} .grp-grid{position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:linear-gradient(rgba(255,96,151,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,96,151,0.025) 1px,transparent 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(ellipse 90% 85% at 50% 35%,#000 0%,transparent 75%); mask-image:radial-gradient(ellipse 90% 85% at 50% 35%,#000 0%,transparent 75%);} @keyframes grpOrb{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(60px,-50px) scale(1.1);}66%{transform:translate(-40px,40px) scale(0.95);}} @media(max-width:768px){.grp-orb{filter:blur(80px);}.grp-orb-3,.grp-orb-4{display:none;}} @media(prefers-reduced-motion:reduce){.grp-orb{animation:none;}} /* ── PROMPT-3: Scroll-Reveal (nur aktiv, wenn JS die Ready-Klasse setzt → fail-safe) ── */ .grp-reveal-ready .grp-reveal{opacity:0;transform:translateY(18px);will-change:opacity,transform;} .grp-reveal-ready .grp-reveal.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1);} /* ── PROMPT-3: Skeleton-Loader (Shimmer) ── */ .skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.05);border:1px solid rgba(255,183,197,.10);border-radius:16px;} .skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,183,197,.12),transparent);animation:grp-shimmer 1.4s infinite;} @keyframes grp-shimmer{100%{transform:translateX(100%);}} img[loading="lazy"]{background:rgba(255,255,255,.04);} @media (prefers-reduced-motion: reduce){ .grp-reveal-ready .grp-reveal{opacity:1!important;transform:none!important;transition:none!important;} .skeleton::after{animation:none!important;} }