/* AnimatedBackground layer only — safe to load on app + auth + errors
   Motion engine: Vanta WAVES (JS) + CSS polygon fallback
   Tokens fallback if styles.css not loaded */
:root {
  --wave-deep: #0b4f4a;
  --wave-mid: #115e59;
  --wave-lit: #0f766e;
}

.page-wave-bg,
.htms-animated-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 12% 8%, rgba(20, 184, 166, 0.35), transparent 58%),
    radial-gradient(900px 600px at 88% 72%, rgba(232, 163, 23, 0.12), transparent 55%),
    linear-gradient(165deg, var(--wave-deep) 0%, var(--wave-mid) 42%, var(--wave-lit) 72%, #0a3d3a 100%);
}

.htms-animated-bg--soft {
  background:
    radial-gradient(1100px 640px at 15% 10%, rgba(20, 184, 166, 0.28), transparent 58%),
    radial-gradient(800px 520px at 88% 78%, rgba(232, 163, 23, 0.08), transparent 55%),
    linear-gradient(165deg, #0c5550 0%, #0f6b64 45%, #12857c 78%, #0a4540 100%);
}

.htms-animated-bg--auth {
  background:
    radial-gradient(900px 520px at 15% 10%, rgba(20, 184, 166, 0.32), transparent 58%),
    radial-gradient(700px 480px at 90% 80%, rgba(232, 163, 23, 0.1), transparent 55%),
    linear-gradient(165deg, var(--wave-deep) 0%, var(--wave-mid) 42%, var(--wave-lit) 72%, #0a3d3a 100%);
}

.page-wave-bg::before,
.page-wave-bg::after,
.htms-animated-bg::before,
.htms-animated-bg::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  will-change: transform;
}

.page-wave-bg::before,
.htms-animated-bg::before {
  background:
    radial-gradient(ellipse 45% 35% at 20% 30%, rgba(45, 212, 191, 0.28), transparent 70%),
    radial-gradient(ellipse 40% 40% at 78% 20%, rgba(15, 118, 110, 0.35), transparent 65%),
    radial-gradient(ellipse 50% 45% at 60% 80%, rgba(20, 184, 166, 0.22), transparent 70%);
  clip-path: polygon(8% 12%, 32% 4%, 58% 14%, 86% 8%, 98% 34%, 88% 58%, 96% 82%, 68% 96%, 38% 88%, 12% 94%, 2% 68%, 10% 40%);
  animation: htmsWavePolyA 22s ease-in-out infinite alternate;
  opacity: 0.85;
}

.page-wave-bg::after,
.htms-animated-bg::after {
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.06) 0%, transparent 40%, rgba(20, 184, 166, 0.15) 100%);
  clip-path: polygon(0 40%, 22% 28%, 48% 38%, 70% 22%, 100% 36%, 100% 100%, 0 100%);
  animation: htmsWavePolyB 28s ease-in-out infinite alternate;
  opacity: 0.55;
  mix-blend-mode: soft-light;
}

@keyframes htmsWavePolyA {
  0% { transform: translate3d(-2%, 0, 0) scale(1) rotate(0deg); }
  100% { transform: translate3d(3%, 2%, 0) scale(1.06) rotate(4deg); }
}
@keyframes htmsWavePolyB {
  0% { transform: translate3d(2%, 1%, 0) scale(1.04) rotate(0deg); }
  100% { transform: translate3d(-3%, -2%, 0) scale(1) rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .page-wave-bg::before,
  .page-wave-bg::after,
  .htms-animated-bg::before,
  .htms-animated-bg::after {
    animation: none;
  }
}

.wave-active .page-wave-bg::before,
.wave-active .page-wave-bg::after,
.wave-active .htms-animated-bg::before,
.wave-active .htms-animated-bg::after {
  opacity: 0;
  animation: none;
}

.page-wave-bg canvas,
.htms-animated-bg canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

body.is-wave-page,
body.htms-has-animated-bg {
  background: transparent !important;
}