/* Animated hero gradient. Active only when <body data-gradient="green|retell"> is set.
   The canvas and grain are added by js/hero-gradient.js. The backgrounds below are the static
   fallback, shown before the first frame and if WebGL is unavailable. */

html body[data-gradient] .hero-wash::before { display: none; }
/* Darker behind the whole text column so every line stays readable wherever the colour drifts. */
html body[data-gradient] .hero-wash::after {
  background:
    linear-gradient(to bottom, rgb(2 8 6 / .28), rgb(2 8 6 / 0) 20%),
    radial-gradient(ellipse 64% 58% at 50% 56%, rgb(2 8 6 / .36), rgb(2 8 6 / .14) 62%, transparent 86%);
}
html body[data-gradient] .hero .micro { color: rgb(242 247 243 / .94); }
html body[data-gradient] .header nav a { color: rgb(242 247 243 / .92); }
html body[data-gradient="green"] .hero-wash {
  background:
    radial-gradient(60% 70% at 10% 8%, #138054, transparent 62%),
    radial-gradient(50% 55% at 52% 96%, #2f9e6c, transparent 66%),
    radial-gradient(34% 42% at 4% 100%, #c3d68f, transparent 70%),
    #03130c !important;
}
html body[data-gradient="retell"] .hero-wash {
  background:
    radial-gradient(60% 70% at 8% 14%, #1e80e4, transparent 62%),
    radial-gradient(55% 55% at 52% 30%, #0b46bd, transparent 66%),
    radial-gradient(50% 50% at 52% 94%, #1f8a7c, transparent 66%),
    radial-gradient(34% 42% at 5% 100%, #cd86ba, transparent 70%),
    #020a36 !important;
}

.hero-gradient {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.2s ease;
}
.hero-gradient[data-ready] { opacity: 1; }
.hero-grain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .1; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .hero-gradient { transition: none; } }