/* Shared Diaspro interactive controls. Page CSS must not redefine the generic .btn contract. */
:root{--spring:cubic-bezier(.34,1.56,.64,1)}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:162px;
  height:50px;
  padding:0 20px;
  border:0;
  border-radius:999px;
  font-family:Outfit,sans-serif;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  isolation:isolate;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.btn .label{position:relative;z-index:3}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:4px}

.btn-lift{
  background:var(--sand);
  color:var(--ink);
  box-shadow:0 8px 0 rgba(30,19,51,.38),0 15px 25px rgba(0,0,0,.22);
  transition:transform .22s var(--spring),box-shadow .22s ease,filter .2s ease;
}
.btn-lift:hover{transform:translateY(-4px);box-shadow:0 12px 0 rgba(30,19,51,.32),0 21px 30px rgba(0,0,0,.26);filter:brightness(1.03)}
.btn-lift:active{transform:translateY(4px);box-shadow:0 3px 0 rgba(30,19,51,.38),0 7px 12px rgba(0,0,0,.2);transition-duration:.08s}

.btn-outline{background:rgba(30,19,51,.4);color:white;border:1px solid rgba(232,209,158,.35)}
.btn-outline::before{
  content:"";
  position:absolute;
  inset:-5px;
  z-index:-1;
  border:2px solid rgba(232,209,158,.65);
  border-radius:53% 47% 55% 45%/47% 54% 46% 53%;
  opacity:.45;
  transition:transform .4s var(--spring),border-radius .4s var(--spring),opacity .25s ease;
}
.btn-outline:hover::before{transform:rotate(3deg) scale(1.035);border-radius:44% 56% 48% 52%/57% 46% 54% 43%;opacity:.9}

.btn-spark{background:var(--terracotta);color:white}
.particle{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--sand);opacity:0;pointer-events:none}
.p1{left:18%;top:4px}.p2{right:17%;top:2px}.p3{left:28%;bottom:1px}.p4{right:26%;bottom:2px}
.btn-spark:hover .p1{animation:pop1 .55s var(--spring) both}
.btn-spark:hover .p2{animation:pop2 .62s var(--spring) .03s both}
.btn-spark:hover .p3{animation:pop3 .58s var(--spring) .06s both}
.btn-spark:hover .p4{animation:pop4 .66s var(--spring) .02s both}
@keyframes pop1{0%{opacity:0;transform:translate(0,0) scale(.3)}60%{opacity:1}100%{opacity:0;transform:translate(-16px,-18px) scale(1.2)}}
@keyframes pop2{0%{opacity:0;transform:translate(0,0) scale(.3)}60%{opacity:1}100%{opacity:0;transform:translate(14px,-21px) scale(.9)}}
@keyframes pop3{0%{opacity:0;transform:translate(0,0) scale(.3)}60%{opacity:1}100%{opacity:0;transform:translate(-13px,18px) scale(1)}}
@keyframes pop4{0%{opacity:0;transform:translate(0,0) scale(.3)}60%{opacity:1}100%{opacity:0;transform:translate(17px,17px) scale(1.15)}}

.btn-liquid{overflow:hidden;background:transparent;color:white;border:1px solid rgba(232,209,158,.42)}
.btn-liquid::before{
  content:"";
  position:absolute;
  inset:-34px -10px;
  z-index:-1;
  background:var(--plum);
  border-radius:46% 54% 58% 42%/43% 49% 51% 57%;
  transform:translateY(65%) rotate(-7deg);
  transition:transform .46s var(--spring),border-radius .46s var(--spring);
}
.btn-liquid::after{
  content:"";
  position:absolute;
  width:74px;
  height:74px;
  right:-20px;
  top:-46px;
  border-radius:50%;
  background:rgba(232,209,158,.18);
  z-index:-1;
  transition:transform .5s var(--spring);
}
.btn-liquid:hover::before{transform:translateY(0) rotate(3deg);border-radius:55% 45% 42% 58%/52% 43% 57% 48%}
.btn-liquid:hover::after{transform:translate(-32px,43px) scale(1.25)}

/* Shared post-it action used by the persistent contact affordance and mobile CTA. */
.postit{
  position:relative;
  width:min(282px,100%);
  aspect-ratio:1/1;
  background:linear-gradient(135deg,var(--sand) 0%,rgba(232,209,158,.88) 100%);
  color:var(--ink);
  padding:32px 26px 26px;
  border:0;
  border-radius:16px;
  box-shadow:0 16px 36px -4px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.08);
  transform:rotate(-1.7deg);
  transition:transform .25s var(--spring),box-shadow .25s ease;
}
.postit::before{
  content:"";
  position:absolute;
  top:-9px;
  left:50%;
  transform:translateX(-50%);
  width:66px;
  height:19px;
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(4px);
  border-radius:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.postit.is-action{
  cursor:pointer;
  display:grid;
  place-items:center;
  text-align:center;
  font-family:"Caveat","Segoe Print","Bradley Hand",cursive;
  font-size:clamp(31px,3vw,42px);
  font-weight:700;
  line-height:.96;
  letter-spacing:.005em;
}
.postit-label{position:relative;z-index:1;display:block;transform:rotate(-.8deg)}
.postit-demo-cursor{
  position:absolute;
  z-index:4;
  left:72%;
  top:65%;
  width:38px;
  height:38px;
  pointer-events:none;
  opacity:0;
  transform:translate(72px,62px) scale(.96);
  animation:postitCursorLoop 6.4s ease-in-out infinite;
  filter:drop-shadow(0 3px 3px rgba(30,19,51,.26));
}
.postit-demo-cursor svg{display:block;width:100%;height:100%;overflow:visible}
.postit-demo-cursor::after{
  content:"";
  position:absolute;
  left:-2px;
  top:-2px;
  width:18px;
  height:18px;
  border:2px solid var(--plum);
  border-radius:50%;
  opacity:0;
  transform:scale(.2);
  animation:postitClickRing 6.4s ease-out infinite;
}
@keyframes postitCursorLoop{
  0%,10%{opacity:0;transform:translate(72px,62px) scale(.96)}
  17%{opacity:1}
  55%{opacity:1;transform:translate(0,0) scale(1)}
  60%{opacity:1;transform:translate(0,0) scale(.82)}
  65%{opacity:1;transform:translate(0,0) scale(1)}
  75%,100%{opacity:0;transform:translate(0,0) scale(1)}
}
@keyframes postitClickRing{
  0%,57%{opacity:0;transform:scale(.2)}
  61%{opacity:.72;transform:scale(.35)}
  70%,100%{opacity:0;transform:scale(1.65)}
}
.postit:hover{transform:rotate(-.6deg) translateY(-5px);box-shadow:0 22px 46px -6px rgba(0,0,0,.68),0 0 0 1px rgba(0,0,0,.08)}
.postit.is-action:focus-visible{outline:3px solid var(--blue);outline-offset:5px}

@media(prefers-reduced-motion:reduce){
  .btn,.btn::before,.btn::after,.postit,.postit::before,.postit::after,.particle,.postit-demo-cursor,.postit-demo-cursor::after{
    animation:none!important;
    transition:none!important;
  }
}