/* Motion layer — the existing layout, artwork and palette remain the base. */
.hero .word,.join h2 i{font-style:normal;display:inline-block}
@media(prefers-reduced-motion:no-preference){
  .hero h1>span{animation:none}
  .hero h1 .word{animation:word-in .68s cubic-bezier(.19,.8,.22,1) both}
  .hero h1 .word:nth-child(2){animation-delay:.12s}
  .hero h1 .work{animation:work-in .82s .19s both;transform-origin:35% 75%}
  .hero h1 b.word{animation-delay:.34s}
  .hero-accent::after{animation-duration:.68s;animation-delay:.5s}
  .hero-content{translate:0 var(--hero-text,0px)}
  .hero-art{translate:0 var(--hero-art,0px)}
  .hero .sticker{translate:var(--px,0px) var(--hero-sticker,0px)}
  .hero .star{animation:star-turn 9s ease-in-out infinite}
  .hero .bolt{animation:bolt-in .58s .45s both,float 5s 1s infinite}
  .ticker div{translate:var(--ticker-shift,0px) 0}
}
@keyframes word-in{from{opacity:0;transform:translateY(.4em) rotate(-4deg) scale(.91)}to{opacity:1;transform:none}}
@keyframes work-in{0%{opacity:0;transform:translateY(.32em) rotate(-6deg) scale(.78)}58%{opacity:1;transform:translateY(-.045em) rotate(1.2deg) scale(1.085);text-shadow:0 0 .22em #fff03780}100%{opacity:1;transform:none}}
@keyframes star-turn{50%{transform:translateY(-8px) rotate(15deg)}}
@keyframes bolt-in{from{opacity:0;scale:.55;rotate:-20deg}to{opacity:1;scale:1;rotate:0deg}}
.section:has(.motion-decor){position:relative;isolation:isolate}
.motion-decor{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none}
.motion-decor img{position:absolute;width:clamp(37px,6.1vw,92px);height:auto;object-fit:contain;opacity:.65;translate:0 var(--drift,0px)}
.highlights .d-boombox{right:20%;top:13%;rotate:-13deg}
.highlights .d-star{right:5%;bottom:2%;width:48px}
.support .d-camera{right:9%;top:12%;rotate:11deg}
.support .d-mic{right:19%;top:23%;width:49px;rotate:-14deg}
.free .d-star{left:33%;top:25%;rotate:9deg}
.free .d-bolt{left:3%;bottom:9%;rotate:-12deg;width:64px}
.steps .d-phone{right:11%;top:12%;rotate:-10deg}
.steps .d-clapper{right:21%;top:24%;width:57px;rotate:12deg}
.roster .d-headphones{left:32%;bottom:9%;width:59px;opacity:.5}
.join .d-heart{right:8%;top:12%;rotate:12deg}
.highlights{isolation:isolate}
.highlights::before,.support::before,.roster::before,.join::before,.free::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:var(--wash,0);background:radial-gradient(ellipse at 76% 20%,#dcc2ff8c,transparent 65%)}
.highlights::before{background:radial-gradient(ellipse at 55% 0%,#cbaaefaa,transparent 64%)}
.free::before{background:linear-gradient(115deg,#230746,#3e0b85d9 54%,#7229c26b)}
.join::before{background:radial-gradient(ellipse at 46% 24%,#7929ecaa,transparent 65%),radial-gradient(ellipse at 82% 52%,#bd53d43b,transparent 42%);transform:scale(var(--beam,1));transform-origin:50% 0}
.join{overflow:hidden}
.rail{padding-block:12px 15px;margin-block:-12px -15px}
.clip{box-shadow:0 7px 0 #2c114e33;transition:transform .26s,box-shadow .26s,border-color .26s}
.clip .cap b{transition:scale .22s}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.clip:hover{transform:translateY(-5px) scale(1.015);border-color:#9f5cf7;box-shadow:0 8px 14px #6220c550,inset 0 0 12px #fff4}.clip:hover .cap b{scale:1.13}.support-card:hover img{animation:illustration-bounce .48s both}}
@keyframes illustration-bounce{35%{translate:0 -9px;scale:1.07}70%{translate:0 1px;scale:.98}100%{translate:0;scale:1}}
@keyframes card-in{from{opacity:.12;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
@keyframes illustration-in{from{opacity:0;transform:translateY(22px) rotate(-12deg) scale(.72)}to{opacity:1;transform:none}}
@keyframes list-in{from{opacity:.12;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes modal-in{from{opacity:0;transform:scale(.88) translateY(18px)}to{opacity:1;transform:none}}
@keyframes wiggle{50%{rotate:7deg;translate:0 calc(var(--drift,0px) - 5px)}}
@media(prefers-reduced-motion:no-preference){
  .rail.motion-enter .clip{animation:card-in .6s var(--card-delay,0s) both}
  dialog[open]{animation:modal-in .32s cubic-bezier(.18,.7,.28,1) both}
  .motion-active .d-boombox{animation:wiggle 3.6s ease-in-out infinite}
  .support-card.seen img{animation:illustration-in .65s calc(var(--delay,0ms) + 100ms) both}
  .free .seen strong{animation:zero-in .88s .12s both}
  .free-panel.seen li{animation:list-in .38s calc(100ms + var(--order,0)*65ms) both}
  .free .motion-decor img{transition:scale .68s cubic-bezier(.17,.75,.3,1.35),opacity .45s;scale:.56;opacity:0}
  .free.motion-active .motion-decor img{scale:1;opacity:.7}
  .free .motion-decor::after{content:"";position:absolute;top:59%;left:4%;width:30%;height:4px;background:#fff037;border-radius:100%;rotate:-13deg;scale:0 1;transform-origin:left;transition:scale .7s .15s}
  .free.motion-active .motion-decor::after{scale:1}
  .join .seen h2 i{animation:word-in .7s both}
  .join .seen h2 i:nth-child(2){animation-delay:.13s}
  .join #entry .pill:hover{transform:translateY(-4px) scale(1.035)}
  .join #entry .pill:active{transform:scale(.96)}
}
@keyframes zero-in{0%{opacity:0;transform:translateY(.13em) scale(.62) rotate(-7deg)}57%{opacity:1;transform:translateY(-.035em) scale(1.09) rotate(2deg)}76%{transform:scale(.97) rotate(-1deg)}100%{transform:none}}
.join #entry .pill{background:var(--yellow)}
.step-grid{--stage-progress:0}
.step-grid::before,.step-grid.seen::before{display:block;animation:none;transform:scaleX(var(--stage-progress));background:#6220c5}
.step-grid li{transition:background .32s,box-shadow .32s}
.step-grid li span{transition:transform .35s;transform-origin:left center}
.step-grid li.stage-done{background:#e5d7ff}
.step-grid li.stage-current{background:var(--yellow);box-shadow:0 4px #6220c5}
.step-grid li.stage-current span{transform:scale(1.19) rotate(-8deg)}
@media(max-width:780px){
  .motion-decor img{opacity:.47}
  .highlights .d-boombox,.support .d-camera,.steps .d-phone{right:3%;top:8%}
  .support .d-mic,.steps .d-clapper,.roster .d-headphones{display:none}
  .free .d-star{left:auto;right:9%;top:13%}
  .free .d-bolt{display:none}
  .step-grid{grid-template-columns:1fr;gap:15px;padding-left:25px}
  .step-grid::before,.step-grid.seen::before{left:5px;right:auto;top:0;bottom:0;width:3px;height:auto;transform:scaleY(var(--stage-progress));transform-origin:top}
  .step-grid li{grid-template-columns:44px 1fr;column-gap:10px;align-items:center}
  .step-grid li b{grid-column:2}
  .step-grid li span{grid-row:1/3;grid-column:1}
  .step-grid li:not(:last-child)::after,.step-grid li:nth-child(2)::after{display:none}
  .step-grid li::before{content:"";position:absolute;left:-27px;top:50%;width:9px;height:9px;translate:0 -50%;border:2px solid #6220c5;border-radius:50%;background:var(--mint)}
  .step-grid li.stage-current::before,.step-grid li.stage-done::before{background:#6220c5}
}
@media(max-width:560px){.join .d-heart{top:3%;right:4%;opacity:.33}.free .motion-decor::after{top:25%;width:44%}.highlights .d-star{display:none}.support .d-camera{top:4%;right:4%;opacity:.37}.steps .d-phone{top:4%;right:4%;opacity:.4}}
@media(prefers-reduced-motion:reduce){.step-grid{--stage-progress:1!important}.step-grid li span{transform:none!important}.free::before,.join::before{opacity:.45}}
@media(prefers-reduced-motion:no-preference){.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(0deg,#210d40b8,transparent 78%);opacity:var(--hero-dark,0)}}
@media(min-width:781px){.step-grid::before,.step-grid.seen::before{left:0;right:0}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.support-card.seen:hover img{animation:illustration-bounce .48s both}}
@media(prefers-reduced-motion:no-preference){.hero.motion-offscreen .hero-art img,.hero.motion-offscreen .sticker{animation-play-state:paused}}
@media(prefers-reduced-motion:reduce){.motion-decor img{translate:none}.join::before{transform:none}}