.intro-stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;container-type:inline-size;background:radial-gradient(120% 90% at 50% 35%,#2b1d63 0%,#19123b 62%,#0f0a26 100%);color:#f8f7fc;font-family:var(--font-head);user-select:none}
.intro-task{position:absolute;margin:0;white-space:nowrap;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.intro-task .intro-w{display:inline-block}
.intro-big{position:absolute;margin:0;white-space:pre;font-weight:800;line-height:1.04;letter-spacing:-.025em;color:#f8f7fc}
.intro-big.is-second{color:#bda6ff}
.intro-big .is-accent{color:#ff3dc4;text-shadow:0 0 .35em rgb(240 0 168 / .55)}
.intro-word,.intro-letter{display:inline-block}
.intro-copy{position:absolute;inset:0}
.intro-flap{position:absolute;perspective:60cqw}
.intro-leaf{position:absolute;inset:0;transform-style:preserve-3d}
.intro-leaf .intro-big{left:0;top:0;backface-visibility:hidden}
.intro-zap{position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(circle at var(--x) var(--y),rgb(235 240 255 / .85),rgb(150 165 255 / .3) 22%,transparent 60%)}
/* Text keeps only tight shadows: wide blurred shadows on big or enlarged type must be repainted whenever the text
   changes size or spacing, which made the key phrase and the dashboards stutter on a 120 Hz Retina screen.
   The wide glow of the picked words comes from the gradient behind them instead. */
.intro-big.is-key{z-index:7;color:#fff;text-shadow:0 0 .3em rgb(25 18 59 / .9)}
.intro-task{font-size:var(--size);color:var(--tone);opacity:0;transition:opacity .5s ease,color .3s ease,text-shadow .3s ease,filter .5s ease}
.intro-task.is-shown{opacity:.92}
.intro-stage.is-dimmed .intro-task.is-shown{opacity:.22}
.intro-stage.is-dimmed .intro-task.is-picked{opacity:1;filter:none}
.intro-task.is-picked{z-index:6;color:#fff;opacity:1;text-shadow:0 0 .12em #fff}
.intro-task.is-picked::before{content:"";transform-origin:0 0;position:absolute;inset:-1.1em -1.4em;z-index:-1;background:radial-gradient(closest-side,rgb(240 0 168 / .5),rgb(240 0 168 / .26) 45%,rgb(119 123 255 / .16) 70%,transparent);pointer-events:none}
.intro-task.is-picked.is-flash::before{background:radial-gradient(closest-side,rgb(255 255 255 / .75),rgb(220 228 255 / .34) 50%,transparent)}
.intro-grid{position:absolute;inset:0;transition:filter 1.4s ease}
.intro-grid.is-blurred{filter:blur(.55cqw) brightness(.55)}
.intro-cell{position:absolute;width:21%;height:21%;border-radius:.45cqw;overflow:hidden;background:#fff;box-shadow:0 .3cqw 1.2cqw rgb(0 0 0 / .35);opacity:0;will-change:transform}
.intro-cell img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.intro-cell::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.intro-cell.is-live{opacity:1}
.intro-cell.is-forming{z-index:7}
.intro-stage.is-interactive .intro-cell{cursor:zoom-in;transition:transform .45s cubic-bezier(.3,.7,.2,1),box-shadow .3s ease,outline-color .2s ease;outline:.25cqw solid transparent;outline-offset:-.25cqw}
.intro-stage.is-interactive .intro-cell:hover,.intro-stage.is-interactive .intro-cell:focus-visible{outline-color:#f000a8}
.intro-stage.is-interactive .intro-cell.is-open{z-index:8;cursor:zoom-out;outline-color:transparent;box-shadow:0 0 0 rgb(0 0 0 / 0)}
.intro-cube3d{position:absolute;inset:0;z-index:6;width:100%;height:100%;pointer-events:none;opacity:0}
.intro-soul{position:absolute;inset:0;z-index:9;width:100%;height:100%;pointer-events:none}
.intro-logo{position:absolute;inset:0;z-index:7;width:100%;height:100%;pointer-events:none;overflow:visible}
.intro-logo .face{transition:fill .7s ease}
.intro-logo image{transition:opacity .6s ease}
.intro-sparks{position:absolute;inset:0;z-index:8;width:100%;height:100%;pointer-events:none}
.intro-storm{position:fixed;inset:0;z-index:9999;background:radial-gradient(140% 100% at 50% 0%,rgb(32 24 82 / .93),rgb(8 5 24 / .95));opacity:0;pointer-events:none}
.intro-raised{position:relative;z-index:10000}
.intro-bolt{position:fixed;inset:0;z-index:10001;width:100vw;height:100vh;pointer-events:none}
.intro-flash{position:fixed;inset:0;z-index:10002;background:#f4f7ff;opacity:0;pointer-events:none}
.hero-visual:has(.intro-stage){justify-self:stretch}
.intro-orb{position:absolute;z-index:8;border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(closest-side,rgb(255 255 255 / .95),rgb(240 232 255 / .75) 9%,rgb(206 184 255 / .42) 22%,rgb(160 120 240 / .2) 42%,rgb(226 69 155 / .08) 66%,transparent)}