/* MWAL custom layer (preview). Crew toy style, motion, reactions. */
:root{--beat:.52s;--spring:cubic-bezier(.34,1.56,.64,1)}

/* 1. background: music confetti instead of generic dot grid */
.dots{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='%231F4DDB' opacity='.5'%3E%3Crect x='40' y='20' width='2' height='15'/%3E%3Cellipse cx='37.8' cy='35' rx='3.4' ry='2.6'/%3E%3C/g%3E%3Cg fill='%23141414' opacity='.18'%3E%3Ccircle cx='140' cy='60' r='5'/%3E%3C/g%3E%3Ccircle cx='140' cy='60' r='1.6' fill='%23fff'/%3E%3Cpath stroke='%238A8F98' stroke-opacity='.45' stroke-width='1.8' stroke-linecap='round' fill='none' d='M90 150q4-6 8 0t8 0t8 0'/%3E%3C/svg%3E");background-size:200px 200px;opacity:.45}

/* 2. live badge: equalizer instead of a red dot */
.eqdot{display:inline-flex;gap:2px;align-items:flex-end;height:14px;width:auto}
.eqdot i{display:block;width:3px;height:14px;border-radius:2px;transform-origin:bottom;animation:fq var(--beat) ease-in-out infinite alternate}
.eqdot i{background:linear-gradient(#5A85F2,var(--blue))}.eqdot i:nth-child(2){animation-delay:-.18s}.eqdot i:nth-child(3){animation-delay:-.33s}.eqdot i:nth-child(4){animation-delay:-.09s}
@keyframes fq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}

/* 3. buttons: squishy toy press, arrow chip */
.btn-dark{box-shadow:0 5px 0 #000,0 12px 28px rgba(20,20,20,.22);transition:transform .25s var(--spring),box-shadow .25s var(--ui)}
.btn-dark:hover{transform:translateY(-2px) rotate(-.6deg);box-shadow:0 7px 0 #000,0 18px 40px rgba(20,20,20,.26)}
.btn-dark:active,.btn-dark.squish{transform:translateY(4px) scale(.98);box-shadow:0 1px 0 #000,0 6px 14px rgba(20,20,20,.2)}
.price .btn-dark{box-shadow:0 5px 0 var(--blue),0 12px 28px rgba(0,0,0,.3)}
.btn .arr,.btn-sm>span[aria-hidden]{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;line-height:1;animation:nudge 1.6s var(--io) infinite}
.price .btn .arr{background:var(--blue);color:#fff}
@keyframes nudge{0%,60%,100%{transform:translateX(0)}75%{transform:translateX(4px)}}

/* 4. numbered cards: 3D crew numerals */
.num3d{display:block;width:72px;height:72px;margin:-6px 0 10px -4px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.num3d img{width:72px;height:72px;filter:drop-shadow(0 8px 10px rgba(20,20,20,.16));animation:idle 3.4s ease-in-out infinite}
.wb-pt:nth-child(2) .num3d img{animation-delay:-1.1s}.wb-pt:nth-child(3) .num3d img{animation-delay:-2.2s}
@keyframes idle{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
.wb-pt{transition:transform .35s var(--spring)}
.wb-pt:hover{transform:translateY(-4px) rotate(-.4deg)}

/* pop-in on scroll */
[data-pop]{opacity:0;transform:scale(.6) translateY(16px)}
[data-pop].popped{opacity:1;transform:none;transition:opacity .45s var(--ui),transform .7s var(--spring);transition-delay:calc(var(--i,0)*90ms)}
.wiggle{animation:wig .6s var(--spring)!important}
@keyframes wig{0%{transform:rotate(0) scale(1)}30%{transform:rotate(-14deg) scale(1.18)}60%{transform:rotate(10deg) scale(1.05)}100%{transform:rotate(0) scale(1)}}

/* 5. form: brand chips with vinyl count, playful focus */
.wb-f input:focus{box-shadow:inset 0 0 0 2px var(--blue),0 0 0 5px rgba(31,77,219,.12)}
.wb-q span{gap:8px;transition:transform .3s var(--spring),background-color .2s,color .2s,box-shadow .2s}
.wb-q span::before{content:"";width:18px;height:18px;border-radius:50%;flex:none;background:radial-gradient(circle,#fff 0 2px,var(--c,#141414) 2.5px 4px,#141414 4.5px 100%);box-shadow:0 0 0 1px rgba(20,20,20,.15)}
.wb-q span{--c:var(--blue)}

.wb-q label:nth-of-type(3) span::before{box-shadow:0 0 0 1px rgba(20,20,20,.15)}
.wb-q input:checked+span{background:var(--c);color:#fff;transform:scale(1.04);box-shadow:0 4px 0 rgba(0,0,0,.25)}

.wb-q input:checked+span::before{animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 6. crew jam band */
.jam{position:relative;padding:40px 0 28px;overflow:hidden;text-align:center}
.jam-k{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:6px}
.jam-h{font-size:clamp(26px,6vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin:0 auto 6px;max-width:18ch}
.jam-sub{color:var(--mute);font-size:16px;margin:0 auto;max-width:34ch}
.stage-row{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:2px;margin:40px auto 0;max-width:620px;height:150px}
.mem{position:relative;width:min(19vw,118px);height:min(19vw,118px);flex:none;cursor:pointer;-webkit-tap-highlight-color:transparent;background:none;border:0;padding:0}
.mem img{width:100%;height:100%;object-fit:contain;transform-origin:50% 92%;filter:drop-shadow(0 10px 10px rgba(20,20,20,.14))}
.mem.m-manager img{animation:nod var(--beat) ease-in-out infinite alternate}
.mem.m-producer img{animation:bounce var(--beat) cubic-bezier(.5,0,.5,1) infinite alternate}
.mem.m-singer img{animation:sway calc(var(--beat)*2) ease-in-out infinite alternate}
.mem.m-rapper img{animation:hype var(--beat) cubic-bezier(.5,0,.5,1) infinite alternate}
.mem.m-dj img{animation:wob calc(var(--beat)*2) ease-in-out infinite alternate}
@keyframes nod{from{transform:rotate(-4deg) translateY(0)}to{transform:rotate(3deg) translateY(3px)}}
@keyframes bounce{from{transform:translateY(0) scaleY(1)}to{transform:translateY(-7px) scaleY(1.02)}}
@keyframes sway{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
@keyframes hype{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-9px) rotate(3deg)}}
@keyframes wob{from{transform:rotate(-3deg) translateX(-2px)}to{transform:rotate(3deg) translateX(2px)}}
.mem.hop img{animation:hop .6s var(--spring)!important}
@keyframes hop{0%{transform:none}40%{transform:translateY(-26px) rotate(-8deg) scale(1.08)}100%{transform:none}}
.mem .bub{position:absolute;left:50%;bottom:100%;transform:translate(-50%,8px) scale(.6);opacity:0;white-space:nowrap;background:#fff;color:var(--ink);font-size:12px;font-weight:700;padding:6px 10px;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.12),inset 0 0 0 1.5px var(--ink);pointer-events:none;transition:transform .35s var(--spring),opacity .2s;z-index:3}
.mem.talk .bub{opacity:1;transform:translate(-50%,0) scale(1)}
.mem:first-child .bub{left:10%;transform-origin:left}.mem:last-child .bub{left:auto;right:-6%;transform:translate(0,8px) scale(.6)}.mem:last-child.talk .bub{transform:none}
.wave{display:flex;justify-content:center;align-items:center;gap:4px;height:34px;margin:4px auto 0;max-width:620px}
.wave i{display:block;width:5px;height:100%;border-radius:4px;background:linear-gradient(180deg,#6B93F5,var(--blue) 55%,#1440B8);transform-origin:center;animation:fq var(--beat) ease-in-out infinite alternate;animation-delay:calc(var(--d)*-1s)}
.notes{position:absolute;inset:0;pointer-events:none;z-index:2}
.note{position:absolute;bottom:40px;width:16px;height:16px;opacity:0;animation:rise 3.6s ease-out infinite;animation-delay:calc(var(--d)*1s)}
@keyframes rise{0%{opacity:0;transform:translate(0,0) rotate(-10deg) scale(.6)}15%{opacity:.55}100%{opacity:0;transform:translate(var(--x,10px),-95px) rotate(14deg) scale(1.1)}}
.burst{position:absolute;width:18px;height:18px;pointer-events:none;z-index:4;animation:burst .9s ease-out forwards}
@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(var(--bx),var(--by)) rotate(var(--br)) scale(1.2)}}
.jam:not(.on) .mem img,.jam:not(.on) .wave i,.jam:not(.on) .note{animation-play-state:paused}

/* 7. checks, crosses, bullets */
.new li::before,.yes li::before,.old li::before,.no li::before{content:"";width:24px;height:24px;top:.05em;background:url(icob-check@1x.webp) center/contain no-repeat;background-image:image-set(url(icob-check@1x.webp) 1x,url(icob-check@2x.webp) 2x,url(icob-check@3x.webp) 3x)}
.old li::before,.no li::before{width:20px;height:20px;top:.15em;left:2px;background-image:image-set(url(icob-x@1x.webp) 1x,url(icob-x@2x.webp) 2x,url(icob-x@3x.webp) 3x)}
.old li::before{opacity:.8}
.ck img{width:30px;height:30px;margin-left:auto;display:inline-block}

/* 8. how it works steps + week timeline get numerals */
.flow li{align-items:center}
.flow li::before{content:"";flex:none;width:40px;height:40px;background:center/contain no-repeat;filter:drop-shadow(0 4px 6px rgba(0,0,0,.12))}
.flow li:nth-child(1)::before{background-image:image-set(url(numb-1@1x.webp) 1x,url(numb-1@2x.webp) 2x)}
.flow li:nth-child(2)::before{background-image:image-set(url(numb-2@1x.webp) 1x,url(numb-2@2x.webp) 2x)}
.flow li:nth-child(3)::before{background-image:image-set(url(numb-3@1x.webp) 1x,url(numb-3@2x.webp) 2x)}
.wk::before{display:none}
.wk-mark{position:absolute;left:-62px;top:18px;width:46px;height:46px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.14));cursor:pointer}
.wk-mark img{width:46px;height:46px;object-fit:contain}
.wk-end .wk-mark{left:-66px;width:54px;height:54px}.wk-end .wk-mark img{width:54px;height:54px;animation:nod var(--beat) ease-in-out infinite alternate;transform-origin:50% 90%}

/* 9. "you" list: crew doing the artist things */
.you-list .ico{width:56px;height:56px;background:rgba(255,255,255,.08)!important;overflow:visible}
.you-list .ico img{width:60px;height:60px;object-fit:contain;transform-origin:50% 90%;animation:nod calc(var(--beat)*2) ease-in-out infinite alternate}
.you-list li:nth-child(2) .ico img{animation-name:sway}.you-list li:nth-child(3) .ico img{animation-name:wob}.you-list li:nth-child(4) .ico img{animation-name:bounce}

/* 10. FAQ plus: colored toy button */
summary::after{width:30px;height:30px;margin-top:-15px;right:0;border-radius:50%;background:linear-gradient(#fff,#fff) center/12px 3px no-repeat,linear-gradient(#fff,#fff) center/3px 12px no-repeat,var(--fc,var(--blue));box-shadow:0 3px 0 rgba(0,0,0,.22);transition:transform .55s var(--spring)}

details[open] summary::after{transform:rotate(135deg) scale(1.1)}
summary:hover{color:var(--fc,var(--blue))}

/* 11. small stuff */
.burger span:last-child{background:var(--blue)}
.calls-ic span{background:var(--blue)}.calls-ic span:nth-child(odd){background:#141414}
.faces img{animation:wave 2.8s var(--spring) infinite;animation-delay:calc(var(--i,0)*.12s)}
@keyframes wave{0%,70%,100%{transform:translateY(0)}78%{transform:translateY(-6px)}}
.wb-done img{width:120px;height:120px;transform-origin:50% 90%;animation:nod var(--beat) ease-in-out infinite alternate}

/* 12. footer crew lineup */
.foot{position:relative;padding-top:64px}
.foot{overflow-x:clip}.foot-crew{position:absolute;top:-24px;left:0;right:0;display:flex;justify-content:center;gap:4px}
.foot-crew img{width:44px;height:44px;border-radius:50%;background:#fff;object-fit:contain;padding:2px;box-shadow:0 0 0 2px var(--bg),0 6px 14px rgba(0,0,0,.1);transition:transform .35s var(--spring)}
.foot-crew img:hover,.foot-crew img.hop2{transform:translateY(-8px) rotate(-8deg)}

@media (max-width:640px){
  .num3d,.num3d img{width:64px;height:64px}
  .wk-mark{left:-52px;width:38px;height:38px}.wk-mark img{width:38px;height:38px}
  .wk-end .wk-mark{left:-56px;width:46px;height:46px}.wk-end .wk-mark img{width:46px;height:46px}
  .stage-row{height:110px}
  .foot-crew img{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
  [data-pop]{opacity:1;transform:none}
  .note{display:none}
}

/* THE DATE label in MWAL blue (Oct 29 2026) */
.wb-when-k{color:#1F4DDB}