/* Signal-RGB-style atmospheric ambient lighting */

:root {
  --bg-deep: #0b1020;
  --bg-panel: #121a2e;
  --glow-cyan: #00b4ff;
  --glow-purple: #7c3aed;
  --glow-magenta: #e040fb;
  --glow-blue: #3b82f6;
}

/* Matte cinematic background + noise */
body.landing {
  background-color: #020408;
  background-image: none;
}

body.landing::before {
  display: none;
}

#hero::after {
  display: none;
}

#intro-banner > .relative,
#intro-banner > .lx-hero__inner {
  position: relative;
  z-index: 2;
}

/* Invisible showcase — no container visuals */
.media-halo {
  position: relative;
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.media-halo__float {
  position: relative;
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background: transparent;
  border: none;
  box-shadow: none;
}

.showcase-rig .media-halo__float {
  animation: float-setup 5.5s ease-in-out infinite;
}

@keyframes float-setup {
  0%, 100% { transform: translateY(0) translateZ(0); }
  50% { transform: translateY(-12px) translateZ(0); }
}

/* Stacked gradient layers — absolute, behind image (z-index 0), no box-shadow */
.aura-halo {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 0;
  width: 150%;
  height: 135%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
}

.media-halo--monitor .aura-halo {
  top: 44%;
  width: 130%;
  height: 120%;
}

/* Shared layer base */
.aura-layer {
  position: absolute;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 50%;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
  will-change: opacity;
}

/* 1 — Wide depth wash (fades into #0B1020) */
.aura-layer--depth {
  inset: -28% -22%;
  background: radial-gradient(
    ellipse 95% 80% at 50% 48%,
    rgba(60, 100, 200, 0.12) 0%,
    rgba(110, 0, 255, 0.06) 35%,
    transparent 68%
  );
  filter: blur(200px);
  opacity: 0.4;
}

/* 2 — Large blue radial underneath the PC */
.aura-layer--blue {
  width: 115%;
  height: 52%;
  left: 50%;
  bottom: -4%;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse 92% 88% at 50% 100%,
    rgba(0, 160, 255, 0.55) 0%,
    rgba(0, 120, 230, 0.28) 30%,
    rgba(0, 80, 200, 0.1) 52%,
    transparent 76%
  );
  filter: blur(180px);
  opacity: 0.58;
}

/* 3 — Purple radial behind center (PC case) */
.aura-layer--purple {
  width: 68%;
  height: 62%;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse 100% 95% at 50% 50%,
    rgba(124, 58, 237, 0.5) 0%,
    rgba(110, 0, 255, 0.28) 28%,
    rgba(80, 40, 180, 0.1) 48%,
    transparent 74%
  );
  filter: blur(160px);
  opacity: 0.62;
}

/* 4 — Pink glow on the side */
.aura-layer--pink {
  width: 62%;
  height: 68%;
  left: -12%;
  top: 30%;
  background: radial-gradient(
    ellipse 80% 75% at 85% 50%,
    rgba(255, 0, 170, 0.48) 0%,
    rgba(230, 80, 200, 0.2) 32%,
    rgba(180, 0, 255, 0.08) 50%,
    transparent 76%
  );
  filter: blur(150px);
  opacity: 0.48;
}

/* 5 — Bright center bloom (hottest point behind setup) */
.aura-layer--center {
  width: 48%;
  height: 44%;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(200, 230, 255, 0.35) 0%,
    rgba(140, 200, 255, 0.15) 35%,
    transparent 68%
  );
  filter: blur(120px);
  opacity: 0.55;
}

/* Monitor: shift purple/center to screen */
.media-halo--monitor .aura-layer--purple {
  top: 32%;
  width: 58%;
  height: 52%;
}

.media-halo--monitor .aura-layer--center {
  top: 30%;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(0, 220, 255, 0.4) 0%,
    rgba(110, 0, 255, 0.18) 40%,
    transparent 70%
  );
}

.media-halo--monitor .aura-layer--pink {
  left: auto;
  right: -10%;
  background: radial-gradient(
    ellipse 80% 75% at 15% 50%,
    rgba(255, 0, 170, 0.4) 0%,
    transparent 72%
  );
}

/* Floor reflection — gradient only, no box-shadow */
.floor-mirror {
  position: absolute;
  left: 50%;
  bottom: 2%;
  z-index: 0;
  width: 80%;
  height: 30%;
  transform: translateX(-50%) scaleY(-0.36);
  transform-origin: center top;
  pointer-events: none;
  border: none;
  box-shadow: none;
  background: radial-gradient(
    ellipse 100% 55% at 50% 0%,
    rgba(0, 180, 255, 0.12) 0%,
    rgba(110, 0, 255, 0.06) 40%,
    transparent 78%
  );
  filter: blur(140px);
  mix-blend-mode: screen;
  opacity: 0.38;
}

/* Image sits above all gradient layers */
.media-halo__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border: none;
  outline: none;
  box-shadow: none;
  filter: none;
  background: transparent;
}

/* Section atmosphere */
.rgb-section__atmo::before {
  background: radial-gradient(circle, rgba(124, 58, 237, 0.07), transparent 72%);
  filter: blur(100px);
  mix-blend-mode: screen;
}

.rgb-section__atmo::after {
  background: radial-gradient(circle, rgba(0, 180, 255, 0.06), transparent 70%);
  filter: blur(110px);
  mix-blend-mode: screen;
}

/* Global hero blobs — softer */
.aura-blob {
  filter: blur(120px);
  opacity: 0.28;
  mix-blend-mode: screen;
}

body.landing .hero-mesh {
  opacity: 0.18;
  mix-blend-mode: screen;
}

#pointer-aura {
  mix-blend-mode: screen;
  opacity: 0.85;
}

.header-glass {
  background: rgba(11, 16, 32, 0.82);
  box-shadow: none;
}

.ember-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.ember-field span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(180, 210, 255, 0.35);
  box-shadow: none;
  animation: global-particle 26s linear infinite;
  animation-delay: calc(var(--i) * -1.7s);
}

@keyframes global-particle {
  0% { opacity: 0; transform: translateY(100vh); }
  6% { opacity: 0.3; }
  94% { opacity: 0.12; }
  100% { opacity: 0; transform: translateY(-6vh); }
}

@media (prefers-reduced-motion: reduce) {
  .aura-layer,
  .floor-mirror,
  .rgb-section__atmo::before,
  .rgb-section__atmo::after,
  .ember-field span,
  .showcase-rig .media-halo__float {
    animation: none !important;
  }
}