/* Esito animato a fine simulazione (generato da anteprime/drone-esito). Stile ispirato a Mordillo, personaggi xdroni. */
.xdd{margin:0 auto 18px;max-width:560px;border:1px solid #d9d2c3;border-radius:18px;overflow:hidden;background:#fff;position:relative}
.xdd svg{display:block;width:100%;height:auto;aspect-ratio:16/10}
.xdd__rivedi{position:absolute;right:10px;bottom:10px;font:inherit;font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:999px;border:2px solid #2a2522;background:#fff;color:#2a2522;cursor:pointer}
.xdd__rivedi:hover{background:#2a2522;color:#fff}

.xdd .elica{transform-box:fill-box;transform-origin:center;animation:xdd-gira .25s linear infinite}
@keyframes xdd-gira{to{transform:rotate(360deg)}}
.xdd .occhio{transform-box:fill-box;transform-origin:center;animation:xdd-batte 3.2s infinite}
@keyframes xdd-batte{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.xdd .nuvola{animation:xdd-scorre 26s linear infinite}
.xdd .nuvola.lenta{animation-duration:40s}
@keyframes xdd-scorre{from{transform:translateX(0)}to{transform:translateX(-400px)}}


.xdd .s-ko .drone{animation:xdd-ko-volo 3.2s cubic-bezier(.45,0,.7,.5) forwards}
@keyframes xdd-ko-volo{
 0%{transform:translate(112px,96px) rotate(0)}
 20%{transform:translate(122px,92px) rotate(-12deg)}
 35%{transform:translate(150px,106px) rotate(16deg)}
 50%{transform:translate(178px,82px) rotate(-18deg)}
 65%{transform:translate(204px,100px) rotate(22deg)}
 80%{transform:translate(228px,86px) rotate(40deg)}
 88%{transform:translate(233px,96px) rotate(26deg)}
 100%{transform:translate(232px,92px) rotate(34deg)}}
.xdd .s-ko .elica{animation:xdd-gira .25s linear 4,xdd-gira .8s linear 1s 2,xdd-ferma .1s 2.8s forwards}
@keyframes xdd-ferma{to{transform:rotate(25deg)}}
.xdd .xdd-fumo{opacity:0;transform-box:fill-box;transform-origin:center}
.xdd .s-ko .xdd-fumo{animation:xdd-fumo 1.4s ease-out infinite}
.xdd .s-ko .xdd-fumo:nth-of-type(2){animation-delay:.45s}.xdd .s-ko .xdd-fumo:nth-of-type(3){animation-delay:.9s}
@keyframes xdd-fumo{0%{opacity:.75;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(-14px,-24px) scale(1.6)}}
.xdd .chioma{transform-box:fill-box;transform-origin:50% 100%}
.xdd .s-ko .chioma{animation:xdd-scuoti .5s ease-in-out 2.6s 2}
@keyframes xdd-scuoti{25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
.xdd .xdd-foglia{opacity:0}
.xdd .s-ko .xdd-foglia{animation:xdd-foglia 1.8s ease-in 2.7s forwards}
.xdd .s-ko .xdd-foglia:nth-of-type(2){animation-delay:2.9s}.xdd .s-ko .xdd-foglia:nth-of-type(3){animation-delay:3.1s}
@keyframes xdd-foglia{0%{opacity:1;transform:translate(0,0) rotate(0)}50%{transform:translate(-8px,30px) rotate(90deg)}100%{opacity:1;transform:translate(4px,62px) rotate(180deg)}}
.xdd .xdd-botto{opacity:0;transform-box:fill-box;transform-origin:center}
.xdd .s-ko .xdd-botto{animation:xdd-botto .5s ease-out 2.55s forwards}
@keyframes xdd-botto{0%{opacity:0;transform:scale(.2)}40%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(1.3)}}
.xdd .cappello{transform-box:fill-box;transform-origin:center}
.xdd .s-ko .cappello{animation:xdd-salta-cappello .5s ease-out 2.9s}
@keyframes xdd-salta-cappello{40%{transform:translateY(-9px) rotate(-12deg)}}
.xdd .xdd-sudore{opacity:0}
.xdd .s-ko .xdd-sudore{animation:xdd-sudore 1.2s ease-in 3.2s infinite}
@keyframes xdd-sudore{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(-3px,10px)}}


.xdd .s-mid .drone{animation:xdd-mid-volo 4.4s ease-in-out forwards}
@keyframes xdd-mid-volo{
 0%{transform:translate(112px,96px) rotate(0)}
 10%{transform:translate(104px,90px) rotate(-8deg)}
 16%{transform:translate(110px,106px) rotate(7deg)}
 28%{transform:translate(142px,76px) rotate(-12deg)}
 34%{transform:translate(150px,94px) rotate(9deg)}
 46%{transform:translate(190px,62px) rotate(-14deg)}
 52%{transform:translate(200px,80px) rotate(10deg)}
 64%{transform:translate(240px,50px) rotate(-14deg)}
 70%{transform:translate(250px,68px) rotate(9deg)}
 84%{transform:translate(290px,44px) rotate(-10deg)}
 100%{transform:translate(370px,24px) rotate(-6deg)}}
.xdd .s-mid .pilota{animation:xdd-saltella .55s ease-in-out 7}
@keyframes xdd-saltella{50%{transform:translateY(-7px)}}
.xdd .xdd-goccia{opacity:0}
.xdd .s-mid .xdd-goccia{animation:xdd-goccia .9s ease-in 4}
.xdd .s-mid .xdd-goccia:nth-of-type(2){animation-delay:.3s}
@keyframes xdd-goccia{0%{opacity:.9;transform:translate(0,0)}100%{opacity:0;transform:translate(-6px,14px)}}

.xdd .uccello .ala{transform-box:fill-box;transform-origin:30% 100%;animation:xdd-sbatte .2s ease-in-out infinite alternate}
@keyframes xdd-sbatte{to{transform:scaleY(-.5)}}
.xdd .s-mid .uccello{animation:xdd-uccello-mid 4.4s linear forwards}
@keyframes xdd-uccello-mid{
 0%{transform:translate(350px,70px)}
 40%{transform:translate(214px,64px)}
 46%{transform:translate(196px,40px) rotate(-20deg)}
 54%{transform:translate(176px,46px) rotate(10deg)}
 100%{transform:translate(-40px,70px)}}
.xdd .xdd-piuma{opacity:0}
.xdd .s-mid .xdd-piuma{animation:xdd-piuma 1.6s ease-in 2s forwards}
@keyframes xdd-piuma{0%{opacity:1;transform:translate(196px,46px) rotate(0)}100%{opacity:0;transform:translate(186px,120px) rotate(160deg)}}
.xdd .s-ok .uccello{animation:xdd-uccello-ok 5s ease-in-out forwards}
@keyframes xdd-uccello-ok{0%{transform:translate(-30px,34px)}100%{transform:translate(118px,30px)}}
.xdd .s-ok .uccello.due{animation-duration:5.4s;animation-name:xdd-uccello-ok2}
@keyframes xdd-uccello-ok2{0%{transform:translate(-50px,48px)}100%{transform:translate(100px,44px)}}


.xdd .coda{transform-box:fill-box;transform-origin:0% 100%;animation:xdd-scodinzola .35s ease-in-out infinite alternate}
@keyframes xdd-scodinzola{to{transform:rotate(28deg)}}
.xdd .zampa-alzata{transform-box:fill-box;transform-origin:50% 0%}
.xdd .cane-cammina{transform:translateX(-140px)}
.xdd .s-ko .cane-cammina{animation:xdd-entra 2s ease-out 3.2s forwards}
@keyframes xdd-entra{to{transform:translateX(0)}}
.xdd .s-ko .cane-cammina .xdd-passo{animation:xdd-passo .25s ease-in-out 3.2s 8 alternate}
@keyframes xdd-passo{to{transform:translateY(-1.5px)}}
.xdd .s-ko .zampa-alzata{animation:xdd-alza .3s ease-out 5.3s forwards}
@keyframes xdd-alza{to{transform:rotate(-70deg)}}
.xdd .xdd-pipi{stroke-dasharray:30;stroke-dashoffset:30;opacity:0}
.xdd .s-ko .xdd-pipi{animation:xdd-pipi 1.6s linear 5.6s forwards}
@keyframes xdd-pipi{0%{opacity:1;stroke-dashoffset:30}20%{stroke-dashoffset:0}85%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:-30}}
.xdd .xdd-pozza{transform-box:fill-box;transform-origin:center;transform:scaleX(0)}
.xdd .s-ko .xdd-pozza{animation:xdd-pozza 1.4s ease-out 5.9s forwards}
@keyframes xdd-pozza{to{transform:scaleX(1)}}
.xdd .s-ko .pilota{animation:xdd-sobbalzo .35s ease-out 6.1s 2}
@keyframes xdd-sobbalzo{50%{transform:translateY(-8px)}}
.xdd .testa-pecora{transform-box:fill-box;transform-origin:100% 0%;animation:xdd-bruca 2.6s ease-in-out infinite}
.xdd .pecora.due .testa-pecora{animation-delay:1.1s}
@keyframes xdd-bruca{0%,60%,100%{transform:rotate(0)}70%,90%{transform:rotate(-22deg)}}
.xdd .xdd-pollice{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.xdd .s-top .xdd-pollice{animation:xdd-pollice .5s cubic-bezier(.3,1.6,.6,1) 4.8s forwards}
.xdd .s-top .xdd-pollice.b{animation-delay:5.1s}.xdd .s-top .xdd-pollice.c{animation-delay:5.4s}
@keyframes xdd-pollice{0%{opacity:0;transform:scale(.2)}100%{opacity:1;transform:scale(1)}}
.xdd .s-top .testa-pecora{animation:none}

.xdd .xdd-insulto{opacity:0;transform-box:fill-box;transform-origin:20% 100%}
.xdd .s-mid .xdd-insulto{animation:xdd-insulto 1.9s ease-out 2.1s forwards}
@keyframes xdd-insulto{0%{opacity:0;transform:scale(.3)}12%{opacity:1;transform:scale(1.1)}20%{transform:scale(1)}85%{opacity:1}100%{opacity:0}}


.xdd .s-ok .drone{animation:xdd-ok-volo 5s ease-in-out forwards}
@keyframes xdd-ok-volo{
 0%{transform:translate(112px,96px) rotate(0)}
 30%{transform:translate(126px,84px) rotate(-6deg)}
 60%{transform:translate(170px,62px) rotate(-4deg)}
 100%{transform:translate(206px,66px) rotate(0)}}
.xdd .s-ok .drone-fermo{animation:xdd-fluttua 2.4s ease-in-out 5s infinite}
@keyframes xdd-fluttua{50%{transform:translateY(-6px)}}
.xdd .s-ok .pilota{animation:xdd-gioia .45s ease-out 5s 3}
@keyframes xdd-gioia{50%{transform:translateY(-10px)}}
.xdd .xdd-raggi{transform-box:fill-box;transform-origin:center;animation:xdd-raggi 12s linear infinite}
@keyframes xdd-raggi{to{transform:rotate(360deg)}}
.xdd .arcobaleno{opacity:0}
.xdd .s-top .arcobaleno{animation:xdd-compare 1.5s ease-out 4.6s forwards}
@keyframes xdd-compare{to{opacity:1}}
.xdd .xdd-scia{stroke-dasharray:5 7;opacity:0}
.xdd .s-ok .xdd-scia{animation:xdd-scia 5s ease-in-out forwards}
@keyframes xdd-scia{20%{opacity:.7}100%{opacity:.7}}

@media (prefers-reduced-motion:reduce){.xdd *{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}}