/* WABABA logo intro — full-screen overlay played on every load / refresh before the landing page.
   Timeline (s): glow 0 → bubble 0.25 → W 1.1 → growth line 1.3 → arrow + badge 1.9–2.1 →
   wordmark 2.4 → shine 3.0 → exit 3.9–4.5. The exit is pure CSS, so the overlay also clears
   itself if intro.js never runs; intro.js removes the node once it has faded out. */

html.intro-playing,html.intro-playing body{overflow:hidden;}
html.intro-done #wb-intro{display:none;}

#wb-intro{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.4rem,1.4vh,.75rem);background:#fff;overflow:hidden;cursor:pointer;animation:wbIntroOut .6s cubic-bezier(.4,0,.2,1) 3.9s forwards;}
#wb-intro.is-leaving{animation:wbIntroSkip .35s ease forwards;}
#wb-intro::before{content:"";position:absolute;left:50%;top:46%;width:min(110vw,560px);aspect-ratio:1;transform:translate(-50%,-50%) scale(.6);border-radius:50%;background:radial-gradient(circle,rgba(37,211,102,.18) 0%,rgba(37,211,102,.07) 38%,transparent 68%);opacity:0;animation:wbGlow 1.2s ease-out forwards;}

/* Mark size follows both width and height so it never gets cut on short / zoomed screens */
.wb-intro__stage{position:relative;width:min(62vw,300px,calc(32vh * 1.62));animation:wbStageOut .6s cubic-bezier(.4,0,.2,1) 3.9s forwards;}
.wb-intro__stage svg{display:block;width:100%;height:auto;overflow:visible;}
.wb-pulse,.wb-w-head,.wb-growth-head,.wb-badge,.wb-spark,.wb-dot{transform-box:fill-box;transform-origin:center;}

/* Stroke draw: every drawn shape has pathLength="1" */
.wb-draw{stroke-dasharray:1 2;stroke-dashoffset:1;}

.wb-pulse{fill:none;stroke:rgba(18,179,71,.35);stroke-width:2;opacity:0;animation:wbPulse 1.6s ease-out forwards;}
.wb-pulse.p2{animation-delay:.45s;}
.wb-pulse.p3{animation-delay:2.15s;}

.wb-disc{fill:#fff;opacity:0;animation:wbFade .6s ease .55s forwards;}
.wb-bubble{animation:wbDraw 1s cubic-bezier(.65,0,.35,1) .25s forwards;}
.wb-w{animation:wbDraw .65s cubic-bezier(.65,0,.35,1) 1.1s forwards;}
.wb-w-shaft{animation:wbDraw .3s cubic-bezier(.45,0,.55,1) 1.7s forwards;}
.wb-w-head{opacity:0;transform:scale(0);animation:wbPop .45s cubic-bezier(.34,1.56,.64,1) 1.9s forwards;}

/* Background growth chart: draws left → right like a rising trend, arrowhead lands last */
.wb-growth{animation:wbDraw 1.1s cubic-bezier(.45,0,.25,1) 1.3s forwards;}
.wb-growth-head{opacity:0;transform:scale(0) translate(-10px,10px);animation:wbPopArrow .5s cubic-bezier(.34,1.56,.64,1) 2.3s forwards;}
.wb-growth-glow{animation:wbDraw 1.1s cubic-bezier(.45,0,.25,1) 1.3s forwards,wbGlowPulse 1.6s ease-in-out 2.4s infinite alternate;}

.wb-orbit{animation:wbDraw 1.1s cubic-bezier(.65,0,.35,1) 1.4s forwards;}
.wb-orbit.back{animation-delay:1.6s;}

.wb-badge{opacity:0;transform:scale(0);animation:wbPop .5s cubic-bezier(.34,1.56,.64,1) 2.05s forwards;}
.wb-spark{opacity:0;animation:wbSpark .6s ease-out 2s forwards;}

.wb-dot{opacity:0;animation:wbTwinkle 2.4s ease-in-out infinite alternate;}

.wb-shine{fill:none;stroke:#fff;stroke-width:18;stroke-linecap:round;stroke-dasharray:.07 2;stroke-dashoffset:.07;opacity:0;animation:wbShine .9s cubic-bezier(.45,0,.25,1) 3s forwards;}

.wb-intro__word{position:relative;margin:.35rem 0 0;font-family:Sora,Manrope,system-ui,sans-serif;font-weight:800;font-size:clamp(1.35rem,3.6vw,2rem);letter-spacing:.06em;line-height:1;color:#1f2b37;display:flex;}
.wb-intro__word span{display:inline-block;opacity:0;transform:translateY(.45em);animation:wbRise .5s cubic-bezier(.2,.8,.2,1) forwards;}
.wb-intro__word .g{color:#12b347;}
.wb-intro__word span:nth-child(1){animation-delay:2.4s;}
.wb-intro__word span:nth-child(2){animation-delay:2.46s;}
.wb-intro__word span:nth-child(3){animation-delay:2.52s;}
.wb-intro__word span:nth-child(4){animation-delay:2.58s;}
.wb-intro__word span:nth-child(5){animation-delay:2.64s;}
.wb-intro__word span:nth-child(6){animation-delay:2.7s;}
.wb-intro__tag{position:relative;margin:0;font-family:Manrope,system-ui,sans-serif;font-size:clamp(.55rem,1.2vw,.66rem);font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#5b6b75;opacity:0;animation:wbFade .6s ease 2.85s forwards;}

.wb-intro__skip{position:absolute;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);padding:.5rem 1rem;border:1px solid rgba(18,179,71,.3);border-radius:9999px;background:rgba(255,255,255,.8);color:#0f8a3c;font:700 .7rem/1 Manrope,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;opacity:0;animation:wbFade .4s ease .8s forwards;}
.wb-intro__skip:hover{background:#ecfbf1;}

@keyframes wbDraw{to{stroke-dashoffset:0;}}
@keyframes wbFade{to{opacity:1;}}
@keyframes wbGlow{to{opacity:1;transform:translate(-50%,-50%) scale(1);}}
@keyframes wbPulse{0%{opacity:.9;transform:scale(.55);}100%{opacity:0;transform:scale(1.7);}}
@keyframes wbPop{0%{opacity:0;transform:scale(0);}100%{opacity:1;transform:scale(1);}}
@keyframes wbPopArrow{0%{opacity:0;transform:scale(0) translate(-10px,10px);}100%{opacity:1;transform:scale(1) translate(0,0);}}
@keyframes wbGlowPulse{from{opacity:.35;}to{opacity:.8;}}
@keyframes wbSpark{0%{opacity:0;transform:scale(.3);}35%{opacity:1;}100%{opacity:0;transform:scale(1.5);}}
@keyframes wbTwinkle{0%{opacity:0;transform:translateY(6px) scale(.6);}100%{opacity:.85;transform:translateY(-6px) scale(1);}}
@keyframes wbShine{0%{opacity:0;stroke-dashoffset:.07;}15%{opacity:.85;}85%{opacity:.85;}100%{opacity:0;stroke-dashoffset:-.95;}}
@keyframes wbRise{to{opacity:1;transform:none;}}
@keyframes wbStageOut{to{transform:scale(1.06);}}
@keyframes wbIntroOut{to{opacity:0;visibility:hidden;pointer-events:none;}}
@keyframes wbIntroSkip{from{opacity:1;}to{opacity:0;visibility:hidden;pointer-events:none;}}