/* Placeholder global styles to satisfy index.css reference */
body { margin: 0; }

/* Burner note: password gate */
@keyframes wgPasswordSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes wgPasswordHue {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

.wg-password-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
}

.wg-password-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: conic-gradient(from 180deg, #ff8a00, #ff00ff, #00d4ff, #00ff88, #ff8a00);
  animation: wgPasswordSpin 7s linear infinite, wgPasswordHue 10s linear infinite;
}

.wg-password-card::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.92);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 30px 90px rgba(0, 0, 0, 0.75);
}

.wg-password-card-content {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
}

/* Burner note: optional animations */
@keyframes wgFlicker {
  0%,
  18%,
  22%,
  62%,
  64%,
  70%,
  100% {
    opacity: 1;
  }
  19%,
  21%,
  63%,
  65%,
  69% {
    opacity: 0.78;
  }
}

.animate-flicker {
  animation: wgFlicker 3s infinite;
}

@keyframes wgGlitch {
  0% {
    transform: translate3d(0, 0, 0);
    filter: hue-rotate(0deg);
  }
  20% {
    transform: translate3d(-1px, 1px, 0);
  }
  40% {
    transform: translate3d(1px, -1px, 0);
  }
  60% {
    transform: translate3d(-1px, 0, 0);
  }
  80% {
    transform: translate3d(1px, 1px, 0);
    filter: hue-rotate(10deg);
  }
  100% {
    transform: translate3d(0, 0, 0);
    filter: hue-rotate(0deg);
  }
}

.animate-glitch {
  animation: wgGlitch 1.6s infinite linear;
}

@media (prefers-reduced-motion: reduce) {
  .wg-password-card::before {
    animation: none;
  }

  .animate-flicker,
  .animate-glitch {
    animation: none !important;
  }
}