/* morsidi.com: Let's Talk motion ("the signal"). Pairs with js/contact-motion.js.
   Every rule here is gated on a class the script adds, so without JS the section is static and fully visible. */

/* pulse layer: rings that leave Mor's avatar and travel across the panel */
.ct-pulse{position:absolute;left:var(--px,10%);top:var(--py,80%);width:0;height:0;z-index:0;pointer-events:none}
.ct-pulse i{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle,transparent 66%,rgba(207,230,255,.55) 69%,rgba(207,230,255,.18) 74%,transparent 78%);
  animation:ct-pulse 2.8s cubic-bezier(.16,1,.3,1) forwards;will-change:transform,opacity}
@keyframes ct-pulse{0%{transform:scale(.9);opacity:0}8%{opacity:1}100%{transform:scale(15);opacity:0}}

/* entrance: the panel opens as a circle from the avatar, the headline rises, the form settles */
.ct-armed .ct-panel{clip-path:circle(0px at var(--px) var(--py))}
.ct-armed .ct-form{opacity:0;transform:translateY(28px) scale(.985)}
.ct-armed .ct-wi{transform:translateY(108%)}
.ct-armed .contact-side>p:not(.ct-k),.ct-armed .ct-direct,.ct-armed .ct-me .ct-ava+span{opacity:0;transform:translateY(12px)}

.ct-play .ct-panel{clip-path:circle(var(--pr) at var(--px) var(--py));transition:clip-path 1.05s cubic-bezier(.16,1,.3,1)}
.ct-play .ct-wi{transform:none;transition:transform .8s cubic-bezier(.16,1,.3,1) calc(.28s + var(--i,0) * 80ms)}
.ct-play .contact-side>p:not(.ct-k),.ct-play .ct-direct,.ct-play .ct-me .ct-ava+span{opacity:1;transform:none;transition:opacity .6s ease .52s,transform .7s cubic-bezier(.16,1,.3,1) .52s}
.ct-play .ct-form{opacity:1;transform:none;transition:opacity .6s ease .4s,transform .9s cubic-bezier(.16,1,.3,1) .4s}

/* headline mask */
.ct-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .1em;margin:0 -.04em -.1em}
.ct-wi{display:inline-block;will-change:transform}

/* the avatar glows while it "sends" */
.ct2 .ct-ava{position:relative;z-index:1;transition:box-shadow .6s ease}
.ct-done .ct-ava{box-shadow:0 0 0 3px rgba(255,255,255,.3),0 0 0 9px rgba(207,230,255,.08)}

/* feedback */
.ct2 .f.ct-shake{animation:ct-shake .38s cubic-bezier(.36,.07,.19,.97)}
@keyframes ct-shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.btn-send.ct-sending{cursor:progress}
.btn-send.ct-sending svg{animation:ct-go .9s cubic-bezier(.45,0,.55,1) infinite}
@keyframes ct-go{0%{transform:translateX(0);opacity:1}55%{transform:translateX(9px);opacity:0}56%{transform:translateX(-7px);opacity:0}100%{transform:translateX(0);opacity:1}}
.btn-send.ct-sent{animation:ct-sent .7s cubic-bezier(.16,1,.3,1)}
@keyframes ct-sent{0%{box-shadow:0 14px 30px -12px rgba(10,89,170,.65),0 0 0 0 rgba(10,89,170,.45)}100%{box-shadow:0 14px 30px -12px rgba(10,89,170,.65),0 0 0 16px rgba(10,89,170,0)}}

/* reduced motion: no spatial movement, no loop; fades and state colour remain */
.ct-still.ct-armed .ct-panel{clip-path:none;opacity:0}
.ct-still.ct-play .ct-panel{opacity:1;transition:opacity .5s ease}
.ct-still.ct-armed .ct-form,.ct-still.ct-armed .contact-side>p:not(.ct-k),.ct-still.ct-armed .ct-direct,.ct-still.ct-armed .ct-me .ct-ava+span{transform:none}
@media (prefers-reduced-motion:reduce){
  .ct-pulse{display:none}
  .ct2 .f.ct-shake{animation:none}
  .btn-send.ct-sending svg{animation:ct-fade 1.2s ease-in-out infinite}
  @keyframes ct-fade{50%{opacity:.35}}
  .btn-send.ct-sent{animation:none}
}