/* Supporting cast lineup and the animated "How it works" scenes (see crew.js). */
.crew-section{padding:72px 24px 56px;text-align:center;background:radial-gradient(ellipse at 50% 85%,#c9a8b83a,transparent 60%),linear-gradient(160deg,#3d3550,#2e2a40 60%,#3f4a3c);overflow:hidden}
.crew-section>.eyebrow{color:#e4d9ed;margin-bottom:22px}
.crew-section .tape-title{font-size:47px}
.crew-lineup{position:relative;display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;gap:18px 26px;max-width:1000px;margin:70px auto 0;padding-bottom:6px}
.crew-lineup:after{content:'';position:absolute;left:4%;right:4%;bottom:62px;height:38px;border-radius:50%;background:#e9d5b30c;border:1px solid #e9d5b318;z-index:0}
.crew-member{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:0;color:var(--cream);max-width:230px}
.crew-member:focus-visible{outline-offset:8px;border-radius:24px}
.crew-figure{display:block;transition:translate .3s cubic-bezier(.3,.9,.3,1.3)}
.crew-member:hover .crew-figure{translate:0 -6px}
.crew-figure .crew-svg{display:block;height:190px;width:auto;overflow:visible}
.crew-name{font-family:var(--display);font-size:27px;line-height:1.1;margin-top:4px}
.crew-tag{font-size:13px;line-height:1.3;color:#e2d5e8b3;max-width:150px;margin-top:5px;min-height:30px}
.crew-hint{font-size:14px;color:#e2d5e880;margin-top:26px;letter-spacing:.3px}
.crew-bubble{position:absolute;bottom:calc(100% - 26px);left:50%;width:210px;margin-left:-105px;padding:12px 14px;background:#eee8d9;color:#38303e;border-radius:16px 16px 16px 4px;box-shadow:4px 6px 0 #16122228;font-size:13.5px;line-height:1.35;opacity:0;visibility:hidden;transform:translateY(8px) scale(.94);transition:opacity .2s,transform .25s cubic-bezier(.3,.9,.3,1.3),visibility .2s;pointer-events:none;z-index:4}
.crew-bubble:after{content:'';position:absolute;bottom:-12px;left:46%;border-top:14px solid #eee8d9;border-right:14px solid transparent}
.crew-member.is-talking .crew-bubble{opacity:1;visibility:visible;transform:none}
.crew-member.is-talking .cr-head{animation:crew-talk .45s ease-in-out 3}

/* 90s boil + blinking, shared by every crew drawing */
.crew-svg{animation:boil .42s steps(1) infinite}
.cr-eyes{transform-box:fill-box;transform-origin:center;animation:cast-blink 5.2s linear infinite}
.crew-brett .cr-eyes,.sc2-left .cr-eyes{animation-delay:1.3s}.crew-kayla .cr-eyes{animation-delay:2.6s}.crew-couple .cr-eyes{animation-delay:.6s}

/* Lineup idle bits */
.crew-figure{animation:crew-bob 3.2s ease-in-out infinite}
.crew-member:nth-child(2) .crew-figure{animation-delay:-.8s}.crew-member:nth-child(3) .crew-figure{animation-delay:-1.6s}.crew-member:nth-child(4) .crew-figure{animation-delay:-2.4s}
.crew-mei .cr-arm{animation:phone-check 4s ease-in-out infinite}
.crew-brett .cr-arm{animation:tablet-flex 3.4s ease-in-out infinite}
.crew-kayla .cr-arm{animation:spoon-eat 2.8s ease-in-out infinite}
.crew-max .cr-arm{animation:cheers 2.2s ease-in-out infinite}
.crew-max .crew-figure{animation:crew-hype 1.1s ease-in-out infinite}
.crew-member:nth-child(5) .cr-eyes{animation-delay:3.4s}
.cr-hearts text{transform-box:fill-box;transform-origin:center;animation:heart-rise 2.6s ease-out infinite}
.cr-hearts text:nth-child(2){animation-delay:.9s}.cr-hearts text:nth-child(3){animation-delay:1.7s}

/* How it works scenes */
.how-scene{width:300px;max-width:100%;margin:22px auto 0}
.how-scene svg{display:block;width:100%;height:auto;overflow:hidden;border-radius:18px;background:#ffffff0d}
.sc1-bro{animation:bro-walk 6s linear infinite;animation-delay:calc(var(--i) * -2s)}
.sc-bob{animation:bro-step .5s ease-in-out infinite alternate}
.sc1-kayla .cr-head{animation:head-shake 1.6s ease-in-out infinite}
.sc1-sign{transform-box:fill-box;transform-origin:50% 100%;animation:sign-wave 1.6s ease-in-out infinite}
.sc2-left{animation:slide-left 5s cubic-bezier(.3,.9,.3,1.1) infinite}
.sc2-right{animation:slide-right 5s cubic-bezier(.3,.9,.3,1.1) infinite}
.sc2-left .cr-head{animation:lean-right 5s ease-in-out infinite}
.sc2-right .cr-head{animation:lean-left 5s ease-in-out infinite}
.sc2-x{transform-box:fill-box;transform-origin:center;animation:x-pop 5s ease-out infinite}
.sc3-flame{transform-box:fill-box;transform-origin:50% 100%;animation:flame 0.5s ease-in-out infinite alternate}
.sc3-steam path{animation:steam-rise 2.4s ease-in-out infinite}
.sc3-steam path:nth-child(2n){animation-delay:.8s}
.sc3-brett .cr-head{animation:awkward-nod 3s ease-in-out infinite}
.sc3-mei .cr-arm{animation:phone-check 3s ease-in-out infinite}
.sc4-couple{transform-box:fill-box;transform-origin:50% 100%;animation:couple-sway 3s ease-in-out infinite}
.sc4-chat{transform-box:fill-box;transform-origin:0 50%;opacity:0;animation:chat-pop 6s ease-out infinite;animation-delay:calc(var(--i) * .7s)}
.how-scene:not(.is-visible) *,.crew-section:not(.is-visible) *{animation-play-state:paused!important}

@keyframes cheers{0%,45%,100%{transform:rotate(0)}58%,80%{transform:rotate(-28deg) translateY(-6px)}}
@keyframes crew-hype{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes crew-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes crew-talk{0%,100%{transform:rotate(0)}30%{transform:rotate(-6deg) translateY(-2px)}70%{transform:rotate(5deg)}}
@keyframes phone-check{0%,55%,100%{transform:rotate(0)}65%,90%{transform:rotate(-14deg) translateY(-6px)}}
@keyframes tablet-flex{0%,60%,100%{transform:rotate(0)}70%,88%{transform:rotate(-22deg) translate(4px,-6px)}}
@keyframes spoon-eat{0%,40%,100%{transform:rotate(0)}55%,75%{transform:rotate(-42deg) translate(-4px,-4px)}}
@keyframes heart-rise{0%{opacity:0;transform:translateY(6px) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translateY(-20px) scale(1.2)}}
@keyframes bro-walk{0%{transform:translateX(0)}100%{transform:translateX(330px)}}
@keyframes bro-step{0%{transform:translateY(0) rotate(-2deg)}100%{transform:translateY(-4px) rotate(2deg)}}
@keyframes head-shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes sign-wave{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg) translateY(-3px)}}
@keyframes slide-left{0%,8%{transform:translateX(-130px)}28%,82%{transform:translateX(0)}96%,100%{transform:translateX(-130px)}}
@keyframes slide-right{0%,8%{transform:translateX(150px)}28%,82%{transform:translateX(0)}96%,100%{transform:translateX(150px)}}
@keyframes lean-right{0%,32%,80%,100%{transform:rotate(0)}42%,72%{transform:rotate(9deg)}}
@keyframes lean-left{0%,32%,80%,100%{transform:rotate(0)}42%,72%{transform:rotate(-9deg)}}
@keyframes x-pop{0%,28%{opacity:0;transform:scale(.2) rotate(-40deg)}36%{opacity:1;transform:scale(1.35) rotate(8deg)}42%,78%{opacity:1;transform:scale(1) rotate(0)}86%,100%{opacity:0;transform:scale(.4)}}
@keyframes flame{0%{transform:scaleY(1) rotate(-4deg)}100%{transform:scaleY(1.18) rotate(4deg)}}
@keyframes steam-rise{0%{opacity:0;transform:translateY(4px)}40%{opacity:.85}100%{opacity:0;transform:translateY(-12px)}}
@keyframes awkward-nod{0%,50%,100%{transform:rotate(0)}60%,70%{transform:rotate(7deg) translateY(2px)}}
@keyframes couple-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-3px)}}
@keyframes chat-pop{0%{opacity:0;transform:scale(.6)}6%{opacity:1;transform:scale(1.08)}10%,72%{opacity:1;transform:scale(1)}82%,100%{opacity:0;transform:scale(.9)}}

@media(max-width:1000px) and (min-width:651px){.crew-lineup{gap:18px 12px}.crew-figure .crew-svg{height:150px}.crew-tag{max-width:128px;font-size:12px}.crew-name{font-size:23px}}
@media(max-width:650px){
  .crew-section{padding:58px 14px 44px}.crew-section>.eyebrow{font-size:8px;letter-spacing:1.8px}.crew-section .tape-title{font-size:33px}
  .crew-lineup{gap:14px 10px;margin-top:64px}
  .crew-lineup:after{display:none}
  .crew-figure .crew-svg{height:128px}
  .crew-name{font-size:21px}.crew-tag{font-size:12px;max-width:118px;min-height:0}
  .crew-bubble{width:176px;margin-left:-88px;font-size:12px;padding:10px 11px}
  .crew-mei .crew-bubble{left:0;margin-left:0}
  .crew-couple .crew-bubble,.crew-kayla .crew-bubble{left:auto;right:0;margin-left:0;border-radius:16px 16px 4px 16px}
  .crew-couple .crew-bubble:after,.crew-kayla .crew-bubble:after{left:auto;right:30%;border-right:0;border-left:14px solid transparent}
}
@media(prefers-reduced-motion:reduce){.crew-section *,.how-scene *{animation:none!important;transition:none!important}.sc4-chat{opacity:1}.sc2-x{opacity:1}}