/* =====================================================================
   CEEK — product scenes on the Websites page. Built on the .svx scene system
   in services.css (base cards, chips, lists, motion); only this page loads this file.
   ===================================================================== */

/* shared: skeleton text */
.svx-w-bar{display:block;width:94%;height:.34em;border-radius:99px;background:rgba(18,20,23,.14)}
.svx-w-bar--h{height:.9em;border-radius:.24em;background:var(--text)}
.svx-w-bar--70{width:70%}
.svx-w-bar--60{width:60%}

/* ---------- A1 Website-Check: we look at your site and put what we find on one page ---------- */
.svx--w-check{--a:#9DAFBC;--b:#62788A}
/* your site, behind the report: one picture doesn't load */
.svx-w-site{left:50%;top:36%;width:43%;overflow:hidden;font-size:2.8cqw}
.svx-w-site .svx-url{margin:0 0 0 auto}
.svx-w-site .svx-bar::after{display:none}
.svx-w-site-page{padding:.95em 1.1em 1.2em}
.svx-w-site-nav{display:flex;align-items:center;justify-content:flex-end;gap:.7em;margin-bottom:.95em}
.svx-w-site-nav span{width:1.8em;height:.32em;border-radius:99px;background:rgba(18,20,23,.16)}
.svx-w-site-nav em{width:2.8em;height:1.2em;border-radius:99px;background:var(--mist)}
.svx-w-broken{position:relative;display:grid;place-items:center;aspect-ratio:1.8;padding-left:24%;border-radius:.5em;box-shadow:inset 0 0 0 .12em rgba(18,20,23,.14);background:#F3EEE6;color:var(--text-3)}
.svx-w-broken svg{width:30%;height:auto}
.svx-w-site-page>.svx-w-bar{margin:1em 0 0 auto;width:62%}
.svx-w-site-page>.svx-w-bar+.svx-w-bar{margin-top:.55em;width:44%}
.svx-w-pin{position:absolute;right:-.5em;top:-.5em;display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--white);color:var(--text);box-shadow:inset 0 0 0 .12em var(--mist),0 .2em .5em rgba(18,20,23,.18)}
.svx-w-pin svg{width:66%;height:66%}
.svx-w-pin::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 .12em var(--mist);opacity:0}
/* the report: one page, four questions, plain answers */
.svx-w-sheet{left:8%;top:9%;width:53%;padding:1.25em 1.35em .85em;border-radius:1.8cqw;font-size:3.1cqw}
.svx-w-sheet-head{display:flex;align-items:center;gap:.55em}
.svx-w-eyes{flex:none;width:2.2em}
.svx-w-eyes svg{width:100%;height:auto;overflow:visible}
.svx-w-sheet-head b{font-size:.8em}
.svx-w-sheet-head em{margin-left:auto;padding:.42em .72em .44em;border-radius:99px;background:var(--sand);font-size:.62em;font-weight:500;letter-spacing:.07em;text-transform:uppercase}
.svx-w-title{margin:.7em 0 .55em;font-family:var(--serif);font-size:1.9em;line-height:1.02;letter-spacing:-.005em}
.svx-w-qs li{display:flex;align-items:flex-start;gap:.65em;padding:.68em 0 .72em;border-top:1px solid rgba(18,20,23,.08)}
.svx-w-qs .svx-ok{margin-top:-.08em}
.svx-w-qs p{flex:1;min-width:0}
.svx-w-qs b{display:block;font-size:.86em;line-height:1.25;white-space:nowrap}
.svx-w-qs i{display:block;width:var(--w,78%);height:.3em;margin-top:.6em;border-radius:99px;background:rgba(18,20,23,.12)}
.svx-w-ok--x{background:var(--white);color:var(--text);box-shadow:inset 0 0 0 .1em var(--mist)}
.svx-w-plain{left:38%;top:77%}
.svx-w-doc{flex:none;display:flex;flex-direction:column;justify-content:center;gap:.2em;width:1.25em;height:1.55em;padding:0 .26em;border-radius:.24em;background:var(--paper);box-shadow:inset 0 0 0 1px rgba(18,20,23,.12)}
.svx-w-doc i{height:.13em;border-radius:99px;background:rgba(18,20,23,.24)}
.svx-w-doc i:first-child{width:60%;background:var(--mist)}

/* ---------- A2 Website Rescue: the site comes back online, then moves to hosting in your own name ---------- */
.svx--w-rescue{--a:#F3ECE2;--b:#D6C6AD;--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-w-rb{left:35%;top:10%;width:58%;overflow:hidden}
.svx-w-rb-page{display:grid;padding:1em 1.15em 1.3em}
.svx-w-rb-page>*{grid-area:1/1}
.svx-w-rb-nav{display:flex;align-items:center;gap:.7em;margin-bottom:1.2em}
.svx-w-rb-nav b{width:1.1em;height:1.1em;margin-right:auto;border-radius:50%;background:var(--mist)}
.svx-w-rb-nav span{width:1.8em;height:.32em;border-radius:99px;background:rgba(18,20,23,.16)}
.svx-w-rb-nav em{width:3em;height:1.25em;border-radius:99px;background:var(--text)}
.svx-w-rb-hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:1em}
.svx-w-rb-text{display:flex;flex-direction:column;gap:.5em}
.svx-w-rb-text .svx-w-bar--70{margin-bottom:.4em}
.svx-w-rb-img{position:relative;aspect-ratio:1/.92;overflow:hidden;border-radius:.5em .5em 2em .5em;background:linear-gradient(180deg,#DCE3E8,#B9C6D0)}
.svx-w-rb-img i{position:absolute;left:50%;bottom:-38%;width:96%;aspect-ratio:1;border-radius:50%;background:var(--mist-2);translate:-50% 0}
.svx-w-rb-img::before{content:"";position:absolute;right:20%;top:20%;width:24%;aspect-ratio:1;border-radius:50%;background:var(--white)}
/* the crash: only shown while the scene waits to play, then the site comes back */
.svx-w-rb-down{place-self:center;display:grid;place-items:center;width:3.2em;height:3.2em;border-radius:50%;background:var(--sand);color:var(--text);opacity:0;transform:scale(.6)}
.svx-w-rb-down svg{width:52%;height:52%}
.svx-w-status{left:auto;right:7%;top:78%;display:grid}
.svx-w-status>span{grid-area:1/1;display:flex;align-items:center;gap:.5em}
.svx-w-status .svx-ok{width:1.25em;height:1.25em}
.svx-w-was{opacity:0}
.svx-w-move{left:7%;top:49%;width:54%;padding:1em 1.15em 1.05em}
.svx-w-move>b{display:block;margin-bottom:.85em;font-size:.92em}
.svx-w-track{display:flex;align-items:center;gap:.6em}
.svx-w-srv{position:relative;flex:none;display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:.6em;background:#F0EAE1;color:var(--text-3)}
.svx-w-srv svg{width:60%;height:60%}
.svx-w-srv--you{background:var(--mist);color:var(--white)}
.svx-w-srv--you .svx-ok{position:absolute;right:-.45em;top:-.45em;width:1.2em;height:1.2em;background:var(--white);color:var(--mist);box-shadow:0 .1em .35em rgba(18,20,23,.22)}
.svx-w-path{position:relative;flex:1;height:.16em;border-radius:99px;background:repeating-linear-gradient(90deg,rgba(18,20,23,.22) 0 .42em,transparent .42em .78em)}
.svx-w-path i{position:absolute;inset:-.05em 0;border-radius:99px;background:var(--mist);transform-origin:0 50%}
.svx-w-track-labels{display:flex;justify-content:space-between;margin-top:.6em;font-size:.72em;color:var(--text-3)}
.svx-w-track-labels em:last-child{color:var(--text)}
/* phones round the top-right corner instead, so the scene turns around */
@media (max-width:768px){
  .svx-w-rb{left:7%;width:58%}
  .svx-w-move{left:39%}
  .svx-w-status{left:7%;right:auto}
}

/* ---------- A3 New Website: three sizes, a staircase of sites that leaves the corner open ---------- */
.svx--w-sizes{--a:#B6C3CD;--b:#8597A7;--dot:rgba(251,248,243,.3)}
.svx-w-size{left:7%;padding:1em 1.1em 1.1em}
.svx-w-size--1{top:10%;width:42%;--s:.7s}
.svx-w-size--2{top:37%;width:64%;--s:.95s}
.svx-w-size--3{top:64%;width:86%;--s:1.2s}
.svx-w-size-head{display:flex;align-items:center;gap:.55em;margin-bottom:.85em;white-space:nowrap}
.svx-w-size-head em{font-size:.74em;color:var(--text-3)}
.svx-w-pages{display:flex;gap:.55em}
.svx-w-pages i{position:relative;flex:none;width:2.45em;aspect-ratio:3/4;border-radius:.4em;background:#F1ECE4}
/* page thumbnails of four kinds: a picture page, a text page, a gallery, a contact page */
.svx-w-pages i::before,.svx-w-pages i::after{content:"";position:absolute}
.svx-w-pages i::before{left:.3em;right:.3em;top:.3em;height:42%;border-radius:.22em;background:var(--mist-2)}
.svx-w-pages i::after{left:.3em;bottom:.48em;width:58%;height:.2em;border-radius:99px;background:rgba(18,20,23,.2);box-shadow:0 -.42em 0 rgba(18,20,23,.1)}
.svx-w-pages i:nth-child(4n+2)::before{right:auto;top:.42em;width:62%;height:.26em;border-radius:99px;background:rgba(18,20,23,.5);box-shadow:0 .48em 0 rgba(18,20,23,.13),0 .86em 0 rgba(18,20,23,.13),0 1.24em 0 rgba(18,20,23,.13)}
.svx-w-pages i:nth-child(4n+2)::after{width:1.15em;height:.44em;box-shadow:none;background:var(--mist)}
.svx-w-pages i:nth-child(4n+3)::before{height:56%;background:linear-gradient(var(--sand),var(--sand)) 0 0/47% 46% no-repeat,linear-gradient(var(--taupe),var(--taupe)) 100% 0/47% 46% no-repeat,linear-gradient(var(--taupe),var(--taupe)) 0 100%/47% 46% no-repeat,linear-gradient(var(--mist-2),var(--mist-2)) 100% 100%/47% 46% no-repeat}
.svx-w-pages i:nth-child(4n+3)::after{box-shadow:none}
.svx-w-pages i:nth-child(4n)::before{left:50%;right:auto;top:.42em;width:1.05em;height:1.05em;border-radius:50%;background:var(--sand);translate:-50% 0}
.svx-w-pages i:nth-child(4n)::after{left:50%;width:62%;translate:-50% 0}
.svx-w-pages i:nth-child(2){--i:1}
.svx-w-pages i:nth-child(3){--i:2}
.svx-w-pages i:nth-child(4){--i:3}
.svx-w-pages i:nth-child(5){--i:4}
.svx-w-pages i:nth-child(6){--i:5}
.svx-w-pages i:nth-child(7){--i:6}
.svx-w-pages i:nth-child(8){--i:7}
.svx-w-pages i:nth-child(9){--i:8}
/* the large site: every page in more than one language */
.svx-w-size--3 .svx-w-pages i{box-shadow:.24em -.24em 0 -.03em #E7E0D5}
.svx-w-langs{position:relative;display:flex;margin-left:auto;padding:.18em;border-radius:99px;background:#EFE9E0}
.svx-w-langs em{position:relative;width:2.2em;padding:.34em 0 .38em;font-size:.66em;text-align:center;color:var(--text-2)}
.svx-w-lang-on{position:absolute;left:.18em;top:.18em;bottom:.18em;width:calc((100% - .36em) / 3);border-radius:99px;background:var(--white);box-shadow:0 .08em .3em rgba(18,20,23,.16)}

/* ---------- A4 Webshop: your shop on a phone, a new order, and care for the shop ---------- */
.svx--w-shop{--a:#E7DDD0;--b:#C1B19F;--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,.36)}
.svx-w-phone{left:34.5%;top:8.5%;width:31%;height:100%;padding:.42em;border-radius:2.1em;background:#EFE8DE}
.svx-w-screen{height:100%;overflow:hidden;padding:.6em .72em;border-radius:1.72em;background:var(--white)}
.svx-w-island{display:block;width:2.8em;height:.8em;margin:0 auto .85em;border-radius:99px;background:var(--text)}
.svx-w-shop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7em}
.svx-w-menu{display:flex;flex-direction:column;gap:.24em;width:1em}
.svx-w-menu i{height:.14em;border-radius:99px;background:var(--text)}
.svx-w-menu i:last-child{width:62%}
.svx-w-shop-head b{font-size:.95em;letter-spacing:-.04em}
.svx-w-shop-head b em{color:var(--mist)}
.svx-w-bag{position:relative;width:1.2em;height:1.2em}
.svx-w-bag svg{width:100%;height:100%}
.svx-w-bag i{position:absolute;right:-.1em;top:-.06em;width:.52em;height:.52em;border-radius:50%;background:var(--mist);box-shadow:0 0 0 .12em var(--white)}
.svx-w-product{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:.9em;background:radial-gradient(ellipse 34% 7% at 50% 85%,rgba(74,58,36,.16),rgba(74,58,36,0)),linear-gradient(180deg,#F2EADD,#E2D3BC)}
.svx-w-vase{position:absolute;left:50%;bottom:15%;width:46%;aspect-ratio:1/1.3;translate:-50% 0}
.svx-w-vase::before{content:"";position:absolute;left:0;right:0;bottom:0;height:76%;border-radius:50% 50% 42% 42% / 58% 58% 42% 42%;background:radial-gradient(circle at 34% 30%,#9DB0BE,var(--mist) 62%)}
.svx-w-vase::after{content:"";position:absolute;left:33%;right:33%;top:0;height:30%;border-radius:.25em .25em 0 0;background:linear-gradient(90deg,#7C92A3,var(--mist))}
.svx-w-swipe{display:flex;justify-content:center;gap:.26em;margin:.6em 0 .65em}
.svx-w-swipe i{width:.32em;height:.32em;border-radius:99px;background:rgba(18,20,23,.2)}
.svx-w-swipe i:first-child{width:.95em;background:var(--text)}
.svx-w-bar--name{width:72%;height:.5em;background:var(--text)}
.svx-w-bar--price{width:34%;height:.5em;margin-top:.45em;background:var(--mist-2)}
.svx-w-buy{display:flex;align-items:center;justify-content:center;gap:.4em;margin-top:.85em;padding:.62em 0 .66em;border-radius:99px;background:var(--text);color:var(--white);font-size:.8em}
.svx-w-buy svg{width:1.1em;height:1.1em}
.svx-w-more{display:grid;grid-template-columns:1fr 1fr;gap:.45em;margin-top:.85em}
.svx-w-more i{position:relative;aspect-ratio:1;overflow:hidden;border-radius:.6em;background:#F1ECE4}
.svx-w-more i::before,.svx-w-more i::after{content:"";position:absolute;left:50%;translate:-50% 0}
.svx-w-more i:first-child::before{bottom:22%;width:52%;height:30%;border-radius:0 0 50% 50% / 0 0 100% 100%;background:var(--taupe)}
.svx-w-more i:first-child::after{bottom:52%;width:60%;height:.14em;border-radius:99px;background:#B7AA9B}
.svx-w-more i:last-child::before{bottom:22%;width:34%;height:46%;border-radius:.18em .18em .5em .5em;background:var(--mist-2)}
.svx-w-more i:last-child::after{bottom:44%;width:18%;height:.9em;border-radius:50%;translate:110% 0;box-shadow:inset -.16em 0 0 .02em var(--mist-2)}
.svx-w-order{left:7%;top:46%;width:37%;display:flex;align-items:center;gap:.6em;padding:.8em .9em}
.svx-w-order-ic{position:relative;flex:none;width:2.3em;height:2.3em;overflow:hidden;border-radius:.6em;background:linear-gradient(180deg,#F2EADD,#E2D3BC)}
.svx-w-order-ic .svx-w-vase{bottom:14%;width:52%}
.svx-w-order p{flex:1;min-width:0}
.svx-w-order b{display:block}
.svx-w-order p i{display:block;width:80%;height:.3em;margin-top:.45em;border-radius:99px;background:rgba(18,20,23,.14)}
.svx-w-care{left:57%;top:73%}
.svx-w-shield{flex:none;width:1.35em;height:1.35em;color:var(--mist)}
.svx-w-shield svg{width:100%;height:100%}

/* small scenes (phones, narrow tablets): the smallest labels speak up a little */
@container (max-width:480px){
  .svx-w-site .svx-url,.svx-w-rb .svx-url{font-size:.84em}
  .svx-w-sheet-head em{font-size:.68em}
  .svx-w-track-labels{font-size:.8em}
  .svx-w-size-head em{font-size:.82em}
  .svx-w-langs em{font-size:.74em}
}

/* ---------- motion: the house system — hidden only while armed, played in while live, loops paused until then ---------- */
@keyframes svx-w-lang{0%,27%{transform:none}33%,60%{transform:translateX(100%)}66%,93%{transform:translateX(200%)}100%{transform:none}}
.svx-w-lang-on{animation:svx-w-lang 7.5s var(--e-out) 2.4s infinite paused}
.svx-w-pin::after{animation:svx-ping 2.4s var(--e-out) 2.2s infinite paused}
.svx-w-move,.svx-w-order{animation:svx-bob 7s ease-in-out -1s infinite paused}
.svx-w-bag i::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;opacity:0;animation:svx-ping 2.4s var(--e-out) 2.6s infinite paused}

/* waiting = armed and not yet live, or live while the page's intro (preloader or curtain) still covers it:
   a scene that is already in view on load plays as the intro lifts, not underneath it */
.svx.is-armed :where(.svx-w-site,.svx-w-sheet,.svx-w-qs li,.svx-w-qs .svx-ok,.svx-w-pin,.svx-w-rb,.svx-w-rb-site,.svx-w-rb-down,.svx-w-was,.svx-w-now,.svx-w-move,.svx-w-path i,.svx-w-srv--you .svx-ok,.svx-w-size,.svx-w-pages i,.svx-w-phone,.svx-w-order,.svx-w-bag i){transition:opacity .8s var(--e-out),transform 1.1s var(--e-out)}
:is(.svx.is-armed:not(.is-live),html.is-first .svx.is-armed,html.is-entering .svx.is-armed) :is(.svx-w-site,.svx-w-rb,.svx-w-move,.svx-w-order){opacity:0;transform:translate3d(0,5cqw,0)}
:is(.svx.is-armed:not(.is-live),html.is-first .svx.is-armed,html.is-entering .svx.is-armed) .svx-w-sheet{opacity:0;transform:translate3d(0,8cqw,0)}
:is(.svx.is-armed:not(.is-live),html.is-first .svx.is-armed,html.is-entering .svx.is-armed) .svx-w-phone{opacity:0;transform:translate3d(0,14cqw,0)}
:is(.svx.is-armed:not(.is-live),html.is-first .svx.is-armed,html.is-entering .svx.is-armed) .svx-w-qs li{opacity:0;transform:translate3d(0,.7em,0)}
:is(.svx.is-armed:not(.is-live),html.is-first .svx.is-armed,html.is-entering .svx.is-armed) :is(.svx-w-qs .svx-ok,.svx-w-pin,.svx-w-srv--you .svx-ok){opacity:0;transform:scale(.3)}
:is(.svx.is-armed:not(.is-live),html.is-first .svx.is-armed,html.is-entering .svx.is-armed) .svx-w-rb-site{opacity:.12}
:is(.svx.is-armed:not(.is-live),html.is-first .svx.is-armed,html.is-entering .svx.is-armed) .svx-w-rb-down{opacity:1;transform:none}
:is(.svx.is-armed:not(.is-live),html.is-first .svx.is-armed,html.is-entering .svx.is-armed) .svx-w-was{opacity:1}
:is(.svx.is-armed:not(.is-live),html.is-first .svx.is-armed,html.is-entering .svx.is-armed) .svx-w-now{opacity:0}
:is(.svx.is-armed:not(.is-live),html.is-first .svx.is-armed,html.is-entering .svx.is-armed) .svx-w-path i{transform:scaleX(0)}
:is(.svx.is-armed:not(.is-live),html.is-first .svx.is-armed,html.is-entering .svx.is-armed) .svx-w-size{opacity:0;transform:translate3d(-4cqw,0,0)}
:is(.svx.is-armed:not(.is-live),html.is-first .svx.is-armed,html.is-entering .svx.is-armed) .svx-w-pages i{opacity:0;transform:scale(.6)}
:is(.svx.is-armed:not(.is-live),html.is-first .svx.is-armed,html.is-entering .svx.is-armed) .svx-w-bag i{transform:scale(0)}
html:is(.is-first,.is-entering) .svx.is-armed :is(.svx-w-plain,.svx-w-status,.svx-w-care){opacity:0;transform:translate3d(0,5cqw,0)}

/* A1: the site, the report, each answer, the broken picture, the note */
.svx.is-live .svx-w-site{transition-delay:.1s}
.svx.is-live .svx-w-sheet{transition-delay:.3s}
.svx.is-live .svx-w-qs li{transition-delay:calc(.85s + var(--k,0) * .16s)}
.svx.is-live .svx-w-qs .svx-ok{transition-delay:calc(1.05s + var(--k,0) * .16s)}
.svx.is-live .svx-w-pin{transition-delay:1.6s}
.svx.is-live .svx-w-plain{transition-delay:1.95s}
/* A2: down, then back online; then the move to your own hosting */
.svx.is-live .svx-w-rb{transition-delay:.1s}
.svx.is-live .svx-w-status{transition-delay:.45s}
.svx.is-live .svx-w-rb-down{transition-delay:1.5s}
.svx.is-live .svx-w-rb-site{transition-duration:1.2s;transition-delay:1.65s}
.svx.is-live .svx-w-was{transition-duration:.35s;transition-delay:1.5s}
.svx.is-live .svx-w-now{transition-delay:1.75s}
.svx.is-live .svx-w-move{transition-delay:2.1s}
.svx.is-live .svx-w-path i{transition:transform 1.4s var(--e-io) 2.7s}
.svx.is-live .svx-w-srv--you .svx-ok{transition-delay:4s}
/* A3: three sizes, then their pages, one by one */
.svx.is-live .svx-w-size--1{transition-delay:.15s}
.svx.is-live .svx-w-size--2{transition-delay:.3s}
.svx.is-live .svx-w-size--3{transition-delay:.45s}
.svx.is-live .svx-w-pages i{transition-delay:calc(var(--s) + var(--i,0) * 70ms)}
/* A4: the shop rises, someone orders, the order comes in, care stays on */
.svx.is-live .svx-w-phone{transition-delay:.1s}
.svx.is-live .svx-w-buy{animation:svx-press .35s ease 1.5s both}
.svx.is-live .svx-w-bag i{transition:transform .6s var(--e-spring) 1.75s}
.svx.is-live .svx-w-order{transition-delay:1.95s}
.svx.is-live .svx-w-care{transition-delay:2.55s}

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