/* Animated Gradient Background (AGB) – core styles */
:root {
  --agb-angle: -45deg;
  --agb-colors: #6366F1,#EC4899,#8B5CF6,#06B6D4,#10B981;
  --agb-duration: 15s;
}

.agb-wrapper {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

.agb-layer {
  position: absolute;
  inset: 0;
}

.agb-gradient {
  background: linear-gradient(var(--agb-angle), var(--agb-colors));
  background-size: 400% 400%;
  animation: agb-gradient var(--agb-duration) ease infinite;
}

@keyframes agb-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* optional subtle overlay for contrast */
.agb-overlay {
  background: radial-gradient(1200px 800px at 50% 30%, rgba(255,255,255,0.12), transparent 60%),
              radial-gradient(1000px 600px at 20% 80%, rgba(255,255,255,0.10), transparent 55%),
              linear-gradient(0deg, rgba(0,0,0,0.10), rgba(0,0,0,0.10));
  pointer-events: none;
  mix-blend-mode: soft-light;
}

/* content centering */
.agb-center {
  position: relative;
  z-index: 3;
  height: 100%;
  min-height: inherit;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  color: #fff;
}

.agb-content { max-width: 900px; }

/* glass option */
.agb-glass {
  backdrop-filter: blur(20px);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 1.25rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 2rem;
}

.agb-shapes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.agb-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  animation: agb-float var(--dur, 8s) ease-in-out infinite;
  filter: blur(var(--blur, 0px));
}

@keyframes agb-float {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(var(--dx, 0px), var(--dy, -25px), 0) rotate(180deg); }
}

/* Utility: make page body fill height when used alone on a page */
html, body { height: 100%; }
