/* ==========================================================================
   Web-Slinger PLUS: the animated layer on top of web.css (customer-facing pages only).
   Everything here uses transform/opacity only (cheap for the GPU) and switches
   itself off for visitors who prefer reduced motion (web-plus.js does not run).
   ========================================================================== */
/* the static web + skyline from web.css are replaced by the living versions (only when html has the 'plus' class, i.e. motion is allowed) */
html.plus body::before{background:radial-gradient(rgba(140,170,255,.15) 1.2px,transparent 1.7px) 0 0/11px 11px!important}
html.plus body::after{display:none!important}

/* ---- living city: three skylines drifting at different speeds + twinkling windows ---- */
.city2{position:fixed;left:0;right:0;bottom:0;height:140px;z-index:0;overflow:hidden;pointer-events:none}
.cl{position:absolute;left:0;bottom:0;width:calc(100% + 390px);height:140px;background-repeat:repeat-x;background-position:left bottom;background-size:390px 140px;will-change:transform;animation:cityscroll linear infinite}
.cl.l1{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 390 140%22 preserveAspectRatio=%22none%22%3E%3Crect x=%220%22 y=%2271%22 width=%2240%22 height=%2269%22 fill=%22%2318236A%22/%3E%3Crect x=%2240%22 y=%2278%22 width=%2240%22 height=%2262%22 fill=%22%2318236A%22/%3E%3Crect x=%2280%22 y=%2269%22 width=%2242%22 height=%2271%22 fill=%22%2318236A%22/%3E%3Crect x=%22122%22 y=%2295%22 width=%2232%22 height=%2245%22 fill=%22%2318236A%22/%3E%3Crect x=%22154%22 y=%2276%22 width=%2242%22 height=%2264%22 fill=%22%2318236A%22/%3E%3Crect x=%22196%22 y=%22100%22 width=%2231%22 height=%2240%22 fill=%22%2318236A%22/%3E%3Crect x=%22227%22 y=%2287%22 width=%2240%22 height=%2253%22 fill=%22%2318236A%22/%3E%3Crect x=%22267%22 y=%22101%22 width=%2230%22 height=%2239%22 fill=%22%2318236A%22/%3E%3Crect x=%22297%22 y=%2262%22 width=%2243%22 height=%2278%22 fill=%22%2318236A%22/%3E%3Crect x=%22340%22 y=%2268%22 width=%2227%22 height=%2272%22 fill=%22%2318236A%22/%3E%3Crect x=%22367%22 y=%2278%22 width=%2223%22 height=%2262%22 fill=%22%2318236A%22/%3E%3Crect x=%220%22 y=%22134%22 width=%22390%22 height=%226%22 fill=%22%2318236A%22/%3E%3C/svg%3E");animation-duration:150s;opacity:.7}
.cl.l2{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 390 140%22 preserveAspectRatio=%22none%22%3E%3Crect x=%220%22 y=%2237%22 width=%2237%22 height=%22103%22 fill=%22%230F1856%22/%3E%3Crect x=%2237%22 y=%2289%22 width=%2230%22 height=%2251%22 fill=%22%230F1856%22/%3E%3Crect x=%2267%22 y=%2271%22 width=%2246%22 height=%2269%22 fill=%22%230F1856%22/%3E%3Crect x=%22113%22 y=%2266%22 width=%2241%22 height=%2274%22 fill=%22%230F1856%22/%3E%3Crect x=%22154%22 y=%2268%22 width=%2244%22 height=%2272%22 fill=%22%230F1856%22/%3E%3Crect x=%22198%22 y=%2244%22 width=%2232%22 height=%2296%22 fill=%22%230F1856%22/%3E%3Crect x=%22230%22 y=%2273%22 width=%2234%22 height=%2267%22 fill=%22%230F1856%22/%3E%3Crect x=%22264%22 y=%2290%22 width=%2242%22 height=%2250%22 fill=%22%230F1856%22/%3E%3Crect x=%22306%22 y=%2251%22 width=%2235%22 height=%2289%22 fill=%22%230F1856%22/%3E%3Crect x=%22341%22 y=%2289%22 width=%2249%22 height=%2251%22 fill=%22%230F1856%22/%3E%3Crect x=%220%22 y=%22134%22 width=%22390%22 height=%226%22 fill=%22%230F1856%22/%3E%3C/svg%3E");animation-duration:95s}
.cl.l3{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 390 140%22 preserveAspectRatio=%22none%22%3E%3Crect x=%220%22 y=%2264%22 width=%2251%22 height=%2276%22 fill=%22%23070B2E%22/%3E%3Crect x=%2251%22 y=%2263%22 width=%2232%22 height=%2277%22 fill=%22%23070B2E%22/%3E%3Crect x=%2283%22 y=%2249%22 width=%2251%22 height=%2291%22 fill=%22%23070B2E%22/%3E%3Crect x=%22134%22 y=%2270%22 width=%2250%22 height=%2270%22 fill=%22%23070B2E%22/%3E%3Crect x=%22184%22 y=%2262%22 width=%2231%22 height=%2278%22 fill=%22%23070B2E%22/%3E%3Crect x=%22215%22 y=%2274%22 width=%2241%22 height=%2266%22 fill=%22%23070B2E%22/%3E%3Crect x=%22256%22 y=%2252%22 width=%2246%22 height=%2288%22 fill=%22%23070B2E%22/%3E%3Crect x=%22302%22 y=%2259%22 width=%2233%22 height=%2281%22 fill=%22%23070B2E%22/%3E%3Crect x=%22335%22 y=%2264%22 width=%2255%22 height=%2276%22 fill=%22%23070B2E%22/%3E%3Crect x=%220%22 y=%22134%22 width=%22390%22 height=%226%22 fill=%22%23070B2E%22/%3E%3C/svg%3E");animation-duration:60s}
.cl.lightsA{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 390 140%22%3E%3Crect x=%2217%22 y=%2285%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%2227%22 y=%2285%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%2237%22 y=%2285%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%2237%22 y=%2297%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%2258%22 y=%2284%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%2258%22 y=%22108%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%2268%22 y=%2272%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%2268%22 y=%2284%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%2268%22 y=%22108%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%2268%22 y=%22120%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22100%22 y=%2258%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22110%22 y=%2270%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22110%22 y=%2282%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22110%22 y=%2294%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22120%22 y=%2258%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22141%22 y=%22115%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22151%22 y=%2291%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22161%22 y=%2279%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22171%22 y=%2279%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22171%22 y=%2291%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22171%22 y=%22103%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22191%22 y=%2271%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22201%22 y=%22107%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22222%22 y=%22107%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22232%22 y=%2283%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22263%22 y=%2273%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22263%22 y=%2285%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22263%22 y=%2297%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22273%22 y=%2261%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22273%22 y=%2273%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22283%22 y=%22109%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22293%22 y=%2261%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22293%22 y=%2297%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22309%22 y=%2292%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22309%22 y=%22116%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22352%22 y=%2297%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3Crect x=%22362%22 y=%22121%22 width=%224%22 height=%225%22 fill=%22%23FFD23F%22/%3E%3C/svg%3E");animation-duration:60s,3.4s;animation-name:cityscroll,twinkleA}
.cl.lightsB{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 390 140%22%3E%3Crect x=%2227%22 y=%22109%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%2237%22 y=%22109%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%2290%22 y=%2282%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22100%22 y=%22118%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22110%22 y=%2258%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22110%22 y=%22106%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22120%22 y=%2282%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22120%22 y=%2294%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22141%22 y=%2279%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22161%22 y=%22103%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22191%22 y=%22119%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22201%22 y=%2271%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22232%22 y=%2295%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22242%22 y=%2283%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22242%22 y=%22119%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22263%22 y=%2261%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22273%22 y=%22109%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22273%22 y=%22121%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22283%22 y=%2297%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22309%22 y=%22104%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22319%22 y=%2280%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22352%22 y=%2273%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22352%22 y=%2285%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22352%22 y=%22109%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22362%22 y=%22109%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22372%22 y=%2273%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22372%22 y=%22109%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3Crect x=%22382%22 y=%22121%22 width=%224%22 height=%225%22 fill=%22%23FFE9A0%22/%3E%3C/svg%3E");animation-duration:60s,4.6s;animation-name:cityscroll,twinkleB}
.sky2{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.moon{position:absolute;left:8%;bottom:196px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 36% 34%,#FFFBE3,#FFE8A6 70%);box-shadow:0 0 34px 8px rgba(255,236,160,.28);animation:moonbob 9s ease-in-out infinite}
.shootstar{position:absolute;top:14%;left:-12%;width:110px;height:2px;background:linear-gradient(90deg,transparent,#fff);opacity:0;transform:rotate(24deg);animation:shootstar 17s 5s infinite}

/* ---- the web that draws itself (top-right) ---- */
.bigweb{position:fixed;right:-70px;top:-50px;width:320px;height:320px;z-index:0;pointer-events:none;color:#8FA8FF;opacity:.55}
.bigweb path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .55s ease-out forwards}
.bigweb{animation:webglow 7s ease-in-out infinite 3.5s}
/* the web Webby hangs from draws itself strand by strand, then glows softly */
html.plus .anchorweb path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .55s ease-out forwards}
html.plus .anchorweb{animation:webglow 7s ease-in-out infinite 3.5s}

/* ---- Webby swings in when the page opens, then settles into her hanging spot: ONE spider, the same one ---- */
.hero-web{position:relative}
.hero-web .hang{--h:30px;position:absolute;right:.25rem;top:0}
main.card .hang{--h:54px}
.hang.intro{z-index:40!important;animation:pendulum 3.8s ease-in-out 1 both,hh-swing 3.6s ease-in-out 3.8s infinite}
.hang.intro i{animation:introthread 3.8s ease-in both}
html.plus{overflow-x:hidden}

/* ---- Continue: the web shoots out ---- */
.shot{position:fixed;left:0;top:0;z-index:50;pointer-events:none;overflow:visible}
.shot path{fill:none;stroke:#F4F6FF;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .3s ease-out forwards,fadeOut .5s 1.1s forwards}
.shot circle{animation:fadeOut .5s 1.1s forwards}
.shot text{font-family:'Bangers',Impact,sans-serif;font-size:26px;letter-spacing:1.5px;fill:#FFD23F;stroke:#04061A;stroke-width:5px;paint-order:stroke;animation:hh-pop .45s .18s both,fadeOut .3s .85s forwards}

/* ---- scanning: Webby spins a web ---- */
.result-card.loading .res-spin{display:none}
.spinweb{position:relative;width:100px;height:100px;margin:0 auto .2rem}
.spinweb svg.wheel{position:absolute;inset:0;color:#9DB4FF;animation:spin 3.4s linear infinite}
.spinweb svg.wheel path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.spinweb .who{position:absolute;left:50%;top:-6px;margin-left:-22px;animation:hh-bob 1.6s ease-in-out infinite}
/* ---- success: comic speed lines, digits drop in, sparks ---- */
.speed{position:absolute;inset:-34px;border-radius:26px;pointer-events:none;z-index:0;background:repeating-conic-gradient(from 8deg at 50% 36%,rgba(255,210,63,.6) 0 5deg,transparent 5deg 15deg);-webkit-mask-image:radial-gradient(circle at 50% 36%,#000 0,transparent 66%);mask-image:radial-gradient(circle at 50% 36%,#000 0,transparent 66%);animation:speed .75s ease-out both}
.result-card.ok .res-digit,.result-card.ok .mc-digit{animation-name:hh-drop!important;animation-duration:.6s!important;animation-timing-function:cubic-bezier(.2,1.4,.4,1)!important;animation-fill-mode:both!important}
.spark{position:fixed;z-index:60;pointer-events:none;margin:-6px 0 0 -6px;animation:sparkfly .9s cubic-bezier(.2,.7,.3,1) forwards}
/* ---- tap ripple: a little web ring wherever you press ---- */
.rip{position:fixed;width:84px;height:84px;margin:-42px 0 0 -42px;z-index:70;pointer-events:none;animation:rip .6s ease-out both}
/* ---- header web icon turns slowly ---- */
.dot,.brand-dot{animation:spin 26s linear infinite!important}

@keyframes cityscroll{to{transform:translateX(-390px)}}
@keyframes twinkleA{0%,45%{opacity:1}55%,100%{opacity:.15}}
@keyframes twinkleB{0%,45%{opacity:.15}55%,100%{opacity:1}}
@keyframes moonbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes shootstar{0%,90%{opacity:0;transform:translate(0,0) rotate(24deg)}92%{opacity:1}100%{opacity:0;transform:translate(115vw,48vh) rotate(24deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes webglow{0%,100%{opacity:.55}50%{opacity:.8}}
@keyframes pendulum{0%{transform:rotate(-74deg)}28%{transform:rotate(50deg)}52%{transform:rotate(-32deg)}72%{transform:rotate(16deg)}86%{transform:rotate(-10deg)}100%{transform:rotate(-7deg)}}
@keyframes introthread{0%,74%{height:min(46vh,380px)}100%{height:var(--h,34px)}}
@keyframes fadeOut{to{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes speed{0%{transform:scale(.25);opacity:1}100%{transform:scale(1.3);opacity:0}}
@keyframes hh-drop{0%{transform:translateY(-52px) rotate(-14deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes sparkfly{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1) rotate(200deg);opacity:0}}
@keyframes rip{0%{transform:scale(.2);opacity:.95}100%{transform:scale(1.15);opacity:0}}
@media (prefers-reduced-motion:reduce){.city2,.sky2,.bigweb,.shot,.spark,.rip,.speed{display:none!important}}