/* Third Ring motion layer (preview: index-motion.html).
   Everything here is progressive: without motion.js the page is exactly the static page,
   and prefers-reduced-motion gets the finished frames with nothing moving. */

/* ---------------------------------------------------------------- entrances
   only hidden once motion.js has marked the page, so no-JS never loses content */
.mo .rise{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 110ms)}
.mo .rise.up{opacity:1;transform:none}

/* ---------------------------------------------------------------- step illustrations
   pale tile, soft-gradient shapes built from the three-ring mark */
.step .art{position:relative;aspect-ratio:4/3;margin-bottom:18px;overflow:hidden;
  background:linear-gradient(160deg,#F4F7F6 0%,#E6EEEC 100%);border-radius:14px}
.step .art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.art *{transform-box:fill-box;transform-origin:center}
.mo .art:not(.live) *{animation-play-state:paused!important}

/* 01 the call rings out: three rings ripple off the handset */
.a1 .rip{animation:rip 2.4s cubic-bezier(.2,.6,.3,1) infinite;opacity:0}
.a1 .rip:nth-of-type(2){animation-delay:.8s}
.a1 .rip:nth-of-type(3){animation-delay:1.6s}
@keyframes rip{0%{opacity:.95;transform:scale(.55)}100%{opacity:0;transform:scale(1.9)}}
.a1 .hand{animation:buzz 2.4s ease-in-out infinite}
@keyframes buzz{0%,8%,16%,24%,100%{transform:rotate(0)}4%,12%,20%{transform:rotate(-4deg)}}

/* 02 a text goes back: the timer ring closes, then the reply pops out */
.a2 .sweep{stroke-dasharray:352;stroke-dashoffset:352;animation:sweep 5s cubic-bezier(.5,0,.3,1) infinite}
@keyframes sweep{0%{stroke-dashoffset:352}40%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.a2 .bub{animation:bub 5s cubic-bezier(.3,1.5,.5,1) infinite;opacity:0}
.a2 .bub.b2{animation-name:bub2}
@keyframes bub{0%,40%{opacity:0;transform:translate(-26px,14px) scale(.3)}50%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
@keyframes bub2{0%,54%{opacity:0;transform:translate(-18px,10px) scale(.4)}64%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
.a2 .nine{animation:nine 5s ease infinite}
@keyframes nine{0%,36%{opacity:1}44%,100%{opacity:0}}

/* 03 the job lands: three rings slide into the mark, the job card drops beneath */
.a3 .r1{animation:r1 6s cubic-bezier(.3,1.2,.4,1) infinite}
.a3 .r2{animation:r2 6s cubic-bezier(.3,1.2,.4,1) infinite}
.a3 .r3{animation:r3 6s cubic-bezier(.3,1.2,.4,1) infinite}
@keyframes r1{0%,6%{transform:translateY(-70px);opacity:0}28%,86%{transform:none;opacity:1}100%{transform:translateY(-12px);opacity:0}}
@keyframes r2{0%,12%{transform:translate(-80px,30px);opacity:0}34%,86%{transform:none;opacity:1}100%{opacity:0}}
@keyframes r3{0%,18%{transform:translate(80px,30px);opacity:0}40%,86%{transform:none;opacity:1}100%{opacity:0}}
.a3 .card{animation:card 6s cubic-bezier(.3,1.3,.5,1) infinite}
@keyframes card{0%,44%{transform:translateY(40px);opacity:0}56%,86%{transform:none;opacity:1}100%{transform:translateY(10px);opacity:0}}
.a3 .ping{animation:ping 6s ease-out infinite;opacity:0}
@keyframes ping{0%,56%{opacity:0;transform:scale(.4)}62%{opacity:1;transform:scale(1)}74%,100%{opacity:0;transform:scale(2.2)}}

/* ---------------------------------------------------------------- pill words
   a clean rounded outline round a key word, wiped in once */
.pill-w{position:relative;display:inline-block;white-space:nowrap}
.pill-w::after{content:"";position:absolute;inset:-.07em -.2em -.1em;border:max(2.5px,.05em) solid var(--teal);
  border-radius:999px;pointer-events:none}
.mo .pill-w::after{clip-path:inset(0 100% 0 0 round 999px);transition:clip-path 1s cubic-bezier(.6,.1,.3,1) .3s}
.mo .pill-w.up::after{clip-path:inset(0 0 0 0 round 999px)}

/* ---------------------------------------------------------------- hover */
.step .art{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.step:hover .art{transform:translateY(-5px);box-shadow:0 18px 34px -22px rgba(15,22,59,.45)}
.col .ic{transform-origin:left center;transition:transform .4s cubic-bezier(.3,1.6,.5,1),color .3s}
.col:hover .ic{transform:scale(1.22);color:var(--teal)}
.rev{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.rev:hover{transform:translateY(-5px);box-shadow:0 18px 34px -24px rgba(15,22,59,.4)}

/* ---------------------------------------------------------------- page to page
   same-site navigations cross-fade once every page carries this file */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .25s ease both}
::view-transition-new(root){animation:vt-in .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}

@media(prefers-reduced-motion:reduce){
  .mo .rise{opacity:1;transform:none;transition:none}
  .mo .pill-w::after{clip-path:none;transition:none}
  .step:hover .art,.rev:hover,.col:hover .ic{transform:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none}
  /* finished frames, nothing moving */
  .art *{animation:none!important}
  .a1 .rip{opacity:.35}.a1 .rip:nth-of-type(2){opacity:.2;transform:scale(1.35)}.a1 .rip:nth-of-type(3){opacity:.1;transform:scale(1.7)}
  .a2 .sweep{stroke-dashoffset:0}.a2 .bub{opacity:1}.a2 .nine{opacity:0}
  .a3 .ping{opacity:0}
}

/* 02 tick replaces the countdown once the text is out */
.a2 .chk{animation:chk 5s ease infinite;opacity:0}
@keyframes chk{0%,42%{opacity:0;transform:scale(.5)}50%,86%{opacity:1;transform:none}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.a2 .chk{opacity:1}}