@font-face{font-family:"Rubik";src:url(fonts/rubik.woff2) format("woff2");font-weight:300 900;font-display:swap}
:root{--blue1:#5AAAF0;--blue2:#1E64C8;--blue3:#174fa3;--navy:#0d2a55;--yellow:#FFE678;--yellow2:#ffd84a;--cream:#FFF8E1}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;font-family:"Rubik",system-ui,"Segoe UI",Arial,sans-serif;color:var(--navy);line-height:1.3;overflow-x:hidden;
background:radial-gradient(900px 520px at 85% -5%,#7cc2f7 0%,transparent 60%),radial-gradient(700px 500px at 0% 105%,#2a73d6 0%,transparent 60%),linear-gradient(180deg,#4aa0ea 0%,var(--blue2) 62%,#174fa3 100%);background-attachment:fixed}
.bubbles{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bubbles span{position:absolute;bottom:-120px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 7%,rgba(255,255,255,.28) 9%,rgba(255,255,255,.07) 55%,rgba(255,255,255,.22) 72%,rgba(255,255,255,.04) 100%);box-shadow:inset 0 0 12px rgba(255,255,255,.35);animation:rise linear infinite}
.bubbles span:nth-child(1){right:6%;width:46px;height:46px;animation-duration:17s;animation-delay:-3s}
.bubbles span:nth-child(2){right:22%;width:22px;height:22px;animation-duration:12s;animation-delay:-8s}
.bubbles span:nth-child(3){right:38%;width:70px;height:70px;animation-duration:22s;animation-delay:-14s}
.bubbles span:nth-child(4){right:55%;width:30px;height:30px;animation-duration:15s;animation-delay:-1s}
.bubbles span:nth-child(5){right:72%;width:54px;height:54px;animation-duration:19s;animation-delay:-10s}
.bubbles span:nth-child(6){right:88%;width:18px;height:18px;animation-duration:11s;animation-delay:-5s}
.bubbles span:nth-child(7){right:14%;width:34px;height:34px;animation-duration:20s;animation-delay:-16s}
.bubbles span:nth-child(8){right:64%;width:88px;height:88px;animation-duration:26s;animation-delay:-20s}
.bubbles span:nth-child(9){right:46%;width:16px;height:16px;animation-duration:10s;animation-delay:-6s}
.bubbles span:nth-child(10){right:80%;width:40px;height:40px;animation-duration:18s;animation-delay:-12s}
@keyframes rise{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(14px,-28vh,0)}50%{transform:translate3d(-10px,-56vh,0)}75%{transform:translate3d(12px,-84vh,0)}100%{transform:translate3d(0,-118vh,0)}}
.card{position:relative;z-index:1;max-width:430px;margin:0 auto;padding:16px 14px calc(22px + env(safe-area-inset-bottom))}
.top{text-align:center}
.logo{margin:0 auto;width:min(250px,70%);line-height:0}
.logo img{width:100%;height:auto;filter:drop-shadow(0 4px 0 rgba(13,42,85,.25))}
.line{margin:6px 0 8px;font-size:1.18rem;font-weight:800;color:var(--yellow);text-shadow:0 2px 0 #154a99}

/* stage: Haim in the middle, link bubbles around him */
.stage{position:relative;height:452px;margin:0 auto;max-width:400px}
.say{position:absolute;top:2px;left:50%;transform:translateX(-50%);z-index:3;width:max-content;max-width:230px;padding:9px 14px;border-radius:18px;background:#fff;color:var(--navy);font-weight:800;font-size:.98rem;text-align:center;box-shadow:0 6px 16px rgba(8,34,84,.25)}
.say::after{content:"";position:absolute;bottom:-9px;left:50%;margin-left:-9px;border:9px solid transparent;border-bottom:0;border-top-color:#fff}
.say.bump{animation:bump .35s ease}
@keyframes bump{0%{transform:translateX(-50%) scale(.85)}60%{transform:translateX(-50%) scale(1.06)}100%{transform:translateX(-50%) scale(1)}}
.haim{position:absolute;left:50%;top:92px;width:150px;margin-left:-75px;padding:0;border:0;background:none;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent}
.haim .halo{position:absolute;left:50%;top:6px;width:170px;height:170px;margin-left:-85px;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.75) 0 6%,rgba(255,255,255,.18) 9%,rgba(255,230,120,.22) 60%,rgba(255,255,255,.45) 72%,rgba(255,255,255,.05) 74%);box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.haim img{position:relative;display:block;width:100%;height:auto;transform-origin:50% 62%;transform:scaleX(var(--fx,1)) rotate(var(--rot,0deg));transition:transform .38s cubic-bezier(.34,1.56,.64,1);filter:drop-shadow(0 10px 12px rgba(8,34,84,.35))}
.haim.hop img{animation:hop .4s ease}
@keyframes hop{0%,100%{translate:0 0}40%{translate:0 -12px}}
.haim.giggle img{animation:giggle .5s ease}
@keyframes giggle{0%,100%{translate:0 0}20%{translate:-5px 0}40%{translate:5px 0}60%{translate:-4px 0}80%{translate:3px 0}}
.haim:focus-visible{outline:4px solid var(--yellow);outline-offset:4px;border-radius:20px}

.orb{position:absolute;width:108px;display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;color:#fff;text-align:center;-webkit-tap-highlight-color:transparent;z-index:2}
.orb.r1{right:0;top:58px}.orb.r2{right:0;top:186px}.orb.r3{right:0;top:312px}
.orb.l1{left:0;top:112px}.orb.l2{left:0;top:254px}
.ball{position:relative;width:72px;height:72px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:inset -6px -8px 14px rgba(0,0,0,.18),inset 6px 7px 12px rgba(255,255,255,.45),0 8px 16px rgba(8,34,84,.3);animation:float 3.6s ease-in-out infinite}
.ball::before{content:"";position:absolute;top:11px;left:15px;width:18px;height:11px;border-radius:50%;background:rgba(255,255,255,.75);transform:rotate(-30deg)}
.ball svg{width:34px;height:34px;fill:currentColor;position:relative}
.r2 .ball{animation-delay:-.9s}.r3 .ball{animation-delay:-1.8s}.l1 .ball{animation-delay:-2.4s}.l2 .ball{animation-delay:-1.3s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-3deg)}}
.orb-site .ball{background:radial-gradient(circle at 35% 30%,#fff3a8,var(--yellow2) 45%,#f0a800);color:var(--navy)}
.orb-channel .ball,.orb-group .ball{background:radial-gradient(circle at 35% 30%,#8ff0b4,#25D366 45%,#0f8a5f)}
.orb-tiktok .ball{background:radial-gradient(circle at 35% 30%,#555,#111 55%);box-shadow:inset 3px 3px 0 rgba(37,244,238,.85),inset -3px -3px 0 rgba(254,44,85,.85),0 8px 16px rgba(8,34,84,.3)}
.orb-youtube .ball{background:radial-gradient(circle at 35% 30%,#ff9a9a,#ff2a2a 45%,#c00000)}
.lab{display:flex;flex-direction:column;line-height:1.15}
.lab b{font-size:.98rem;font-weight:800;text-shadow:0 2px 0 rgba(13,42,85,.45)}
.lab small{font-size:.8rem;font-weight:600;color:var(--yellow);text-shadow:0 1px 0 rgba(13,42,85,.5)}
.orb.on .ball{animation:none;transform:scale(1.14);box-shadow:0 0 0 5px rgba(255,230,120,.85),inset -6px -8px 14px rgba(0,0,0,.18),inset 6px 7px 12px rgba(255,255,255,.45),0 10px 20px rgba(8,34,84,.35);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.orb:focus-visible{outline:none}.orb:focus-visible .ball{outline:4px solid var(--yellow);outline-offset:4px}
.orb.soon{cursor:default}
.orb.soon .ball{filter:saturate(.45);opacity:.8}
.orb.soon .lab small{background:var(--yellow);color:var(--navy);text-shadow:none;border-radius:999px;padding:1px 9px;margin-top:2px;font-weight:800}
.orb.pop .ball{animation:pop .5s ease forwards}
.orb.pop .ball::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:4px solid rgba(255,255,255,.9);animation:ring .5s ease-out forwards}
@keyframes pop{0%{transform:scale(1.14)}35%{transform:scale(1.35);opacity:.9}100%{transform:scale(1);opacity:1}}
@keyframes ring{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.9);opacity:0}}
.orb.wobble .ball{animation:wob .5s ease}
@keyframes wob{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}50%{transform:rotate(12deg)}75%{transform:rotate(-6deg)}}

.share{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;margin:4px 0 0;border:0;border-radius:999px;background:var(--yellow);color:var(--navy);font:800 1.1rem "Rubik",system-ui,sans-serif;cursor:pointer;box-shadow:0 5px 0 #e0b92f,0 12px 22px rgba(8,34,84,.25);-webkit-tap-highlight-color:transparent}
.share svg{width:22px;height:22px;fill:currentColor}
.share:active{transform:translateY(4px);box-shadow:0 1px 0 #e0b92f}
.share:focus-visible{outline:4px solid #fff;outline-offset:3px}
.foot{margin-top:18px;text-align:center;color:rgba(255,255,255,.85);font-size:.9rem;font-weight:600}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,30px);opacity:0;z-index:5;background:var(--navy);color:#fff;padding:12px 22px;border-radius:999px;font-weight:700;box-shadow:0 10px 24px rgba(0,0,0,.25);transition:opacity .25s,transform .25s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:350px){.orb{width:92px}.ball{width:62px;height:62px}.haim{width:128px;margin-left:-64px}}
@media (prefers-reduced-motion:reduce){.bubbles span,.ball,.haim img,.say,.orb .ball::after{animation:none!important;transition:none!important}.bubbles span{bottom:auto}.bubbles span:nth-child(odd){top:20%}.bubbles span:nth-child(even){top:65%}.toast{transition:none}}