/* The shot: submit choreography, button and chip micro-interactions. Loads last. */

/* ---------- Send it button ---------- */
#contact #fBtn.btn{position:relative;overflow:hidden;min-width:200px;padding-left:28px;padding-right:28px;transition:background .25s cubic-bezier(.66,0,.1,1),color .25s,transform .18s cubic-bezier(.3,2,.5,1)}
#contact #fBtn.btn .lbl{position:relative;z-index:2;display:inline-block;transition:transform .32s cubic-bezier(.66,0,.1,1),opacity .2s}
#contact #fBtn.btn .mini{position:absolute;left:-40px;top:50%;width:22px;height:22px;margin-top:-11px;z-index:1;transition:transform .5s cubic-bezier(.22,1,.36,1);pointer-events:none}
#contact #fBtn.btn:hover .mini,#contact #fBtn.btn:focus-visible .mini{transform:translateX(52px) rotate(380deg)}
#contact #fBtn.btn:hover .lbl,#contact #fBtn.btn:focus-visible .lbl{transform:translateX(14px)}
#contact #fBtn.btn:active{transform:scale(.97)}
#contact #fBtn.btn.shooting,#contact #fBtn.btn.shooting[disabled]{background:transparent;color:var(--text);border-color:rgba(238,238,233,.28);pointer-events:none;opacity:1;cursor:default}
#contact #fBtn.btn.sent[disabled]{opacity:1;cursor:default}
#contact #fBtn.btn.shooting .lbl{opacity:0;transform:translateY(10px)}
#contact #fBtn.btn.shooting .mini{opacity:0}
#contact #fBtn.btn.sent{background:var(--text);color:#050505}
#contact #fBtn.btn.sent .lbl{opacity:1;transform:none}

/* ---------- role chips ---------- */
#contact .chip{transition:background .2s,color .2s,border-color .2s,transform .18s cubic-bezier(.3,2,.5,1)}
#contact .chip:active{transform:scale(.95)}
#contact .chip:has(input:checked){animation:chippop .36s cubic-bezier(.34,2.16,.64,1)}
@keyframes chippop{0%{transform:scale(.92)}60%{transform:scale(1.05)}100%{transform:scale(1)}}

/* ---------- the court: ball + rim, overlaid on the form card ---------- */
#contact .cright{overflow:visible}
#contact .court{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:visible}
#contact .hoop{position:absolute;top:14px;right:22px;width:96px;height:96px;opacity:0;transform:translateY(-6px);transition:opacity .4s cubic-bezier(.66,0,.1,1),transform .4s cubic-bezier(.66,0,.1,1)}
#contact .court.live .hoop{opacity:1;transform:none}
#contact .hoop svg{width:100%;height:100%;overflow:visible}
#contact .hoop .board{stroke:rgba(238,238,233,.55)}
#contact .hoop .rim{stroke:#EEEEE9;transition:stroke .15s}
#contact .hoop.hit .rim{stroke:#C8462C}
#contact .hoop.clank .rim{animation:clank .5s cubic-bezier(.3,2,.5,1)}
@keyframes clank{0%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}100%{transform:translateX(0)}}
#contact .hoop .net{stroke:rgba(238,238,233,.7);transform-origin:50% 0;transform-box:fill-box}
#contact .hoop.hit .net{animation:swish .9s cubic-bezier(.22,1,.36,1)}
@keyframes swish{0%{transform:scaleY(1) scaleX(1)}25%{transform:scaleY(1.28) scaleX(.86)}55%{transform:scaleY(.92) scaleX(1.08)}80%{transform:scaleY(1.05) scaleX(.98)}100%{transform:scaleY(1) scaleX(1)}}
#contact .ball{position:absolute;left:0;top:0;width:44px;height:44px;opacity:0;will-change:transform}
#contact .ball svg{width:100%;height:100%;overflow:visible}
#contact .ball .skin{stroke:#EEEEE9;fill:#080909}
#contact .ball .seam{stroke:#EEEEE9}

/* ---------- sent state ---------- */
#contact form.dim>*:not(.frow):not(.court){opacity:.12;filter:blur(1px);transition:opacity .6s cubic-bezier(.66,0,.1,1),filter .6s}
#contact .swish{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(26px,3vw,44px);z-index:7;opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(.66,0,.1,1) .1s}
#contact .swish.on{opacity:1;pointer-events:auto}
#contact .swish .line{font-family:var(--script);font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;color:#EEEEE9;transform:rotate(-2.5deg);transform-origin:left center;display:inline-block;-webkit-mask-image:linear-gradient(84deg,#000 0 46%,transparent 56%);mask-image:linear-gradient(84deg,#000 0 46%,transparent 56%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:-webkit-mask-position .9s cubic-bezier(.65,0,.35,1) .35s,mask-position .9s cubic-bezier(.65,0,.35,1) .35s}
#contact .swish.on .line{-webkit-mask-position:0% 0;mask-position:0% 0}
#contact .swish p{margin:22px 0 0;max-width:34ch;color:#aaa9a3;font-size:15px;line-height:1.7;opacity:0;transform:translateY(10px);transition:opacity .5s cubic-bezier(.66,0,.1,1) 1.1s,transform .5s cubic-bezier(.66,0,.1,1) 1.1s}
#contact .swish.on p{opacity:1;transform:none}
#contact .swish a{display:inline-flex;align-items:center;gap:12px;margin-top:26px;min-height:44px;color:#EEEEE9;text-decoration:none;font-size:12px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid rgba(238,238,233,.35);opacity:0;transition:opacity .5s 1.4s}
#contact .swish.on a{opacity:1}
#contact .swish a span{transition:transform .32s cubic-bezier(.66,0,.1,1)}
#contact .swish a:hover span{transform:translate(4px,-4px)}

/* ---------- small sparks ---------- */
.polished-nav .nav-action span{display:inline-block;transition:transform .32s cubic-bezier(.3,2,.5,1)}
.polished-nav .nav-action:hover span{transform:translate(3px,-3px)}
.enter-tape span{display:inline-block;transition:transform .32s cubic-bezier(.3,2,.5,1)}
.enter-tape:hover span{transform:translate(5px,-5px)}

@media(max-width:820px){
  #contact .hoop{width:74px;height:74px;top:10px;right:14px}
  #contact .ball{width:36px;height:36px}
  #contact #fBtn.btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  #contact #fBtn.btn .mini,#contact .court{display:none}
  #contact .chip:has(input:checked){animation:none}
  #contact .swish .line{-webkit-mask-image:none;mask-image:none;transition:none}
  #contact .swish p,#contact .swish a{transition:none;opacity:1;transform:none}
}