/* =========================================================================
   RETRO 3.0 — procedural ANIMATED clan backgrounds
   Pure CSS (transform/opacity/filter only). One of 8 themes per clan,
   picked deterministically from the clan id, tinted with --h (hue taken
   from the clan's own logo). Square everywhere.
   ========================================================================= */
.cbn{position:absolute;inset:0;overflow:hidden;background:#040406;isolation:isolate}
.cbn .l{position:absolute;will-change:transform,opacity;pointer-events:none}
.cbn.paused .l{animation-play-state:paused !important}
.cbn::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 30%,transparent 30%,rgba(0,0,0,.55) 100%)}

/* ---- 1. AURORA — drifting light blobs ---- */
.th-aurora .l{width:75%;height:170%;top:-35%;filter:blur(30px);opacity:.6;
  background:radial-gradient(circle at 50% 50%,hsl(var(--h) 92% 56%),transparent 66%)}
.th-aurora .l1{left:-14%;animation:auA 9s ease-in-out infinite alternate}
.th-aurora .l2{left:30%;opacity:.5;background:radial-gradient(circle at 50% 50%,hsl(calc(var(--h) + 48) 92% 58%),transparent 66%);
  animation:auB 12s ease-in-out infinite alternate}
.th-aurora .l3{left:62%;opacity:.45;background:radial-gradient(circle at 50% 50%,hsl(calc(var(--h) - 42) 92% 60%),transparent 66%);
  animation:auC 15s ease-in-out infinite alternate}
@keyframes auA{to{transform:translate(30%,10%) scale(1.28)}}
@keyframes auB{to{transform:translate(-26%,-8%) scale(1.18)}}
@keyframes auC{to{transform:translate(18%,14%) scale(1.34)}}

/* ---- 2. BEAMS — rotating conic light shafts ---- */
.th-beams .l1{inset:-60%;background:conic-gradient(from 0deg,transparent 0 8%,hsl(var(--h) 95% 60%/.55) 10%,transparent 14%,
  transparent 30%,hsl(var(--h) 95% 60%/.4) 34%,transparent 38%,transparent 60%,hsl(calc(var(--h) + 40) 95% 62%/.5) 64%,transparent 68%);
  filter:blur(9px);animation:spin 22s linear infinite}
.th-beams .l2{inset:-40%;background:conic-gradient(from 180deg,transparent 0 20%,hsl(calc(var(--h) - 30) 95% 58%/.35) 24%,transparent 28%);
  filter:blur(16px);animation:spinR 34s linear infinite}
.th-beams .l3{inset:0;background:radial-gradient(circle at 50% 100%,hsl(var(--h) 90% 55%/.4),transparent 62%)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinR{to{transform:rotate(-360deg)}}

/* ---- 3. RAIN — falling light streaks ---- */
.th-rain{background:linear-gradient(180deg,#05050a,hsl(var(--h) 60% 8%))}
.th-rain .l{inset:-100% 0;opacity:.5}
.th-rain .l1{background:repeating-linear-gradient(180deg,transparent 0 26px,hsl(var(--h) 95% 65%/.6) 26px 44px,transparent 44px 90px);
  animation:fall 2.6s linear infinite;filter:blur(.4px)}
.th-rain .l2{background:repeating-linear-gradient(180deg,transparent 0 44px,hsl(calc(var(--h) + 40) 95% 68%/.4) 44px 58px,transparent 58px 130px);
  animation:fall 4.2s linear infinite;opacity:.35;filter:blur(1.2px)}
.th-rain .l3{inset:0;background:radial-gradient(ellipse 90% 60% at 50% 110%,hsl(var(--h) 95% 55%/.55),transparent 70%)}
@keyframes fall{to{transform:translateY(50%)}}

/* ---- 4. GRID — perspective grid running to the horizon ---- */
.th-grid{background:linear-gradient(180deg,#04040a 0%,hsl(var(--h) 65% 9%) 100%);perspective:220px}
.th-grid .l1{left:-60%;right:-60%;bottom:-35%;height:170%;transform-origin:50% 100%;
  transform:rotateX(72deg);
  background-image:linear-gradient(hsl(var(--h) 95% 62%/.55) 1px,transparent 1px),
                   linear-gradient(90deg,hsl(var(--h) 95% 62%/.4) 1px,transparent 1px);
  background-size:56px 56px;animation:gridrun 2.6s linear infinite}
.th-grid .l2{inset:0;background:linear-gradient(180deg,#04040a 24%,transparent 62%)}
.th-grid .l3{left:0;right:0;top:34%;height:2px;background:hsl(var(--h) 95% 70%);filter:blur(5px);opacity:.85;
  animation:hzn 3.4s ease-in-out infinite alternate}
@keyframes gridrun{to{background-position:0 56px}}
@keyframes hzn{to{opacity:.35;transform:scaleX(.8)}}

/* ---- 5. RINGS — expanding concentric pulses ---- */
.th-rings{background:radial-gradient(circle at 50% 60%,hsl(var(--h) 70% 12%),#040407 72%)}
.th-rings .l{left:50%;top:60%;width:46%;aspect-ratio:1;margin:-23% 0 0 -23%;
  border:2px solid hsl(var(--h) 95% 62%/.75);opacity:0}
.th-rings .l1{animation:ring 4.2s ease-out infinite}
.th-rings .l2{animation:ring 4.2s ease-out infinite 1.4s;border-color:hsl(calc(var(--h) + 40) 95% 65%/.7)}
.th-rings .l3{animation:ring 4.2s ease-out infinite 2.8s;border-color:hsl(calc(var(--h) - 35) 95% 65%/.7)}
@keyframes ring{0%{transform:scale(.25);opacity:0}18%{opacity:.9}100%{transform:scale(2.6);opacity:0}}

/* ---- 6. SWEEP — diagonal bars sliding across ---- */
.th-sweep{background:linear-gradient(135deg,#05050a,hsl(var(--h) 62% 11%))}
.th-sweep .l{inset:-40% -60%}
.th-sweep .l1{background:repeating-linear-gradient(112deg,transparent 0 58px,hsl(var(--h) 95% 62%/.42) 58px 74px,transparent 74px 150px);
  animation:swp 7s linear infinite;filter:blur(1px)}
.th-sweep .l2{background:repeating-linear-gradient(112deg,transparent 0 120px,hsl(calc(var(--h) + 45) 95% 66%/.3) 120px 132px,transparent 132px 300px);
  animation:swp 11s linear infinite reverse;filter:blur(3px)}
.th-sweep .l3{inset:0;background:radial-gradient(ellipse 80% 70% at 20% 20%,hsl(var(--h) 95% 58%/.45),transparent 68%)}
@keyframes swp{to{transform:translateX(150px)}}

/* ---- 7. ORBIT — counter-rotating rings around a core ---- */
.th-orbit{background:radial-gradient(circle at 50% 55%,hsl(var(--h) 68% 13%),#040407 74%)}
.th-orbit .l1{left:50%;top:55%;width:56%;aspect-ratio:1;margin:-28% 0 0 -28%;
  border:2px solid transparent;border-top-color:hsl(var(--h) 95% 64%);border-right-color:hsl(var(--h) 95% 64%/.35);
  animation:spin 6s linear infinite;filter:drop-shadow(0 0 10px hsl(var(--h) 95% 60%/.8))}
.th-orbit .l2{left:50%;top:55%;width:34%;aspect-ratio:1;margin:-17% 0 0 -17%;
  border:2px solid transparent;border-bottom-color:hsl(calc(var(--h) + 50) 95% 66%);
  animation:spinR 4s linear infinite}
.th-orbit .l3{left:50%;top:55%;width:16%;aspect-ratio:1;margin:-8% 0 0 -8%;
  background:radial-gradient(circle,hsl(var(--h) 98% 70%),transparent 68%);filter:blur(6px);
  animation:corepulse 2.8s ease-in-out infinite alternate}
@keyframes corepulse{to{transform:scale(1.6);opacity:.55}}

/* ---- 8. PLASMA — slow counter-rotating gradients ---- */
.th-plasma{background:#040407}
.th-plasma .l1{inset:-45%;background:conic-gradient(from 0deg,hsl(var(--h) 92% 55%/.6),transparent 30%,
  hsl(calc(var(--h) + 60) 92% 58%/.55) 55%,transparent 80%,hsl(var(--h) 92% 55%/.6));
  filter:blur(26px);animation:spin 26s linear infinite}
.th-plasma .l2{inset:-30%;background:conic-gradient(from 140deg,transparent,hsl(calc(var(--h) - 50) 92% 60%/.5) 40%,transparent 70%);
  filter:blur(34px);animation:spinR 19s linear infinite;mix-blend-mode:screen}
.th-plasma .l3{inset:0;background:radial-gradient(ellipse 70% 60% at 50% 120%,hsl(var(--h) 95% 55%/.5),transparent 70%)}

/* hover: everything breathes a little faster */
.cc:hover .cbn .l,.cf:hover .cbn .l{animation-duration:var(--fast,inherit)}