/* ============================================================================
   Ultra Hero FX  —  ultra-hero-fx.css   (build hf-1.0)
   The hero "field" layer for v4 subpages: themed blue gradient + scrim behind a
   sticky 100vh canvas (#uds-gl), section transparency overrides, hero sizing,
   light-mode text contrast, and the end-of-field divider.
   Pairs with ultra-hero-fx.js. Scope is #ultra-v4. See the runbook for how to
   extend the wrap to other sections / pages.
   ========================================================================== */

/* overflow:clip caps the sticky 100vh canvas to the wrap bounds on short wraps
   (hero+stat-ribbon pages) without breaking sticky the way overflow:hidden would. */
.uds-stream-wrap{position:relative;overflow:clip}
.uds-stream-wrap > section{position:relative;z-index:1}
.uds-stream-wrap > section::before,.uds-stream-wrap > section::after{display:none !important}
.uds-stream-wrap .shell{position:relative;z-index:2;width:100%}

/* Out-specify the v4 theme rule that paints an opaque gradient on sections, otherwise the field is
   hidden under them. Generic: covers ANY section placed inside the wrap on ANY page. */
html #ultra-v4 .uds-stream-wrap > section,
html[data-theme="light"] #ultra-v4 .uds-stream-wrap > section,
html:not([data-theme="light"]) #ultra-v4 .uds-stream-wrap > section{
  background:transparent !important;background-image:none !important}

/* Hero height so content sits inside the beam band (top ~14.5% of the canvas is empty by design) */
html #ultra-v4 .uds-stream-wrap > section.hero{
  min-height:clamp(560px,64vh,820px);
  display:flex;flex-direction:column;justify-content:center;isolation:isolate}
.hero::before,.hero::after{display:none !important}

/* Field layer: themed gradient + radial highlight. Canvas sits over it; effects draw over the field. */
.uds-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible;
  background:radial-gradient(55% 40% at 78% 6%,rgba(120,190,255,.30),transparent 65%),
             linear-gradient(180deg,#1b6abe 0%,#0d4d89 100%)}
html:not([data-theme="light"]) .uds-hero-bg{
  background:radial-gradient(55% 40% at 78% 6%,rgba(30,80,150,.45),transparent 65%),
             linear-gradient(180deg,#08152b 0%,#050d1a 100%)}

/* Sticky 100vh canvas travels the whole wrap and keeps consistent effect geometry.
   Keep the ancestor chain overflow:visible or sticky breaks. */
.uds-hero-bg canvas{position:sticky;top:0;display:block;width:100%;height:100vh}

/* Scrim: light at the top so the hero reads bright, heavier lower down for legibility */
.uds-hero-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,38,72,.18) 0%,rgba(8,38,72,0) 14%,rgba(8,38,72,.04) 38%,rgba(8,38,72,.26) 52%,rgba(8,38,72,.32) 74%,rgba(8,38,72,.45) 100%)}
html:not([data-theme="light"]) .uds-hero-bg::after{
  background:linear-gradient(180deg,rgba(6,16,31,.28) 0%,rgba(6,16,31,0) 14%,rgba(6,16,31,.05) 38%,rgba(6,16,31,.40) 52%,rgba(6,16,31,.48) 74%,rgba(6,16,31,.66) 100%)}

/* Light-mode text contrast for content now sitting on the dark/blue field */
html[data-theme="light"] .hero h1{color:#fff !important}
html[data-theme="light"] .hero .hero-tagline,html[data-theme="light"] .hero .hero-trust{color:rgba(255,255,255,.88) !important}
html[data-theme="light"] .hero .hero-tagline strong,html[data-theme="light"] .hero .hero-trust strong{color:#fff !important}
html[data-theme="light"] .hero .hero-pips{color:#e3eeff !important}
/* Light-mode legibility for any wrapped section's .section-head (eyebrow + h2 + p):
   the field paints the background bright blue, so headings need white instead of dark navy.
   Generic - covers .plans, .tlds, .use-cases, and any future section using .section-head. */
html[data-theme="light"] #ultra-v4 .uds-stream-wrap > section .section-head h2{color:#fff !important}
html[data-theme="light"] #ultra-v4 .uds-stream-wrap > section .section-head .eyebrow{color:#bcd9ff !important}
html[data-theme="light"] #ultra-v4 .uds-stream-wrap > section .section-head p{color:rgba(255,255,255,.85) !important}

/* Showcase band: in light mode the band's dark-blue gradient overlay can blend into the bright
   blue field at the rounded edges. A crisp white border restores separation. */
html[data-theme="light"] #ultra-v4 .uds-stream-wrap > section.showcase .showcase-band{
  border:2px solid #fff !important}

/* Divider where the field ends: a 1px top border on the first section after the wrap,
   theme-aware, plus a faint blue glow rising into the line. Generic: works on any page. */
html #ultra-v4 .uds-stream-wrap + section{
  border-top:1px solid #dde5ee !important}
html:not([data-theme="light"]) #ultra-v4 .uds-stream-wrap + section{
  border-top:1px solid rgba(255,255,255,.12) !important}
.uds-stream-wrap::after{content:'';position:absolute;left:0;right:0;bottom:0;height:64px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(123,196,255,.07) 100%)}
html:not([data-theme="light"]) .uds-stream-wrap::after{
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(47,155,245,.06) 100%)}