/* hero-fx.css - layout + readability for the animated hero (js in /hero-fx/). Everything is scoped to
   .hero-v2[data-hero-fx] (set by loader.js) or .hero-fx-on (set once the first frame is on the canvas), so with
   scripts off, with ?hero=off or on a WebGL-less browser the page keeps today's static SVG hero untouched. */
.hero-v2 .hero-fx-wrap{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease}
.hero-v2.hero-fx-on .hero-fx-wrap{opacity:1}
.hero-fx-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* retire the static art but keep its box: it sizes the slot the canvas art lives in */
.hero-v2.hero-fx-on .hero-art-svg{visibility:hidden}
.hero-v2.hero-fx-on .hero-art-svg *{animation:none!important}
.hero-v2.hero-fx-on .hero-deco,.hero-v2.hero-fx-on .hero-chip{display:none}
/* the canvas scrim keeps the copy readable wherever the effect passes behind it */
@media (min-width:861px){
  .hero-v2.hero-fx-on .hero-mini-text::before{content:"";position:absolute;z-index:-1;inset:-2rem -2.6rem -2.6rem -3.2rem;pointer-events:none;
    background:radial-gradient(closest-side,color-mix(in srgb,var(--paper) 80%,transparent) 0,color-mix(in srgb,var(--paper) 80%,transparent) 55%,transparent 100%)}
}
/* option A: warm rim on the headline as the lighthouse beam passes (--rim is set by fx-a.js) */
.hero-v2[data-hero-fx=a].hero-fx-on h1{filter:drop-shadow(0 0 calc(var(--rim,0)*12px) rgba(255,176,0,calc(var(--rim,0)*.6)))}
/* option B: ambient glow behind the particle QR (dark scheme only; the light scheme is pure white) */
[data-theme=dark] .hero-v2[data-hero-fx=b] .hero-fx-wrap::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 75% at 76% 50%,rgba(46,100,220,.26),transparent 70%)}
[data-theme=light] .hero-v2[data-hero-fx=b] .hero-fx-wrap::before{content:"";position:absolute;inset:0;background:radial-gradient(42% 55% at 76% 52%,rgba(14,58,138,.05),transparent 72%)}
/* phones and narrow tablets: headline, CTAs, then the art, then the rest of the copy */
@media (max-width:860px){
  .hero-v2[data-hero-fx] .hero-mini-inner{row-gap:0}
  .hero-v2[data-hero-fx] .hero-mini-text{display:contents}
  .hero-v2[data-hero-fx] .hero-mini-text>*{position:relative;z-index:2}
  .hero-v2[data-hero-fx] .hero-mini-inner>h1,.hero-v2[data-hero-fx] .hero-mini-text>h1{order:1}
  .hero-v2[data-hero-fx] .hero-cta-row{order:2}
  .hero-v2[data-hero-fx] .hero-mini-art{display:block;order:3;height:min(118vw,480px);margin:.3rem 0 .4rem;position:relative;z-index:1}
  .hero-v2[data-hero-fx] .hero-subtitle{order:4}
  .hero-v2[data-hero-fx] .hero-badges{order:5}
  .hero-v2[data-hero-fx] .hero-usecases{order:6}
  .hero-v2[data-hero-fx] .hero-art-svg{max-width:340px;height:100%;margin:0 auto}
  .hero-v2.hero-fx-on .hero-subtitle{background:color-mix(in srgb,var(--paper) 74%,transparent);border-radius:12px;padding:.5rem .65rem}
}

/* the demo act: the showcase iframe takes over the art slot after the first flash (see demo.js) */
.hero-fx-demo{position:absolute;inset:0;z-index:3;border-radius:22px;overflow:hidden;opacity:0;visibility:hidden;background:#101114;box-shadow:0 18px 50px rgba(5,15,40,.26)}
.hero-fx-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.hero-fx-burst{position:absolute;left:50%;top:50%;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;opacity:0;pointer-events:none;z-index:4;
  background:radial-gradient(closest-side,rgba(255,244,200,.96),rgba(255,201,74,.5) 42%,rgba(255,201,74,0) 72%)}