/* DJ Giddy ULTIMATE Animated Background (All-In-One) */
:root{
  --dj-opacity: 0.18;
  --dj-glowB: rgba(255, 180, 40, .40);
  --dj-glowC: rgba(124, 246, 255, .25);
}
body{position:relative;overflow-x:hidden;}
body::after{
  content:"";position:fixed;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 900px at 18% 22%, rgba(255, 40, 40, .16), transparent 60%),
    radial-gradient(900px 900px at 82% 18%, rgba(255, 190, 50, .14), transparent 60%),
    radial-gradient(900px 900px at 55% 85%, rgba(124, 246, 255, .12), transparent 60%),
    radial-gradient(700px 700px at 75% 70%, rgba(255, 77, 109, .10), transparent 60%);
  filter: blur(42px);
  animation: djHaze 12s ease-in-out infinite alternate;
}
body::before{
  content:"";position:fixed;top:50%;left:50%;
  width:min(860px, 92vw);height:min(860px, 92vw);
  background:url("/assets/logo.png") center/contain no-repeat;
  transform:translate(-50%, -50%);
  opacity: var(--dj-opacity);
  pointer-events:none;z-index:0;
  filter: drop-shadow(0 0 18px var(--dj-glowB)) drop-shadow(0 0 34px var(--dj-glowC));
  animation: djLogoPulse 3.1s ease-in-out infinite;
}
.nav, main, .container{position:relative;z-index:5;}
html::after{
  content:"";position:fixed;top:50%;left:50%;
  width:min(720px, 82vw);height:min(720px, 82vw);
  transform:translate(-50%,-50%);
  pointer-events:none;z-index:1;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.0) 0 28%,
      rgba(255,255,255,.06) 28.2% 28.6%,
      rgba(0,0,0,.0) 29% 33%,
      rgba(255,255,255,.04) 33.2% 33.6%,
      rgba(0,0,0,.0) 34% 39%,
      rgba(255,255,255,.035) 39.2% 39.7%,
      rgba(0,0,0,.0) 40% 65%,
      rgba(255,255,255,.03) 65.2% 65.6%,
      rgba(0,0,0,.0) 66% 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 180, 40, .10) 0 10%, transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.70) 0 100%);
  border-radius:999px;opacity:.16;filter: blur(.1px);
  animation: djVinylSpin 10s linear infinite;
}
main::before{
  content:"";position:fixed;left:0;right:0;bottom:0;height:170px;
  pointer-events:none;z-index:2;
  background:
    linear-gradient(to top, rgba(255,255,255,.55), transparent 70%),
    repeating-linear-gradient(to right, rgba(255, 60, 0, .65) 0 10px, transparent 10px 18px);
  -webkit-mask-image: linear-gradient(to top, #000 0 65%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0 65%, transparent 100%);
  opacity:.12;filter: blur(.3px);
  animation: djEQ 1.05s steps(12) infinite;
}
main::after{
  content:"";position:fixed;top:50%;left:50%;
  width:min(1040px, 96vw);height:min(480px, 60vh);
  transform:translate(-50%,-50%);
  pointer-events:none;z-index:2;opacity:.12;
  background:
    radial-gradient(circle at 18% 45%, rgba(255,180,40,.55) 0 7%, rgba(0,0,0,0) 8% 100%),
    radial-gradient(circle at 18% 45%, rgba(255,255,255,.75) 0 14%, rgba(0,0,0,0) 15% 100%),
    radial-gradient(circle at 18% 65%, rgba(255,60,0,.55) 0 7%, rgba(0,0,0,0) 8% 100%),
    radial-gradient(circle at 18% 65%, rgba(255,255,255,.75) 0 14%, rgba(0,0,0,0) 15% 100%),
    radial-gradient(circle at 82% 45%, rgba(255,180,40,.55) 0 7%, rgba(0,0,0,0) 8% 100%),
    radial-gradient(circle at 82% 45%, rgba(255,255,255,.75) 0 14%, rgba(0,0,0,0) 15% 100%),
    radial-gradient(circle at 82% 65%, rgba(255,60,0,.55) 0 7%, rgba(0,0,0,0) 8% 100%),
    radial-gradient(circle at 82% 65%, rgba(255,255,255,.75) 0 14%, rgba(0,0,0,0) 15% 100%);
  filter: blur(.4px);
  animation: djSpeakers 1.1s ease-in-out infinite;
}
@keyframes djLogoPulse{
  0%{transform: translate(-50%, -50%) scale(.985);opacity:.07;}
  50%{transform: translate(-50%, -50%) scale(1.02);opacity:.14;}
  100%{transform: translate(-50%, -50%) scale(.992);opacity:.10;}
}
@keyframes djHaze{
  0%{ transform: translate3d(-2%, -1%, 0) scale(1.02); opacity:.85; }
  100%{ transform: translate3d(2%, 1%, 0) scale(1.06); opacity:1; }
}
@keyframes djVinylSpin{to{ transform: translate(-50%,-50%) rotate(360deg); }}
@keyframes djEQ{0%{opacity:.18;}50%{opacity:.28;}100%{opacity:.20;}}
@keyframes djSpeakers{0%{transform:translate(-50%,-50%) scale(.985);opacity:.16;}50%{transform:translate(-50%,-50%) scale(1.02);opacity:.26;}100%{transform:translate(-50%,-50%) scale(.992);opacity:.18;}}
@media (prefers-reduced-motion: reduce){
  body::before, body::after, html::after, main::before, main::after{animation:none !important;}
}