/* =========================================================================
   hero-bg.css — THE canonical Power Texas hero background.

   This is the ONE definition of the hero background layer stack. It was
   extracted verbatim from the homepage hero (formerly `.home-page
   .home-hero__bg / __grad / __vignette / __swirl / __swirl2` in home.css) and
   renamed to the shared `.pt-herobg*` selectors. Both the homepage and the
   Texas Electricity Rates hero render <HeroBg /> (components/HeroBg.jsx) and
   load this file, so their hero backgrounds come from a single source — there
   is no per-page copy of these values anywhere else.

   Render <HeroBg /> as the first child of a hero container that is
   `position: relative; overflow: hidden`; these layers fill it (inset: 0) and
   the overflow clips the oversized swirls. No media queries — the background is
   identical across desktop and mobile (as it always was on the homepage).

   The palette tokens are declared locally here so the background renders the
   same on any page, independent of the homepage's `.home-page` token scope.
   Values are identical to the homepage's --h-navy-* tokens. swirl.png resolves
   relative to this stylesheet (repo root), the same asset the homepage used.
   ========================================================================= */
.pt-herobg {
  --h-navy-deep: #0B2147;
  --h-navy-1:    #0F2F63;
  --h-navy-2:    #163C78;
  --h-navy-3:    #19478C;
  position: absolute; inset: 0; pointer-events: none;
  background: var(--h-navy-deep);
}
.pt-herobg__grad {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--h-navy-1) 0%, var(--h-navy-2) 50%, var(--h-navy-3) 100%);
}
.pt-herobg__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, var(--h-navy-deep) 100%);
}
.pt-herobg__swirl {
  position: absolute; top: -22%; right: -20%;
  width: 900px; height: 900px; opacity: 0.15;
  background: url('assets/hero/swirl.png') center / contain no-repeat;
  filter: brightness(0) saturate(100%) invert(32%) sepia(48%) saturate(360%) hue-rotate(195deg) brightness(102%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at center, black 40%, transparent 85%);
  mask-image: radial-gradient(ellipse 85% 85% at center, black 40%, transparent 85%);
}
.pt-herobg__swirl2 {
  position: absolute; bottom: -30%; left: -22%;
  width: 750px; height: 750px; opacity: 0.086;
  background: url('assets/hero/swirl.png') center / contain no-repeat;
  transform: rotate(155deg) scaleX(-1);
  filter: brightness(0) saturate(100%) invert(38%) sepia(35%) saturate(300%) hue-rotate(195deg) brightness(105%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at center, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 80% at center, black 30%, transparent 80%);
}