/* ============================================================
   03 · Hintergründe
   ============================================================ */
.hg{position:absolute;inset:0;width:100%;height:100%}
.hg-canvas{display:block}
.hg-label{position:relative;z-index:3;padding:9px 16px;border-radius:999px;font:600 13px var(--sans);letter-spacing:-.01em;color:#fff;
  background:rgba(10,10,20,.35);backdrop-filter:blur(10px) saturate(1.4);-webkit-backdrop-filter:blur(10px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);pointer-events:none}

/* Aurora */
.hg-aurora{background:#05050c;overflow:hidden}
.hg-aurora i{position:absolute;width:65%;height:70%;border-radius:50%;filter:blur(46px);mix-blend-mode:screen;opacity:.85;animation:aurora 13s ease-in-out infinite alternate}
.hg-aurora i:nth-child(1){left:-10%;top:-10%;background:var(--a1)}
.hg-aurora i:nth-child(2){right:-15%;top:5%;background:var(--a2);animation-duration:11s;animation-delay:-4s}
.hg-aurora i:nth-child(3){left:20%;bottom:-25%;background:var(--a3);animation-duration:15s;animation-delay:-7s}
.hg-aurora i:nth-child(4){left:40%;top:20%;width:40%;height:40%;background:var(--a4);opacity:.45;animation-duration:9s}
@keyframes aurora{0%{transform:translate(0,0) scale(1) rotate(0deg)}50%{transform:translate(18%,12%) scale(1.25) rotate(40deg)}100%{transform:translate(-12%,8%) scale(.9) rotate(-20deg)}}
[data-thema="hell"] .hg-aurora{background:#f4f4fb}
[data-thema="hell"] .hg-aurora i{mix-blend-mode:multiply;opacity:.55}

/* Mesh mit @property */
@property --mx1{syntax:'<percentage>';inherits:false;initial-value:15%}
@property --my1{syntax:'<percentage>';inherits:false;initial-value:20%}
@property --mx2{syntax:'<percentage>';inherits:false;initial-value:85%}
@property --my2{syntax:'<percentage>';inherits:false;initial-value:15%}
@property --mx3{syntax:'<percentage>';inherits:false;initial-value:70%}
@property --my3{syntax:'<percentage>';inherits:false;initial-value:85%}
@property --mx4{syntax:'<percentage>';inherits:false;initial-value:20%}
@property --my4{syntax:'<percentage>';inherits:false;initial-value:80%}
.hg-mesh{background:
  radial-gradient(at var(--mx1) var(--my1),var(--a1) 0,transparent 55%),
  radial-gradient(at var(--mx2) var(--my2),var(--a2) 0,transparent 50%),
  radial-gradient(at var(--mx3) var(--my3),var(--a3) 0,transparent 52%),
  radial-gradient(at var(--mx4) var(--my4),var(--a4) 0,transparent 45%),#0e0e1c;
  animation:mesh 12s ease-in-out infinite alternate}
@keyframes mesh{
  33%{--mx1:60%;--my1:10%;--mx2:30%;--my2:40%;--mx3:90%;--my3:60%;--mx4:10%;--my4:40%}
  66%{--mx1:80%;--my1:70%;--mx2:10%;--my2:80%;--mx3:40%;--my3:20%;--mx4:60%;--my4:95%}
  100%{--mx1:30%;--my1:90%;--mx2:70%;--my2:60%;--mx3:20%;--my3:10%;--mx4:90%;--my4:20%}}

/* Meteore */
.hg-meteore{overflow:hidden;background:radial-gradient(80% 80% at 50% 0%,#1a1440,#05050c 70%)}
.meteor{position:absolute;top:-10%;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px rgba(255,255,255,.6);
  transform:rotate(215deg);animation:meteor linear infinite;opacity:0}
.meteor::before{content:"";position:absolute;top:50%;left:0;width:90px;height:1px;transform:translateY(-50%);background:linear-gradient(90deg,#fff,transparent)}
@keyframes meteor{0%{transform:rotate(215deg) translateX(0);opacity:1}70%{opacity:1}100%{transform:rotate(215deg) translateX(-600px);opacity:0}}

/* Punkteraster mit Spotlight */
.hg-punkte{background-image:radial-gradient(var(--linie-3) 1.2px,transparent 1.6px);background-size:22px 22px;background-color:var(--bg-2)}
.hg-punkte.hell{background-image:radial-gradient(var(--akzent) 1.6px,transparent 2px);background-color:transparent;
  -webkit-mask-image:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),#000,transparent 70%);mask-image:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),#000,transparent 70%)}
.hg-punkte.hell::after{content:"";position:absolute;inset:0;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),var(--akzent-zart),transparent 70%)}

/* Retro-Grid */
.hg-retro{overflow:hidden;background:linear-gradient(180deg,#0d0221 0%,#261447 55%,#0d0221 56%)}
.retro-sonne{position:absolute;left:50%;top:14%;width:150px;height:150px;margin-left:-75px;border-radius:50%;
  background:linear-gradient(180deg,#ffd319,#ff2975 60%,#8c1eff);
  -webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 52%),repeating-linear-gradient(180deg,#000 0 9px,transparent 9px 13px);
  mask-image:linear-gradient(180deg,#000 52%,transparent 52%),repeating-linear-gradient(180deg,#000 0 9px,transparent 9px 13px);
  box-shadow:0 0 60px 10px rgba(255,41,117,.35)}
.retro-boden{position:absolute;left:-50%;right:-50%;top:56%;height:120%;transform-origin:50% 0;transform:perspective(220px) rotateX(62deg);
  background-image:linear-gradient(rgba(255,41,117,.9) 2px,transparent 2px),linear-gradient(90deg,rgba(255,41,117,.9) 2px,transparent 2px);background-size:46px 46px;
  animation:retro 1.2s linear infinite;-webkit-mask-image:linear-gradient(180deg,transparent,#000 25%);mask-image:linear-gradient(180deg,transparent,#000 25%)}
@keyframes retro{to{background-position:0 46px}}

/* Beams */
.hg-beams{background:radial-gradient(70% 90% at 50% 100%,#120d2e,#05050c 70%)}
.hg-beams .spur{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1.2}
.hg-beams .komet{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:70 1400;animation:beam linear infinite;filter:drop-shadow(0 0 6px currentColor)}
@keyframes beam{from{stroke-dashoffset:1470}to{stroke-dashoffset:0}}

/* Metaballs */
.hg-goo{filter:url(#f-goo);background:#07070f}
.hg-goo i{position:absolute;left:50%;top:50%;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;background:var(--akzent);animation:goo 7s ease-in-out infinite}
.hg-goo i:nth-child(2){background:var(--a2);width:70px;height:70px;margin:-35px;animation-duration:9s;animation-delay:-2s}
.hg-goo i:nth-child(3){background:var(--a3);animation-duration:11s;animation-delay:-5s}
.hg-goo i:nth-child(4){background:var(--a2);width:56px;height:56px;margin:-28px;animation-duration:6s;animation-delay:-3s}
.hg-goo i:nth-child(5){background:var(--akzent);width:110px;height:110px;margin:-55px;animation-duration:13s;animation-delay:-6s}
.hg-goo i.goo-maus{animation:none;width:80px;height:80px;margin:-40px;background:var(--a3);transform:translate(var(--gx,0px),var(--gy,0px));transition:transform .15s linear}
@keyframes goo{0%,100%{transform:translate(0,0)}25%{transform:translate(110px,-50px)}50%{transform:translate(-90px,60px)}75%{transform:translate(60px,70px)}}

/* Rauschen */
.hg-rauschen{opacity:.55;mix-blend-mode:overlay}
.demo[data-demo="rauschen"] .demo-buehne{background:linear-gradient(135deg,var(--akzent),var(--a3))}

/* Ripple */
.hg-ripple{display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle,var(--akzent-zart),transparent 60%)}
.hg-ripple i{position:absolute;width:60px;height:60px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--akzent);animation:ripple 4.8s cubic-bezier(.2,.6,.3,1) infinite;opacity:0}
.hg-ripple i:nth-child(2){animation-delay:.8s}.hg-ripple i:nth-child(3){animation-delay:1.6s}.hg-ripple i:nth-child(4){animation-delay:2.4s}
.hg-ripple i:nth-child(5){animation-delay:3.2s}.hg-ripple i:nth-child(6){animation-delay:4s}
@keyframes ripple{0%{transform:scale(.3);opacity:1}100%{transform:scale(9);opacity:0}}

/* Lichtfächer */
.hg-strahlen{overflow:hidden;background:#06060d}
.hg-strahlen::before{content:"";position:absolute;inset:-60%;background:repeating-conic-gradient(from 0deg,color-mix(in oklab,var(--akzent) 55%,transparent) 0deg 6deg,transparent 6deg 18deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,transparent 55%);mask-image:radial-gradient(circle,#000 0,transparent 55%);filter:blur(6px);animation:dreh 40s linear infinite}
.hg-strahlen::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.35),transparent 30%)}
@keyframes dreh{to{transform:rotate(360deg)}}

/* Iso-Boxen */
.hg-boxen{overflow:hidden;background:var(--bg-2)}
.boxen-ebene{position:absolute;left:50%;top:50%;display:grid;grid-template-columns:repeat(22,38px);grid-auto-rows:26px;
  transform:translate(-50%,-50%) skewX(-48deg) skewY(14deg) scale(.9)}
.boxen-ebene i{border-right:1px solid var(--linie-2);border-bottom:1px solid var(--linie-2);transition:background-color 1.4s}

/* Muster */
.muster-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.muster-raster i{aspect-ratio:1;border-radius:16px;box-shadow:inset 0 0 0 1px var(--linie-2)}
.mu-streifen{background:repeating-linear-gradient(45deg,var(--akzent) 0 8px,transparent 8px 20px),var(--bg-3)}
.mu-karo{background-color:var(--bg-3);background-image:linear-gradient(var(--a2) 2px,transparent 2px),linear-gradient(90deg,var(--a2) 2px,transparent 2px);background-size:18px 18px;background-position:-1px -1px}
.mu-punkte{background-color:var(--bg-3);background-image:radial-gradient(var(--a3) 3px,transparent 3.5px);background-size:16px 16px}
.mu-zickzack{background:linear-gradient(135deg,var(--a4) 25%,transparent 25%) -10px 0/20px 20px,linear-gradient(225deg,var(--a4) 25%,transparent 25%) -10px 0/20px 20px,linear-gradient(315deg,var(--a4) 25%,transparent 25%) 0 0/20px 20px,linear-gradient(45deg,var(--a4) 25%,var(--bg-3) 25%) 0 0/20px 20px}
.mu-wellen{background-color:var(--bg-3);background-image:radial-gradient(circle at 100% 50%,transparent 9px,var(--akzent) 10px,var(--akzent) 13px,transparent 14px),radial-gradient(circle at 0 50%,transparent 9px,var(--a2) 10px,var(--a2) 13px,transparent 14px);background-size:24px 24px;background-position:0 0,12px 12px}
.mu-schachbrett{background:conic-gradient(var(--text) 90deg,var(--bg-3) 90deg 180deg,var(--text) 180deg 270deg,var(--bg-3) 270deg) 0 0/24px 24px;opacity:.85}