/* AQ_DJHOUSE_3D_BANNER_V1_START */
.aq-djhouse-3d-host{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  min-height:112px !important;
  border-radius:24px !important;
  transform-style:preserve-3d !important;
  perspective:1000px !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(55,255,255,.30), transparent 12%),
    radial-gradient(circle at 18% 22%, rgba(255,0,150,.28), transparent 32%),
    radial-gradient(circle at 84% 26%, rgba(0,190,255,.24), transparent 34%),
    linear-gradient(105deg, #190015 0%, #291255 44%, #041b2c 100%) !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.46),
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 48px rgba(0,255,255,.12) !important;
}

.aq-djhouse-3d-stage{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  transform-style:preserve-3d;
  transform:rotateX(var(--aq3d-rx,0deg)) rotateY(var(--aq3d-ry,0deg)) translateZ(0);
  transition:transform .18s ease-out;
}

.aq-djhouse-3d-stage::before{
  content:"";
  position:absolute;
  inset:-45%;
  background:
    conic-gradient(from 140deg at 50% 50%,
      transparent 0deg,
      rgba(0,255,255,.12) 42deg,
      transparent 92deg,
      rgba(255,0,160,.16) 160deg,
      transparent 232deg,
      rgba(0,255,255,.12) 292deg,
      transparent 360deg);
  animation:aq3dSpin 13s linear infinite;
  filter:blur(8px);
}

.aq-djhouse-3d-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(0,255,255,.22) 48%, rgba(255,0,160,.20) 53%, transparent 100%);
  transform:translateX(-135%);
  mix-blend-mode:screen;
  animation:aq3dSweep 4.4s ease-in-out infinite;
}

.aq3d-grid{
  position:absolute;
  left:-12%;
  right:-12%;
  bottom:-48%;
  height:92%;
  opacity:.36;
  background:
    linear-gradient(rgba(0,255,255,.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,160,.18) 1px, transparent 1px);
  background-size:42px 24px;
  transform:rotateX(62deg) translateZ(-70px);
  animation:aq3dGrid 2.4s linear infinite;
  mask-image:linear-gradient(to top, black 0%, transparent 78%);
}

.aq3d-horizon{
  position:absolute;
  left:8%;
  right:8%;
  top:55%;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(0,255,255,.9), rgba(255,0,150,.82), transparent);
  box-shadow:0 0 24px rgba(0,255,255,.72), 0 0 38px rgba(255,0,150,.48);
  animation:aq3dHorizon 2.6s ease-in-out infinite alternate;
}

.aq3d-orb{
  position:absolute;
  left:50%;
  top:50%;
  width:118px;
  height:118px;
  transform:translate(-50%,-50%) translateZ(70px);
  border-radius:50%;
  background:
    radial-gradient(circle at 48% 45%, rgba(120,255,255,.96) 0 12%, rgba(0,255,255,.26) 13% 28%, transparent 30%),
    repeating-radial-gradient(circle, rgba(0,255,255,.43) 0 2px, transparent 3px 18px);
  box-shadow:
    0 0 24px rgba(0,255,255,.88),
    0 0 58px rgba(0,255,255,.42),
    inset 0 0 24px rgba(255,0,180,.30);
  animation:aq3dOrb 2.8s ease-in-out infinite;
}

.aq3d-orb::before,
.aq3d-orb::after{
  content:"";
  position:absolute;
  inset:-22px;
  border-radius:50%;
  border:2px solid rgba(0,255,255,.35);
  animation:aq3dRing 3.2s linear infinite;
}

.aq3d-orb::after{
  inset:-38px;
  border-color:rgba(255,0,160,.30);
  animation-duration:4.8s;
  animation-direction:reverse;
}

.aq3d-bars{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:0 9%;
  transform:translateZ(34px);
}

.aq3d-bar{
  width:18px;
  height:42%;
  border-radius:999px;
  background:linear-gradient(to top, rgba(255,0,145,.85), rgba(0,255,255,.92));
  box-shadow:0 0 20px rgba(0,255,255,.44), 0 0 18px rgba(255,0,145,.32);
  opacity:.80;
  transform-origin:bottom;
  animation:aq3dBar 1.2s ease-in-out infinite;
}

.aq3d-bar:nth-child(2n){ animation-duration:.92s; height:66%; }
.aq3d-bar:nth-child(3n){ animation-duration:1.48s; height:82%; }
.aq3d-bar:nth-child(4n){ animation-duration:1.08s; height:52%; }

.aq3d-laser{
  position:absolute;
  top:47%;
  width:32%;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(0,255,255,.88), transparent);
  box-shadow:0 0 18px rgba(0,255,255,.70);
  transform-origin:center;
  animation:aq3dLaser 3.4s ease-in-out infinite alternate;
}

.aq3d-laser.l1{ left:12%; transform:rotate(10deg); }
.aq3d-laser.l2{ right:12%; transform:rotate(-10deg); background:linear-gradient(90deg, transparent, rgba(255,0,155,.86), transparent); box-shadow:0 0 18px rgba(255,0,155,.62); animation-delay:-1.2s; }

.aq3d-title{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) translateZ(92px);
  text-align:center;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:
    0 0 10px rgba(0,255,255,.95),
    0 0 24px rgba(255,0,160,.62),
    0 3px 12px rgba(0,0,0,.85);
  font:900 clamp(18px, 2.6vw, 34px)/1.05 system-ui,-apple-system,Segoe UI,Arial;
  white-space:nowrap;
  animation:aq3dTitle 2.4s ease-in-out infinite alternate;
}

.aq3d-title small{
  display:block;
  margin-top:6px;
  color:#00f5ff;
  font-size:.38em;
  letter-spacing:.18em;
}

.aq-djhouse-3d-host.is-playing .aq3d-orb{
  animation-duration:1.05s;
}

.aq-djhouse-3d-host.is-playing .aq3d-bar{
  animation-duration:.55s;
}

@keyframes aq3dSpin{ to{ transform:rotate(360deg); } }
@keyframes aq3dSweep{ 0%,38%{ transform:translateX(-135%); } 72%,100%{ transform:translateX(135%); } }
@keyframes aq3dGrid{ from{ background-position:0 0,0 0; } to{ background-position:0 24px,42px 0; } }
@keyframes aq3dHorizon{ from{ opacity:.55; transform:scaleX(.86); } to{ opacity:1; transform:scaleX(1.05); } }
@keyframes aq3dOrb{ 0%,100%{ transform:translate(-50%,-50%) translateZ(70px) scale(.96); } 50%{ transform:translate(-50%,-50%) translateZ(85px) scale(1.08); } }
@keyframes aq3dRing{ to{ transform:rotate(360deg); } }
@keyframes aq3dBar{ 0%,100%{ transform:scaleY(.48); opacity:.55; } 50%{ transform:scaleY(1.12); opacity:1; } }
@keyframes aq3dLaser{ from{ opacity:.35; filter:blur(.2px); } to{ opacity:1; filter:blur(1.1px); } }
@keyframes aq3dTitle{ from{ filter:brightness(.92); } to{ filter:brightness(1.18); } }

@media (max-width: 768px){
  .aq-djhouse-3d-host{
    min-height:86px !important;
    border-radius:18px !important;
  }
  .aq3d-orb{
    width:82px;
    height:82px;
  }
  .aq3d-bar{
    width:10px;
  }
  .aq3d-title{
    font-size:18px;
  }
  .aq3d-title small{
    font-size:9px;
  }
}
/* AQ_DJHOUSE_3D_BANNER_V1_END */