/* The animated introduction, in its own band between the fit section and the FAQ.
   The animation keeps its size, but its ground runs across the full width of the window, so the flashes
   and sparks light up the whole band instead of stopping at a frame. The band carries .screen-frame,
   which intro.js lifts above the darkening during the big lightning. */
.intro-section{--pad:clamp(28px,4vw,64px);padding-block:0}
.screen-frame.intro-band{position:relative;overflow:hidden;padding-block:var(--pad);border:0;border-radius:0;box-shadow:none;background:radial-gradient(120% 90% at 50% 40%,#2b1d63 0%,#19123b 62%,#0f0a26 100%)}
.intro-frame{width:min(100%,1120px,calc((100svh - 120px) * 16 / 9));margin-inline:auto}
.intro-band .intro-stage{overflow:visible;background:none}
/* The flash glow spreads past the animation's own box, wide rather than tall, so it lights the band's width
   and fades before its top and bottom; its centre stays where intro.js puts it. The element is only as wide as
   the glow reaches (the gradient is clear past 60% of its 120cqw radius): a flash three windows wide made the
   browser set up and paint tens of megapixels for every flash, which stalled the frames it appeared in. */
.intro-band .intro-zap{left:calc(var(--x) - 72cqw);right:auto;width:144cqw;background:radial-gradient(ellipse 120cqw 50cqw at 72cqw var(--y),rgb(235 240 255 / .85),rgb(150 165 255 / .3) 22%,transparent 60%)}
/* Spark canvases are only as wide as the animation, so they fade out at their sides instead of ending in a line */
.intro-band .intro-sparks{-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)}

/* The trails flowing into the cube fade by a fraction each frame, which never quite reaches zero on a canvas:
   a faint white veil stays behind wherever they passed. The filter drops that last bit of opacity. */
.intro-filters{position:absolute}
.intro-band .intro-soul{filter:url(#intro-trail-cut)}

/* On the dark page the band takes the page's own colour and fades out at top and bottom, so only the light
   of the effects shows. Its taller fade reaches into the neighbours' empty padding, so the spacing stays as it was.
   The fade is drawn by two page-coloured gradients over the band rather than a mask: a mask makes the browser redraw
   the whole band through an extra buffer on every animation frame, the gradients cost nothing. The band keeps its own
   stacking, as the mask gave it, so the effects' layers stay beneath the fades.
   The darkening behind the big lightning takes the page colour too.
   The light page keeps the band's own dark ground, which the white type needs. */
.intro-section{--pad:clamp(56px,8vw,104px);margin-block:calc(-1 * var(--pad))}
.screen-frame.intro-band{isolation:isolate}
[data-theme=dark] .screen-frame.intro-band::before,[data-theme=dark] .screen-frame.intro-band::after{content:"";position:absolute;left:0;right:0;z-index:30;height:var(--pad);background:linear-gradient(var(--white),transparent);pointer-events:none}
[data-theme=dark] .screen-frame.intro-band::before{top:0}
[data-theme=dark] .screen-frame.intro-band::after{bottom:0;transform:scaleY(-1)}
[data-theme=dark] .screen-frame.intro-band{background:var(--white)}
:root:not([data-theme=dark]) .intro-section{margin-block:0}
[data-theme=dark] .intro-storm{background:rgb(15 11 31 / .94)}

.site-header .brand{position:relative}
.site-header .brand.is-glinting::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgb(255 255 255 / .95) 50%,transparent 62%) 100% 0/250% 100% no-repeat;-webkit-mask:url(../assets/logo/Stocktrace360-Logo-WithText-Dark-Artboard-1.svg) center/100% 100% no-repeat;mask:url(../assets/logo/Stocktrace360-Logo-WithText-Dark-Artboard-1.svg) center/100% 100% no-repeat;animation:brand-glint 1.1s ease-in-out forwards}
@keyframes brand-glint{to{background-position:0 0}}