/* Synchronized comic effects. Nothing new sits over faces, copy, navigation or CTA. */
.hero-fx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;contain:layout style}
.hero-fx>*{position:absolute;pointer-events:none}
.hero-fx-wipe{inset:0;opacity:0}
.hero-fx-wipe i,.hero-fx-wipe b{position:absolute;top:-30%;bottom:-30%;left:-30%;width:60%;background:var(--fx-color);transform:skewX(-22deg) translateX(-170%);border-inline:5px solid var(--ink);box-shadow:11px 0 0 var(--cream)}
.hero-fx-wipe b{width:14%;left:-10%;background:var(--teal);border-inline-width:3px;box-shadow:7px 0 0 var(--pink)}
.hero-fx-rays{width:900px;height:900px;left:calc(50% - 450px);top:-90px;opacity:0;background:repeating-conic-gradient(from -5deg,transparent 0deg 12deg,#172a31 12deg 13deg,transparent 13deg 23deg,#fffbea 23deg 26deg);mask-image:radial-gradient(circle,transparent 0 19%,#000 34% 65%,transparent 73%);transform:scale(.72) rotate(-12deg)}
.hero-fx-word{left:0;top:165px;width:max-content;font-family:var(--pop-font);font-size:clamp(105px,12vw,175px);line-height:1;letter-spacing:-.1em;color:var(--cream);-webkit-text-stroke:8px var(--ink);paint-order:stroke fill;text-shadow:7px 9px 0 var(--fx-color);white-space:nowrap;opacity:0;transform:translateX(-130%) rotate(-10deg)}
.hero-fx-confetti{inset:0}
.hero-fx-confetti i{position:absolute;left:50%;top:34%;width:var(--size);height:var(--size);background:var(--piece);border:2px solid var(--ink);opacity:0;transform:translate(0,0) scale(.2);box-shadow:2px 2px 0 var(--cream)}
.hero-fx-confetti .piece-star{clip-path:polygon(50% 0,62% 35%,100% 50%,62% 64%,50% 100%,37% 64%,0 50%,37% 35%);width:calc(var(--size)*1.6);height:calc(var(--size)*1.6);border:0}
.hero-fx-confetti .piece-strip{height:calc(var(--size)*1.8);width:calc(var(--size)*.65)}
.hero-fx-confetti .piece-diamond{border-radius:2px}
@keyframes fxWipe42{0%{transform:translateX(-120vw) skewX(-22deg)}100%{transform:translateX(180vw) skewX(-22deg)}}
@keyframes fxRays42{0%{opacity:0;transform:scale(.72) rotate(-12deg)}25%{opacity:.75}55%{opacity:.65}100%{opacity:0;transform:scale(1.12) rotate(8deg)}}
@keyframes fxWord42{0%{opacity:0;transform:translateX(-130%) rotate(-10deg)}12%{opacity:1}42%{opacity:1;transform:translateX(2vw) rotate(-7deg)}58%{opacity:1;transform:translateX(7vw) rotate(-7deg)}88%{opacity:1}100%{opacity:0;transform:translateX(115vw) rotate(-4deg)}}
@keyframes fxConfetti42{0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.2)}18%{opacity:1}72%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(.9)}}
.motion-on .fx-cover-live .hero-fx-wipe{opacity:1}
.motion-on .fx-cover-live .hero-fx-wipe i{animation:fxWipe42 .95s .02s cubic-bezier(.2,.7,.25,1) both}
.motion-on .fx-cover-live .hero-fx-wipe b{animation:fxWipe42 1.05s .12s cubic-bezier(.2,.7,.25,1) both}
.motion-on .fx-cover-live .hero-fx-rays{animation:fxRays42 1.2s .1s ease-out both}
.motion-on .fx-cover-live .hero-fx-word{animation:fxWord42 1.3s .04s cubic-bezier(.22,.72,.27,1) both}
.motion-on .fx-cover-live .hero-fx-confetti i{animation:fxConfetti42 1.15s calc(.17s + var(--lag)) cubic-bezier(.12,.7,.3,1) both}
.scene-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible}
.is-comic-scene .comic-panel{z-index:2}
.scene-fx-halo{position:absolute;inset:21px 10% 47px;opacity:0;background:repeating-conic-gradient(from -5deg,var(--pink) 0deg 15deg,var(--cream) 15deg 20deg,var(--teal) 20deg 36deg,var(--yellow) 36deg 40deg);clip-path:polygon(50% 0,59% 17%,72% 3%,77% 23%,95% 13%,89% 36%,100% 46%,88% 57%,98% 80%,77% 76%,72% 98%,57% 84%,45% 100%,37% 84%,18% 97%,23% 74%,0 78%,12% 54%,0 39%,19% 32%,7% 13%,32% 20%);transform:scale(.6) rotate(-8deg)}
.scene-fx-ring{position:absolute;inset:40px 17% 65px;border:6px dashed var(--ink);border-radius:18px;opacity:0;transform:scale(.7) rotate(-8deg)}
.scene-fx-sweep{position:absolute;top:7%;bottom:16%;left:0;width:25%;background:var(--scene-tone);border-inline:4px solid var(--ink);opacity:0;transform:skewX(-22deg) translateX(-160%)}
.scene-fx-shard{position:absolute;left:var(--x);top:var(--y);width:24px;height:40px;border:3px solid var(--ink);background:var(--piece);clip-path:polygon(0 0,100% 9%,72% 100%,17% 80%);opacity:0;transform:translate(0,0) rotate(0deg) scale(.5)}
@keyframes sceneHalo42{0%{opacity:0;transform:scale(.6) rotate(-8deg)}27%{opacity:1;transform:scale(1.06) rotate(3deg)}65%{opacity:.85}100%{opacity:0;transform:scale(1.15) rotate(8deg)}}
@keyframes sceneRing42{0%{opacity:0;transform:scale(.7) rotate(-8deg)}25%{opacity:1}100%{opacity:0;transform:scale(1.13) rotate(5deg)}}
@keyframes sceneShard42{0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.5)}22%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(.9)}}
@keyframes sceneSweep42{0%{opacity:0;transform:skewX(-22deg) translateX(-160%)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:skewX(-22deg) translateX(500%)}}
.motion-on .fx-scene-live .scene-fx-halo{animation:sceneHalo42 .9s ease-out both}
.motion-on .fx-scene-live .scene-fx-ring{animation:sceneRing42 .75s .07s ease-out both}
.motion-on .fx-scene-live .scene-fx-shard{animation:sceneShard42 .75s var(--lag) ease-out both}
.motion-on .fx-scene-live .scene-fx-sweep{animation:sceneSweep42 .7s .04s ease-out both}
@keyframes comicBurst42{0%{transform:perspective(900px) rotateY(var(--enter-turn)) rotateZ(var(--enter-tilt));translate:var(--enter-x) 8px;scale:.78}66%{transform:perspective(900px) rotateY(-4deg) rotateZ(-1deg);translate:0 -5px;scale:1.025}85%{translate:0 2px;scale:.99}100%{transform:perspective(900px) rotateY(0deg) rotateZ(var(--panel-rest));translate:0 0;scale:1}}
.comic-first{--enter-turn:-48deg;--enter-tilt:-9deg;--enter-x:-28px;--panel-rest:-2deg}.comic-second{--enter-turn:48deg;--enter-tilt:9deg;--enter-x:28px;--panel-rest:1deg}.comic-third{--enter-turn:-40deg;--enter-tilt:-7deg;--enter-x:-20px;--panel-rest:-1deg}
.motion-on .is-comic-scene .comic-panel.scene-selected{animation:comicBurst42 .78s cubic-bezier(.2,.8,.25,1) both!important;will-change:auto}
html:not(.motion-on) .hero-fx,html:not(.motion-on) .scene-fx,.offscreen>.hero-fx,.offscreen .scene-fx{display:none}
html.paused .hero-fx,html.paused .scene-fx{display:none}
@media(max-width:700px){.hero-fx-word{top:178px;font-size:88px;-webkit-text-stroke:6px var(--ink);text-shadow:5px 7px 0 var(--fx-color)}.hero-fx-rays{width:670px;height:670px;left:calc(50% - 335px);top:25px}.scene-fx-halo{inset:18px -22px 42px}.scene-fx-ring{inset:38px -8px 59px}.scene-fx-shard{width:19px;height:31px}}
@media(prefers-reduced-motion:reduce){.hero-fx,.scene-fx{display:none!important}.comic-panel{animation:none!important;transition:none!important}}