/* =========================================================
   Service page hero scenes (inc/scenes.php)
   Loops use the individual translate/scale/rotate properties so they
   compose with the pointer parallax on .pz layers (transform).
   Resting styles are the "finished" frame, which is what reduced motion shows.
   ========================================================= */
.scene{--px:0;--py:0}
.scene svg{width:100%;height:100%;display:block;overflow:visible}
.scene text{font-family:var(--f-sans)}
.scene .m{font-family:var(--f-mono);letter-spacing:.06em}
.scene *{transform-box:fill-box}
.scene .pz{transition:transform .6s var(--ease)}
.scene .pz1{transform:translate(calc(var(--px) * -6px),calc(var(--py) * -5px))}
.scene .pz2{transform:translate(calc(var(--px) * 10px),calc(var(--py) * 8px))}
.scene .pz3{transform:translate(calc(var(--px) * 16px),calc(var(--py) * 12px))}
.scene [data-sc-lang],.scene [data-sc-add],.scene [data-sc-slot],.scene [data-sc-pin]{cursor:pointer}

/* ---------- web design: FR ↔ EN, desktop + phone, cursor clicks the order button ---------- */
.scene-web-design text.fr,.scene-web-design text.en{transition:opacity .35s}
.scene-web-design text.en,.scene-web-design.is-en text.fr{opacity:0}
.scene-web-design.is-en text.en{opacity:1}
.scene-web-design .sc-knob{transition:translate .35s var(--ease)}
.scene-web-design.is-en .sc-knob{translate:35px 0}
.scene-web-design .t-fr,.scene-web-design.is-en .t-en{fill:#FBFAF7;transition:fill .35s}
.scene-web-design .t-en,.scene-web-design.is-en .t-fr{fill:#151617;transition:fill .35s}
.scene-web-design .sc-lang:hover rect:first-child{stroke:#F08123}
.sc-cur{translate:250px 272px;transform-origin:0 0;animation:scCur 6.4s var(--ease) infinite}
.sc-cta,.sc-cta2{animation:scPress 6.4s infinite}
@keyframes scCur{0%,12%{translate:250px 272px;scale:1}38%{translate:112px 216px;scale:1}44%{translate:112px 216px;scale:.8}50%,72%{translate:112px 216px;scale:1}100%{translate:250px 272px}}
@keyframes scPress{0%,43%{fill:#F08123}45%,50%{fill:#C9620D}55%,100%{fill:#F08123}}

/* ---------- WordPress: theme blocks drop in, plugins get struck out, speed goes up ---------- */
.sc-b{animation:scDrop 8s var(--ease) infinite;animation-delay:calc(var(--i) * .22s)}
@keyframes scDrop{0%{opacity:0;translate:0 -26px}9%,84%{opacity:1;translate:0 0}92%,100%{opacity:0;translate:0 0}}
.sc-strike{transform-origin:left center;animation:scStrike 8s var(--ease) infinite;animation-delay:calc(var(--i) * .25s)}
@keyframes scStrike{0%,24%{scale:0 1}32%,88%{scale:1 1}95%,100%{scale:0 1}}
.sc-drop{animation:scFade 8s infinite;animation-delay:calc(var(--i) * .25s)}
@keyframes scFade{0%,28%{opacity:1}38%,88%{opacity:.3}95%,100%{opacity:1}}
.sc-needle{transform-box:view-box;transform-origin:366px 306px;rotate:62deg;animation:scNeedle 8s var(--ease) infinite}
@keyframes scNeedle{0%,30%{rotate:-72deg}52%,88%{rotate:62deg}96%,100%{rotate:-72deg}}
.sc-arc{stroke-dasharray:1;stroke-dashoffset:.12;animation:scArc 8s var(--ease) infinite}
@keyframes scArc{0%,30%{stroke-dashoffset:.86}52%,88%{stroke-dashoffset:.12}96%,100%{stroke-dashoffset:.86}}

/* ---------- e-commerce: add to cart, the item flies to the cart, payment goes through ---------- */
.sc-toque{animation:scBob 3.2s ease-in-out infinite}
@keyframes scBob{0%,100%{translate:0 0}50%{translate:0 -5px}}
.sc-add rect{transition:fill .25s}
.sc-add:hover rect{fill:#2A2B2D}
.sc-fly{opacity:0;animation:scFly 7s cubic-bezier(.5,0,.3,1) infinite}
@keyframes scFly{0%,10%{opacity:0;translate:0 0;scale:1}12%{opacity:1;translate:0 0}27%{opacity:1;translate:304px -230px;scale:.5}29%,100%{opacity:0;translate:304px -230px;scale:.5}}
.sc-badge{transform-origin:center;animation:scPop 7s infinite}
@keyframes scPop{0%,27%{scale:1}31%{scale:1.5}36%,100%{scale:1}}
.sc-pay rect{animation:scPay 7s infinite}
@keyframes scPay{0%,55%{fill:#F08123}59%,90%{fill:#151617}96%,100%{fill:#F08123}}
.sc-pay-t{animation:scPayT 7s infinite}
@keyframes scPayT{0%,55%{opacity:1}57%,92%{opacity:0}96%,100%{opacity:1}}
.sc-paid{stroke-dasharray:1;stroke-dashoffset:1;animation:scPaid 7s var(--ease) infinite}
@keyframes scPaid{0%,58%{stroke-dashoffset:1;opacity:1}66%,90%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:0;opacity:0}}
.scene.kick .sc-fly{animation:scFlyOnce .75s cubic-bezier(.5,0,.3,1)}
.scene.kick .sc-badge{animation:scPopOnce .9s}
@keyframes scFlyOnce{0%{opacity:1;translate:0 0;scale:1}85%{opacity:1;translate:304px -230px;scale:.5}100%{opacity:0;translate:304px -230px;scale:.5}}
@keyframes scPopOnce{0%,70%{scale:1}82%{scale:1.6}100%{scale:1}}

/* ---------- custom apps: bookings fill the week, bars grow, a notice slides in ---------- */
.sc-slot{fill:#FBFAF7;stroke:#B5B1A8;transition:fill .25s,stroke .25s}
.sc-slot:hover{stroke:#151617}
.sc-new{animation:scBook 8s infinite;animation-delay:calc(var(--i) * .55s + .4s)}
@keyframes scBook{0%,3%{fill:#FBFAF7}6%,86%{fill:#F08123}92%,100%{fill:#FBFAF7}}
.sc-slot.on{fill:#151617;stroke:#151617;animation:none}
.sc-bar{transform-origin:center bottom;animation:scBar 8s var(--ease) infinite;animation-delay:calc(var(--i) * .1s)}
@keyframes scBar{0%{scale:1 0}10%,88%{scale:1 1}96%,100%{scale:1 0}}
.scene-apps .sc-knob{animation:scKnob 8s var(--ease) infinite}
@keyframes scKnob{0%,18%{translate:0 0}24%,88%{translate:18px 0}94%,100%{translate:0 0}}
.sc-toast{animation:scToast 8s var(--ease) infinite}
@keyframes scToast{0%,40%{opacity:0;translate:0 16px}46%,84%{opacity:1;translate:0 0}90%,100%{opacity:0;translate:0 0}}

/* ---------- local SEO: the search is typed, your pin lands, the map pulses ---------- */
.sc-type{translate:128px 0;animation:scType 7s steps(16,end) infinite}
@keyframes scType{0%,6%{translate:0 0}30%,94%{translate:128px 0}100%{translate:0 0}}
.sc-caret{animation:scBlink 1s steps(1) infinite}
@keyframes scBlink{50%{opacity:0}}
.sc-me{animation:scLand 7s var(--ease) infinite}
@keyframes scLand{0%,32%{opacity:0;translate:0 -46px}40%{opacity:1;translate:0 0}44%{translate:0 -9px}48%,92%{opacity:1;translate:0 0}97%,100%{opacity:0;translate:0 0}}
.sc-ring{transform-origin:center;opacity:0;animation:scRing 1.9s ease-out infinite}
.sc-r2{animation-delay:.95s}
@keyframes scRing{0%{scale:.4;opacity:1}100%{scale:2.8;opacity:0}}
.sc-card{animation:scCard 7s var(--ease) infinite}
@keyframes scCard{0%,46%{opacity:0;translate:-12px 0}54%,90%{opacity:1;translate:0 0}96%,100%{opacity:0;translate:0 0}}
.sc-pin:not(.sc-me){transition:translate .3s var(--ease)}
.sc-pin:not(.sc-me):hover{translate:0 -6px}
.sc-pin.hop{animation:scHop .55s var(--ease)}
@keyframes scHop{0%,100%{translate:0 0}40%{translate:0 -16px}70%{translate:0 2px}}

/* ---------- maintenance: heartbeat, checks ticking, backup bar ---------- */
.sc-beat{animation:scBeat 1.6s linear infinite}
@keyframes scBeat{to{translate:-98px 0}}
.sc-live{animation:scLive 1.6s ease-in-out infinite}
@keyframes scLive{50%{opacity:.3}}
.sc-tick{stroke-dasharray:1;animation:scTick 6s var(--ease) infinite;animation-delay:calc(var(--i) * .5s)}
@keyframes scTick{0%,5%{stroke-dashoffset:1}12%,88%{stroke-dashoffset:0}95%,100%{stroke-dashoffset:1}}
.sc-prog{transform-origin:left center;animation:scProg 6s ease-in-out infinite}
@keyframes scProg{0%{scale:0 1}72%,92%{scale:1 1}100%{scale:0 1}}
.scene-maintenance{cursor:default}