/* Global brand atmosphere + section tone system */

body {
  background: var(--tone-void);
  background-image:
    radial-gradient(ellipse 80% 50% at 10% -10%, color-mix(in srgb, var(--brand-blue) 12%, transparent), transparent 50%),
    radial-gradient(ellipse 60% 40% at 95% 20%, color-mix(in srgb, var(--brand-mint) 8%, transparent), transparent 45%),
    radial-gradient(ellipse 50% 30% at 50% 100%, color-mix(in srgb, var(--brand-cyan) 6%, transparent), transparent 40%);
  background-attachment: fixed;
}

/* Gradient text utility */
.text-gradient {
  background: var(--gradient-brand-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Section tone shared */
.section[class*="section--tone"] {
  --section-from: var(--tone-navy);
  --section-to: var(--tone-navy);
}

.section[class*="section--tone"]::before,
.section[class*="section--tone"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(2rem, 5vw, 4rem);
  pointer-events: none;
  z-index: 0;
}

.section[class*="section--tone"]::before {
  top: 0;
  background: linear-gradient(to bottom, var(--section-from), transparent);
}

.section[class*="section--tone"]::after {
  bottom: 0;
  background: linear-gradient(to top, var(--section-to), transparent);
}

.section--tone-plate {
  --section-from: var(--tone-navy);
  --section-to: var(--tone-plate);
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, color-mix(in srgb, var(--brand-blue) 16%, transparent), transparent 58%),
    linear-gradient(180deg, var(--section-from) 0%, var(--section-to) 24%, var(--section-to) 100%);
}

.section--tone-blue {
  --section-from: var(--tone-plate);
  --section-to: var(--tone-blue);
  background:
    radial-gradient(ellipse 70% 55% at 85% 15%, color-mix(in srgb, var(--brand-blue) 20%, transparent), transparent 55%),
    linear-gradient(180deg, var(--section-from) 0%, var(--section-to) 20%, var(--section-to) 100%);
}

.section--tone-slate {
  --section-from: var(--tone-blue);
  --section-to: var(--tone-slate);
  background:
    linear-gradient(180deg, var(--section-from) 0%, var(--section-to) 18%, var(--section-to) 100%);
}

.section--tone-indigo {
  --section-from: var(--tone-slate);
  --section-to: var(--tone-indigo);
  background:
    radial-gradient(ellipse 65% 50% at 90% 25%, color-mix(in srgb, #7c6cf0 18%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 40% at 5% 75%, color-mix(in srgb, var(--brand-blue) 10%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-from) 0%, var(--section-to) 20%, var(--section-to) 100%);
}

.section--tone-teal {
  --section-from: var(--tone-indigo);
  --section-to: var(--tone-teal);
  background:
    radial-gradient(ellipse 80% 55% at 10% 85%, color-mix(in srgb, var(--brand-cyan) 18%, transparent), transparent 58%),
    linear-gradient(180deg, var(--section-from) 0%, var(--section-to) 20%, var(--section-to) 100%);
}

.section--tone-mint {
  --section-from: var(--tone-teal);
  --section-to: var(--tone-mint);
  background:
    radial-gradient(ellipse 75% 50% at 50% 100%, color-mix(in srgb, var(--brand-mint) 16%, transparent), transparent 55%),
    linear-gradient(180deg, var(--section-from) 0%, var(--section-to) 18%, var(--section-to) 100%);
}

.section--tone-warm {
  --section-from: var(--tone-mint);
  --section-to: var(--tone-warm);
  background:
    radial-gradient(ellipse 60% 45% at 70% 0%, color-mix(in srgb, #e8b86d 10%, transparent), transparent 50%),
    linear-gradient(180deg, var(--section-from) 0%, var(--section-to) 18%, var(--section-to) 100%);
}

.section--tone-charcoal {
  --section-from: var(--tone-warm);
  --section-to: var(--tone-charcoal);
  background:
    linear-gradient(180deg, var(--section-from) 0%, var(--section-to) 16%, var(--section-to) 100%);
}

.section--tone-accent {
  --section-from: var(--tone-charcoal);
  --section-to: #0a1814;
  background:
    radial-gradient(ellipse 100% 70% at 50% 110%, color-mix(in srgb, var(--brand-mint) 18%, transparent), transparent 62%),
    radial-gradient(ellipse 55% 45% at 15% 0%, color-mix(in srgb, var(--brand-blue) 14%, transparent), transparent 52%),
    radial-gradient(ellipse 45% 35% at 90% 30%, color-mix(in srgb, var(--brand-cyan) 10%, transparent), transparent 48%),
    linear-gradient(180deg, var(--section-from) 0%, var(--section-to) 28%, var(--section-to) 100%);
}

.section--tone-accent::after {
  background: linear-gradient(to top, var(--tone-void), transparent);
}

.section--tone-accent .cta-band {
  background: color-mix(in srgb, var(--tone-mint) 40%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-mint) 25%, transparent);
  box-shadow: var(--shadow-glow);
}

.hero + .section--tone-plate::before,
.hero + .section--tone-blue::before,
.hero + .section--tone-teal::before,
.hero + .section--tone-mint::before {
  background: linear-gradient(to bottom, var(--tone-navy), transparent);
}

/* Decorative accent bar under section taglines */
.section-tagline {
  background: var(--gradient-brand-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.section__header .section-tagline::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin: 0.65rem auto 0;
  background: var(--gradient-brand-h);
  border-radius: var(--radius-pill);
  transform-origin: left;
}

.section__header[data-animate].is-visible .section-tagline::after,
.section__header:has(.section-tagline)::after {
  animation: none;
}

@media (prefers-reduced-motion: no-preference) {
  .section__header .section-tagline::after {
    animation: accent-grow 0.8s var(--transition-slow) both;
    animation-play-state: paused;
  }

  .section__header.is-visible .section-tagline::after,
  [data-animate].is-visible .section-tagline::after {
    animation-play-state: running;
  }
}

@keyframes accent-grow {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}