/* Animated moments: bricks that drop and click together, content that rises
   in step by step, and the thank-you tick after payment. Used by the account
   pages and the new pet flow. */
@keyframes pb-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pb-drop{0%{opacity:0;transform:translate(-50%,-120px) rotate(var(--tilt,0deg))}60%{opacity:1;transform:translate(-50%,3px) rotate(0)}75%{transform:translate(-50%,-4px)}100%{opacity:1;transform:translate(-50%,0)}}
@keyframes pb-squash{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.94)}}
@keyframes pb-pop{0%{opacity:0;transform:scale(.3)}55%{opacity:1;transform:scale(1.1)}75%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes pb-ring{from{box-shadow:0 0 0 0 rgba(29,185,113,.55)}to{box-shadow:0 0 0 46px rgba(29,185,113,0)}}
@keyframes pb-draw{to{stroke-dashoffset:0}}
@keyframes pb-burst{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--spin)) scale(1)}}
@keyframes pb-leave{to{opacity:0;visibility:hidden}}

/* A centred column whose children rise in turn (set --d on each child). */
.moment{display:grid;justify-items:center;text-align:center}
.moment>*{animation:pb-rise .65s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0) * 110ms + var(--after,0ms))}
.moment .lead{max-width:30ch;margin-left:auto;margin-right:auto}
.moment .pb-card,.moment .card,.moment .journey-card{width:min(520px,100%);text-align:left}
body.thanking .moment>*{--after:2500ms}

/* Three bricks drop one after another and click into a stack. */
.brick-stack{position:relative;width:150px;height:112px;margin:0 auto 6px}
.brick-stack>i{position:absolute;left:50%;bottom:0;height:30px;border-radius:7px;background:var(--c);box-shadow:inset 0 -6px 0 var(--lip);
  animation:pb-drop .75s cubic-bezier(.3,1.3,.5,1) both,pb-squash .25s ease-out both;animation-delay:calc(var(--n) * 170ms + 200ms + var(--after,0ms)),calc(var(--n) * 170ms + 650ms + var(--after,0ms))}
.brick-stack>i::before{content:"";position:absolute;left:7px;right:7px;top:-8px;height:9px;border-radius:4px 4px 0 0;
  background:repeating-linear-gradient(90deg,var(--c) 0 16px,transparent 16px 24px);filter:brightness(1.08)}
.brick-stack>i:nth-child(1){--n:0;--c:var(--pb-red);--lip:var(--pb-red-lip);width:140px;--tilt:-8deg}
.brick-stack>i:nth-child(2){--n:1;--c:var(--pb-yellow);--lip:var(--pb-yellow-lip);width:104px;bottom:38px;margin-left:-12px;--tilt:10deg}
.brick-stack>i:nth-child(3){--n:2;--c:#fff;--lip:#C9CEEA;width:62px;bottom:76px;margin-left:10px;--tilt:-12deg}
body.thanking .brick-stack>i{--after:2500ms}

/* The pet's name, big and friendly. */
.name-input.pb-input{height:68px;font-size:clamp(24px,4vw,30px);font-weight:800;text-align:center;letter-spacing:-.02em;border-radius:20px;transition:border-color .2s,box-shadow .2s,transform .2s}
.name-input.pb-input:focus{transform:scale(1.015)}

/* After payment: a green tick draws itself, bricks burst out, then it fades away. */
.thanks-overlay{position:fixed;inset:0;z-index:60;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;color:#fff;
  background:var(--pb-night);background-image:var(--pb-stud-grid);background-size:28px 28px;animation:pb-leave .5s ease 2.2s forwards}
.thanks-tick{position:relative;width:136px;height:136px;margin-bottom:12px;border-radius:50%;background:var(--pb-green);display:grid;place-items:center;
  animation:pb-pop .6s cubic-bezier(.3,1.5,.5,1) both,pb-ring 1.1s ease-out .45s}
.thanks-tick svg{width:70px;height:70px}
.thanks-tick path{fill:none;stroke:#fff;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;animation:pb-draw .45s ease-out .4s forwards}
.thanks-tick i{position:absolute;left:50%;top:50%;width:18px;height:11px;margin:-5px -9px;border-radius:3px;background:var(--c);opacity:0;animation:pb-burst .9s cubic-bezier(.2,.7,.3,1) .55s both}
.thanks-overlay h2{margin:0;font-size:clamp(34px,6vw,56px);line-height:1;letter-spacing:-.04em;animation:pb-rise .55s cubic-bezier(.2,.8,.2,1) .55s both}
.thanks-overlay p{margin:0;font-size:20px;color:var(--pb-on-night-muted);animation:pb-rise .55s cubic-bezier(.2,.8,.2,1) .7s both}

@media(prefers-reduced-motion:reduce){
  .moment>*,.brick-stack>i,.thanks-tick,.thanks-tick path,.thanks-overlay h2,.thanks-overlay p{animation:none!important;opacity:1;stroke-dashoffset:0}
  .brick-stack>i{transform:translateX(-50%)}
  .thanks-tick i{display:none}
  .thanks-overlay{animation:none}
  body.thanking .moment>*{--after:0ms}
}

/* Account pages: the sign-up choices arrive one after another. */
.moment .journey-card{margin-top:22px}
.moment .journey-main h1,.journey-main.moment h1{margin:8px 0 14px}
.moment .auth-options>*{animation:pb-rise .5s cubic-bezier(.2,.8,.2,1) both}
.moment .auth-options>*:nth-child(1){animation-delay:.1s}
.moment .auth-options>*:nth-child(2){animation-delay:.2s}
.moment .auth-options>*:nth-child(3){animation-delay:.3s}
.moment .auth-options>*:nth-child(4){animation-delay:.4s}
.moment .auth-options>*:nth-child(n+5){animation-delay:.5s}
.moment .pb-input:focus{transform:scale(1.01)}
.moment .pb-input{transition:border-color .2s,box-shadow .2s,transform .2s}
@media(prefers-reduced-motion:reduce){.moment .auth-options>*{animation:none!important}}