/* =====================================================================
   CEEK — product scenes on the AI by AMOX page. Built on the .svx scene system
   in services.css (base cards, chips, lists, motion); only this page loads this file.
   Everything here is prefixed svx-a- (scenes: svx--a-call, -chat, -book, -flow).
   Rows 1 and 3 round their top-right corner; rows 2 and 4 round the top-left on
   desktop and the top-right on phones, so those two scenes mirror at 768px.
   ===================================================================== */

/* shared bits: a round icon, a card head with a title and a note */
.svx-a-ic{flex:none;display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;background:var(--mist);color:var(--white)}
.svx-a-ic svg{width:50%;height:50%}
.svx-a-ic--sand{background:var(--sand);color:var(--text)}
.svx-a-head{display:flex;align-items:center;gap:.65em}
.svx-a-head p{min-width:0}
.svx-a-head b{display:block;white-space:nowrap}
.svx-a-head em{display:block;margin-top:.18em;font-size:.72em;color:var(--text-3);white-space:nowrap}

/* ---------- D1 phone assistant: a call comes in, the assistant picks up; every call answered while you were busy ---------- */
.svx--a-call{--a:#91A4B3;--b:#5E7486;--t0:2.85s}
.svx-a-phone{left:9%;top:9%;width:40%;height:82%;padding:.42em;border-radius:2.3em;background:#E9E2D7}
.svx-a-screen{display:flex;flex-direction:column;align-items:center;height:100%;padding:.8em .8em 1.35em;border-radius:1.9em;background:var(--white);text-align:center}
.svx-a-screen .svx-island{margin-bottom:1.55em}
.svx-a-caller{position:relative;z-index:0;flex:none;width:4.8em;height:4.8em;margin:1em 0;border-radius:50%;background:var(--sand);color:var(--mist-2)}
.svx-a-caller svg{display:block;width:100%;height:100%;clip-path:circle(50%)}
.svx-a-caller::before,.svx-a-caller::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--sand);opacity:0}
.svx-a-name{flex:none;width:5.6em;height:.58em;border-radius:99px;background:var(--text)}
.svx-a-sub{flex:none;width:3.6em;height:.36em;margin-top:.55em;border-radius:99px;background:rgba(18,20,23,.14)}
.svx-a-pick{display:flex;flex-direction:column;align-items:center;gap:.5em;margin-top:auto}
.svx-a-pick p{font-size:.78em;line-height:1.25;color:var(--text-2);text-wrap:balance}
.svx-a-answer{position:relative;z-index:0;margin-top:.6em;font-size:1.6em}
.svx-a-answer::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--mist);opacity:0}
.svx-a-log{left:46%;top:38%;width:46%;padding:1em 1.1em .45em}
.svx-a-log .svx-a-head{margin-bottom:.6em}
.svx-a-who{flex:none;width:var(--w);height:.42em;border-radius:99px;background:rgba(18,20,23,.15)}
.svx-a-toggle{left:46%;top:80%}
.svx-a-switch{position:relative;flex:none;width:2.15em;height:1.25em;border-radius:99px;background:var(--mist)}
.svx-a-switch::after{content:"";position:absolute;left:1.05em;top:.17em;width:.91em;height:.91em;border-radius:50%;background:var(--white);box-shadow:0 .06em .18em rgba(18,20,23,.25)}

/* ---------- D2 website chatbot: on the site itself, a visitor asks and the assistant answers ---------- */
.svx--a-chat{--a:#F2E9D9;--b:#D6C4A6;--dot:rgba(106,129,147,.24);--sh:0 .25cqw .5cqw rgba(74,58,36,.06),0 3cqw 6.5cqw -2.2cqw rgba(74,58,36,.34)}
.svx--a-chat::before{-webkit-mask-image:radial-gradient(ellipse 70% 70% at 58% 48%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 70% 70% at 58% 48%,#000 15%,transparent 72%)}
.svx-a-site{left:34%;top:10%;width:59%;overflow:hidden}
.svx-a-page{padding:.95em 1.1em 1.35em}
.svx-a-page>span{display:block}
.svx-a-page .svx-nav{margin-bottom:1em}
.svx-a-band{position:relative;height:5.4em;margin-bottom:1em;overflow:hidden;border-radius:.55em;background:linear-gradient(180deg,#C4D0D9,#9DB0BE)}
.svx-a-band i{position:absolute;left:62%;top:22%;width:1.7em;height:1.7em;border-radius:50%;background:var(--sand)}
.svx-a-band::before,.svx-a-band::after{content:"";position:absolute;border-radius:50%}
.svx-a-band::before{left:-12%;bottom:-62%;width:74%;height:110%;background:var(--paper)}
.svx-a-band::after{right:-18%;bottom:-78%;width:80%;height:120%;background:var(--mist)}
.svx-a-page .svx-h1{width:64%;margin-bottom:.7em}
.svx-a-page .svx-p+.svx-p{margin-top:.5em}
.svx-a-widget{left:7%;top:35%;width:50%;overflow:hidden;transform-origin:0 100%}
.svx-a-whead{display:flex;align-items:center;gap:.6em;padding:.75em 1em;background:var(--mist);color:var(--white)}
.svx-a-whead .svx-bot{background:var(--white)}
.svx-a-whead .svx-bot i{background:var(--mist)}
.svx-a-whead b{display:block;font-size:.92em}
.svx-a-whead em{display:flex;align-items:center;gap:.45em;margin-top:.12em;font-size:.7em;opacity:.85}
.svx-a-whead .svx-live{background:var(--sand)}
.svx-a-widget .svx-msgs{padding:.95em 1em .7em}
.svx-a-quick{display:flex;flex-wrap:wrap;gap:.4em}
.svx-a-quick span{padding:.42em .8em .48em;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(106,129,147,.5);color:var(--mist);font-size:.74em;white-space:nowrap}
.svx-a-input{display:flex;align-items:center;gap:.6em;margin:.25em .8em .8em;padding:.38em .38em .38em 1em;border-radius:99px;background:#F0EAE1;font-size:.8em;color:var(--text-3)}
.svx-a-send{flex:none;display:grid;place-items:center;width:2.1em;height:2.1em;margin-left:auto;border-radius:50%;background:var(--mist);color:var(--white)}
.svx-a-send svg{width:50%;height:50%}
.svx-a-launch{position:absolute;left:7%;top:84.5%;display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:50%;background:var(--mist);color:var(--white);box-shadow:var(--sh);font-size:3cqw}
.svx-a-launch svg{width:52%;height:52%}

/* ---------- D3 bookings: the customer picks a day and a time and books it, no back-and-forth ---------- */
.svx--a-book{--a:#BCC8D2;--b:#8A9DAC}
.svx-a-cal{left:7%;top:33%;width:76%;padding:1.15em 1.3em 1.3em;font-size:3.15cqw}
.svx-a-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.35em;margin:1.05em 0 .8em}
.svx-a-days span{padding:.62em 0 .66em;border-radius:.7em;background:#F1ECE4;font-size:.78em;text-align:center;color:var(--text-2)}
.svx-a-days .is-on{background:var(--mist);color:var(--white)}
.svx-a-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.42em;margin-bottom:1em}
.svx-a-slots span{position:relative;padding:.58em 0 .62em;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(18,20,23,.13);font-size:.8em;text-align:center;font-variant-numeric:tabular-nums}
.svx-a-slots .is-off{background:#F3EFE9;box-shadow:none;color:rgba(18,20,23,.3)}
.svx-a-slots .is-pick{background:var(--mist);box-shadow:none;color:var(--white)}
.svx-a-cta{position:relative;display:block;padding:.72em 0 .78em;border-radius:99px;background:var(--text);color:var(--white);font-size:.84em;text-align:center}
.svx-a-slots .is-pick::after,.svx-a-cta::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 .3em rgba(106,129,147,.38);opacity:0}
.svx-a-done{left:7%;top:12%;display:flex;align-items:center;gap:.7em;padding:.9em 1.6em .9em 1em}
.svx-a-done .svx-ok{width:2.1em;height:2.1em}
.svx-a-done b{display:block}
.svx-a-done em{display:block;margin-top:.18em;font-size:.72em;color:var(--text-3)}

/* ---------- D4 automations: an enquiry comes in, the answer and the follow-up go out on their own ---------- */
.svx--a-flow{--a:#F0E9DE;--b:#CBBDAB;--dot:rgba(106,129,147,.24);--sh:0 .25cqw .5cqw rgba(74,58,36,.06),0 3cqw 6.5cqw -2.2cqw rgba(74,58,36,.34)}
.svx--a-flow::before{-webkit-mask-image:radial-gradient(ellipse 70% 70% at 58% 48%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 70% 70% at 58% 48%,#000 15%,transparent 72%)}
.svx-a-wires{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.svx-a-wires--m{display:none}
.svx-a-path,.svx-a-pulse{fill:none;stroke-linecap:round}
.svx-a-path{stroke:rgba(106,129,147,.5);stroke-width:.42;stroke-dasharray:100 102}
.svx-a-pulse{stroke:var(--mist);stroke-width:1.5;stroke-dasharray:0 200;opacity:0}
/* the pills: sizes in cqw, so the wires (drawn for these numbers) always meet the icons */
.svx-a-node{display:flex;align-items:center;gap:.6em;height:9.6cqw;padding:0 3cqw 0 1.65cqw;border-radius:99px;white-space:nowrap}
.svx-a-node .svx-a-ic{width:6.3cqw;height:6.3cqw}
.svx-a-node>:last-child{margin-left:.3em}
.svx-a-n1{left:54%;top:11%}
.svx-a-n2{left:9%;top:42%}
.svx-a-n3{left:50%;top:72%}
.svx-a-bg{left:9%;top:86%}

/* ---------- motion: play in once per visit, then breathe ---------- */
@keyframes svx-a-ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.6);opacity:0}}
@keyframes svx-a-halo{from{transform:scale(1);opacity:.32}to{transform:scale(1.85);opacity:0}}
@keyframes svx-a-blink{0%,93%,100%{transform:none}96%{transform:scaleY(.12)}}
@keyframes svx-a-pop{0%{transform:scale(.3);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes svx-a-tap{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}
@keyframes svx-a-flow{0%{stroke-dashoffset:0;opacity:0}10%{opacity:1}42%{stroke-dashoffset:-100;opacity:1}50%,100%{stroke-dashoffset:-100;opacity:0}}
/* ambient loops: declared paused, they run while the scene is live (services.css) */
.svx-a-log{animation:svx-bob 7s ease-in-out infinite paused}
.svx-a-done{animation:svx-bob 7s ease-in-out -3s infinite paused}
.svx-a-answer::after{animation:svx-a-halo 2.4s var(--e-out) 2.3s infinite paused}
.svx-a-answer i,.svx-a-whead .svx-bot i{animation:svx-a-blink 4.6s ease-in-out infinite paused}
.svx-a-whead .svx-bot i{animation-delay:-1.8s}
.svx-a-pulse{animation:svx-a-flow 3.6s ease-in-out 2.8s infinite paused}
.svx-a-pulse:last-child{animation-delay:4.6s}
/* what plays in, and how it starts out */
.svx.is-armed :where(.svx-a-phone,.svx-a-pick,.svx-a-log,.svx-a-site,.svx-a-widget,.svx-a-launch,.svx-a-quick,.svx-a-cal,.svx-a-done,.svx-a-node,.svx-a-node .svx-ok){transition:opacity .8s var(--e-out),transform 1.1s var(--e-out)}
.svx.is-armed :where(.svx-a-path){transition:stroke-dashoffset 1s var(--e-out)}
.svx.is-armed :where(.svx-a-switch,.svx-a-days span,.svx-a-slots span){transition:background-color .45s ease,color .45s ease,box-shadow .45s ease}
.svx.is-armed .svx-a-switch::after{transition:transform .5s var(--e-out)}
.svx.is-armed:not(.is-live) .svx-a-phone{opacity:0;transform:translate3d(0,12cqw,0)}
.svx.is-armed:not(.is-live) :is(.svx-a-log,.svx-a-site,.svx-a-cal,.svx-a-node){opacity:0;transform:translate3d(0,5cqw,0)}
.svx.is-armed:not(.is-live) .svx-a-done{opacity:0;transform:translate3d(0,-4cqw,0)}
.svx.is-armed:not(.is-live) :is(.svx-a-pick,.svx-a-quick){opacity:0;transform:translate3d(0,.6em,0)}
.svx.is-armed:not(.is-live) .svx-a-widget{opacity:0;transform:translate3d(0,3cqw,0) scale(.92)}
.svx.is-armed:not(.is-live) .svx-a-launch{opacity:0;transform:scale(.5)}
.svx.is-armed:not(.is-live) .svx-a-node .svx-ok{opacity:0;transform:scale(.3)}
.svx.is-armed:not(.is-live) .svx-a-path{stroke-dashoffset:101}
.svx.is-armed:not(.is-live) .svx-a-switch{background:rgba(18,20,23,.16)}
.svx.is-armed:not(.is-live) .svx-a-switch::after{transform:translateX(-.88em)}
.svx.is-armed:not(.is-live) .svx-a-days .is-on{background:#F1ECE4;color:var(--text-2)}
.svx.is-armed:not(.is-live) .svx-a-slots .is-pick{background:transparent;box-shadow:inset 0 0 0 1px rgba(18,20,23,.13);color:var(--text)}
/* D1: the phone, the ringing, the pick-up, the switch, the log */
.svx.is-live .svx-a-phone{transition-delay:.1s}
.svx.is-live .svx-a-caller::before{animation:svx-a-ring 1.2s var(--e-out) .5s 2}
.svx.is-live .svx-a-caller::after{animation:svx-a-ring 1.2s var(--e-out) 1.1s 2}
.svx.is-live .svx-a-answer{animation:svx-press .4s ease 1.95s both}
.svx.is-live .svx-a-pick{transition-delay:2.15s}
.svx.is-live .svx-a-toggle{transition-delay:.55s}
.svx.is-live .svx-a-switch,.svx.is-live .svx-a-switch::after{transition-delay:1.2s}
.svx.is-live .svx-a-log{transition-delay:2.5s}
/* D2: the site, the bubble, the widget opens, the question, the answer */
.svx.is-live .svx-a-site{transition-delay:.1s}
.svx.is-live .svx-a-launch{transition-delay:.45s}
.svx.is-live .svx-a-launch svg{animation:svx-press .35s ease .95s both}
.svx.is-live .svx-a-widget{transition-delay:1.05s}
.svx.svx--a-chat.is-live .svx-msgs>.svx-msg:nth-child(1){transition-delay:1.6s}
.svx.svx--a-chat.is-live .svx-typing{animation-delay:2.25s}
.svx.svx--a-chat.is-live .svx-turn .svx-msg{transition-delay:3.4s}
.svx.is-live .svx-a-quick{transition-delay:3.9s}
/* D3: the card, the day, the time (a tap), the button, the confirmation */
.svx.is-live .svx-a-cal{transition-delay:.1s}
.svx.is-live .svx-a-days .is-on{transition-delay:1s}
.svx.is-live .svx-a-slots .is-pick{transition-delay:1.65s}
.svx.is-live .svx-a-slots .is-pick::after{animation:svx-a-tap .7s var(--e-out) 1.6s}
.svx.is-live .svx-a-cta::after{animation:svx-a-tap .7s var(--e-out) 2.3s}
.svx.is-live .svx-a-cta{animation:svx-press .4s ease 2.3s both}
.svx.is-live .svx-a-done{transition-delay:2.75s}
.svx.is-live .svx-a-done .svx-ok{animation:svx-a-pop .6s var(--e-spring) 3.15s both}
/* D4: each step lands, the wire draws down to the next, its tick pops */
.svx.is-live .svx-a-n1{transition-delay:.2s}
.svx.is-live .svx-a-path:first-child{transition-delay:.75s}
.svx.is-live .svx-a-n2{transition-delay:1.15s}
.svx.is-live .svx-a-n2 .svx-ok{transition-delay:1.6s}
.svx.is-live .svx-a-path:nth-child(2){transition-delay:1.7s}
.svx.is-live .svx-a-n3{transition-delay:2.1s}
.svx.is-live .svx-a-n3 .svx-ok{transition-delay:2.55s}
.svx.is-live .svx-a-bg{transition-delay:2.9s}

/* phones: rows 2 and 4 round the top-right too, so their scenes mirror */
@media (max-width:768px){
  .svx--a-chat::before,.svx--a-flow::before{-webkit-mask-image:radial-gradient(ellipse 70% 70% at 42% 48%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 70% 70% at 42% 48%,#000 15%,transparent 72%)}
  .svx-a-site{left:7%}
  .svx-a-widget{left:43%;transform-origin:100% 100%}
  .svx-a-band i{left:24%}
  .svx-a-launch{left:auto;right:7%}
  .svx-a-wires--d{display:none}
  .svx-a-wires--m{display:block}
  .svx-a-n1{left:8%}
  .svx-a-n2{left:46%}
  .svx-a-n3{left:8%}
  .svx-a-bg{left:auto;right:8%}
}

/* narrow scenes (phones, small laptops): the smallest notes step up a little */
@container (max-width:440px){
  .svx--a-call .svx-label,.svx-a-head em,.svx-a-done em{font-size:.8em}
  .svx-a-whead em{font-size:.76em}
  .svx-a-quick span{font-size:.8em}
  .svx-a-days span,.svx-a-slots span{font-size:.86em}
}

@media (prefers-reduced-motion:reduce){.svx *::before{animation:none!important}}