/* ========================================
   MASTER MAIL - CYBER ANIMATED BACKGROUND
   Pure-layer animated cyberpunk backdrop (non-invasive)
   ======================================== */

/* ---- Fixed backdrop layers (behind all content) ---- */
.cyber-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
}

/* subtle ambient moving gradient */
.cyber-bg::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(130, 207, 226, 0.14), transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(23, 114, 216, 0.12), transparent 55%),
    radial-gradient(ellipse at 60% 80%, rgba(167, 85, 215, 0.10), transparent 55%);
  background-size: 150% 150%;
  filter: blur(10px);
  animation: cyberAmbient 26s ease-in-out infinite alternate;
}

/* perspective cyber grid floor */
.cyber-grid {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: 220%;
  height: 65%;
  transform: translateX(-50%) perspective(600px) rotateX(72deg);
  transform-origin: bottom;
  background-image:
    linear-gradient(rgba(130, 207, 226, 0.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 207, 226, 0.45) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,1) 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,1) 30%, transparent 75%);
  animation: cyberGridMove 18s linear infinite;
}

/* floating data particles */
.cyber-particles {
  position: absolute;
  inset: 0;
}

.cyber-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(130, 207, 226, 0.9);
  box-shadow: 0 0 10px rgba(130, 207, 226, 0.9);
  animation: floatParticle linear infinite;
  opacity: 0;
}

/* sweeping light beams */
.cyber-beams {
  position: absolute;
  inset: 0;
}

.cyber-beam {
  position: absolute;
  top: -20%;
  height: 140%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(130, 207, 226, 0.8), transparent);
  filter: blur(0.5px);
  animation: sweepBeam 7s ease-in-out infinite;
  opacity: 0;
}

/* horizontal scanline travelling vertically */
.cyber-scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(130, 207, 226, 0.35), transparent);
  animation: scanMove 9s linear infinite;
  opacity: 0;
}

/* corner brackets - techy HUD decoration */
.cyber-corner {
  position: absolute;
  width: 60px;
  height: 60px;
  border: 2px solid rgba(130, 207, 226, 0.35);
  border-radius: 4px;
  animation: cornerPulse 4s ease-in-out infinite;
  opacity: 0.6;
}
.cyber-corner.tl { top: 24px; left: 24px; border-right: none; border-bottom: none; }
.cyber-corner.tr { top: 24px; right: 24px; border-left: none; border-bottom: none; }
.cyber-corner.bl { bottom: 24px; left: 24px; border-right: none; border-top: none; }
.cyber-corner.br { bottom: 24px; right: 24px; border-left: none; border-top: none; }

/* ---- Animations ---- */
@keyframes cyberAmbient {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(4%, 3%) scale(1.15); }
}

@keyframes cyberGridMove {
  0%   { background-position: 0 0; }
  100% { background-position: 0 64px; }
}

@keyframes floatParticle {
  0%   { transform: translateY(100vh) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-110vh) translateX(30px); opacity: 0; }
}

@keyframes sweepBeam {
  0%   { transform: translateX(-10vw) rotate(15deg); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 0.9; }
  100% { transform: translateX(110vw) rotate(15deg); opacity: 0; }
}

@keyframes scanMove {
  0%   { top: -5%; opacity: 0; }
  8%   { opacity: 0.8; }
  92%  { opacity: 0.8; }
  100% { top: 105%; opacity: 0; }
}

@keyframes cornerPulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.85; }
}

/* ---- Theme adaptations ---- */
[data-theme="dark"] .cyber-grid {
  background-image:
    linear-gradient(rgba(130, 207, 226, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(130, 207, 226, 0.22) 1px, transparent 1px);
}

/* Ensure main content sits above the background */
.page-wrapper,
.dashboard,
main,
.admin-dashboard,
.admin-login {
  position: relative;
  z-index: 1;
}