/* ═══════════════════════════════════════════════════════════════
   АНИМАЦИЯ ОТПРАВКИ
   ═══════════════════════════════════════════════════════════════ */
/* ═══ отправка: письмо складывается в самолётик и улетает по дуге ═══ */
.fx{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 45%,rgba(9,20,31,.8),rgba(6,10,16,.93));
  -webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);animation:fade .3s var(--e-out) both}
.fx.out{animation:fxout .45s var(--e) forwards}
@keyframes fxout{to{opacity:0;visibility:hidden}}
.fx-sky{position:absolute;inset:0;pointer-events:none}
.fx-sky i{position:absolute;border-radius:50%;background:rgba(255,255,255,.055);filter:blur(18px);animation:cloud 12s linear infinite}
.fx-sky i:nth-child(1){width:260px;height:90px;left:-6%;top:22%;animation-duration:13s}
.fx-sky i:nth-child(2){width:180px;height:70px;left:34%;top:70%;animation-duration:16s;animation-delay:-5s}
.fx-sky i:nth-child(3){width:320px;height:110px;left:58%;top:10%;animation-duration:18s;animation-delay:-8s}
.fx-sky i:nth-child(4){width:140px;height:50px;left:72%;top:80%;animation-duration:11s;animation-delay:-2s}
.fx-sky i:nth-child(5){width:7px;height:7px;left:18%;top:38%;filter:none;background:rgba(255,255,255,.4);animation:star 3s ease-in-out infinite}
.fx-sky i:nth-child(6){width:5px;height:5px;left:80%;top:28%;filter:none;background:rgba(255,255,255,.35);animation:star 4s 1s ease-in-out infinite}
.fx-sky i:nth-child(7){width:6px;height:6px;left:62%;top:78%;filter:none;background:rgba(255,255,255,.35);animation:star 3.5s .5s ease-in-out infinite}
@keyframes cloud{from{transform:translateX(0)}to{transform:translateX(-160px)}}
@keyframes star{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
.fx-c{position:relative;width:800px;height:600px;flex:0 0 auto;transform:scale(var(--fxs,1))}
.fx-mark{position:absolute;top:34px;left:50%;transform:translateX(-50%);font:800 11px/1 var(--ui);letter-spacing:.28em;color:rgba(255,255,255,.3)}
.fx-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fx-path .pl{fill:none;stroke:rgba(255,255,255,.3);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;opacity:0}
.fx.fly .fx-path .pl{opacity:1;animation:pathdraw 1.15s var(--e) forwards}
@keyframes pathdraw{from{stroke-dashoffset:100}to{stroke-dashoffset:38}}
.fx.done .fx-path .pl{animation:pathdraw2 .75s var(--e) forwards}
@keyframes pathdraw2{from{stroke-dashoffset:38}to{stroke-dashoffset:0}}
.fx.err .fx-path .pl{opacity:0;transition:opacity .4s}
/* письмо — уменьшенная копия настоящего */
.fx-letter{position:absolute;left:50%;top:50%;width:200px;height:220px;margin:-102px 0 0 -100px;transform-origin:50% 60%;
  animation:letterin .55s var(--e-out) both;border-radius:8px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08)}
@keyframes letterin{from{opacity:0;transform:translateY(34px) scale(.86)}to{opacity:1;transform:none}}
.fx-mini{width:600px;transform:scale(.3333);transform-origin:0 0;pointer-events:none;background:#fff}
.fx-mini *{box-sizing:content-box}
.fx-letter::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,rgba(9,20,31,.85));pointer-events:none}
.fx.fold .fx-letter{animation:letterfold .62s var(--e) forwards}
@keyframes letterfold{35%{opacity:1;transform:scale(.72) rotate(-5deg)}to{opacity:0;transform:scale(.14) rotate(-32deg) translateY(-10px)}}
/* самолётик летит по той же дуге, что и пунктир */
.fx-plane{position:absolute;left:0;top:0;width:96px;height:96px;opacity:0;
  offset-path:path('M400,330 C480,320 560,270 630,200 S745,90 770,55');offset-rotate:auto 0deg;offset-distance:0%}
.fx-plane i{display:block;width:96px;height:96px;animation:bob 1.5s ease-in-out infinite}
.fx-plane svg{width:96px;height:96px;display:block;filter:drop-shadow(0 18px 22px rgba(0,0,0,.55))}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-2.5deg)}}
.fx.fold .fx-plane{animation:planein .5s .3s var(--e-out) forwards}
@keyframes planein{from{opacity:0;transform:scale(.25) rotate(-45deg)}to{opacity:1;transform:none}}
.fx.fly .fx-plane{opacity:1;animation:planefly 1.15s var(--e) forwards}
@keyframes planefly{from{offset-distance:0%}to{offset-distance:62%}}
.fx.done .fx-plane{animation:planefly2 .8s cubic-bezier(.45,0,.85,.55) forwards}
.fx.done .fx-plane i{animation:none}
@keyframes planefly2{from{offset-distance:62%;opacity:1}80%{opacity:1}to{offset-distance:100%;opacity:0}}
.fx.err .fx-plane{animation:planefall 1s cubic-bezier(.3,0,.8,.5) forwards}
.fx.err .fx-plane i{animation:none}
@keyframes planefall{to{offset-distance:62%;transform:translateY(170px) rotate(75deg);opacity:0}}
/* облачка при взлёте и след */
.fx-puff{position:absolute;left:400px;top:330px;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:rgba(255,255,255,.55);opacity:0}
.fx.fly .fx-puff{animation:puff .95s var(--e-out) forwards}
@keyframes puff{0%{opacity:.85;transform:none}to{opacity:0;transform:translate(var(--dx,-40px),var(--dy,14px)) scale(3.2)}}
.fx-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;opacity:0;offset-path:path('M400,330 C480,320 560,270 630,200 S745,90 770,55');offset-distance:0%}
.fx.fly .fx-spark{animation:spark 1.15s var(--e) forwards}
@keyframes spark{0%{offset-distance:0%;opacity:0}15%{opacity:.9}100%{offset-distance:62%;opacity:0}}
/* галочка и подпись */
.fx-ok{position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-58px 0 0 -48px;border-radius:50%;background:#2FBF71;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.5);box-shadow:0 18px 50px -18px rgba(47,191,113,.9)}
.fx.done .fx-ok{animation:okpop .55s .45s var(--e-out) forwards}
@keyframes okpop{60%{transform:scale(1.08);opacity:1}to{transform:scale(1);opacity:1}}
.fx-ok svg{stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none}
.fx-ok path{stroke-dasharray:34;stroke-dashoffset:34}
.fx.done .fx-ok path{animation:draw .4s .7s var(--e-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.fx.done .fx-ok::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #2FBF71;animation:ripple .9s .75s var(--e-out) infinite}
@keyframes ripple{to{transform:scale(1.9);opacity:0}}
.fx-t{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);text-align:center;width:440px}
.fx-t b{display:block;font:700 18px/1.3 var(--ui);color:#fff;letter-spacing:-.02em;opacity:0;animation:up .5s .2s var(--e-out) forwards}
.fx-t s{display:block;text-decoration:none;font:500 12.5px/1.5 var(--ui);color:rgba(255,255,255,.62);margin-top:6px;opacity:0;animation:up .5s .3s var(--e-out) forwards}
.fx-t.err b{color:#FFB4B2}
/* самолётики над полосой рассылки */
.bp-wrap{position:relative}
.bp-plane{position:absolute;left:0;top:-13px;width:22px;height:22px;pointer-events:none;animation:bpfly .85s var(--e) forwards}
.bp-plane svg{width:22px;height:22px;display:block;filter:drop-shadow(0 3px 5px rgba(0,0,0,.25))}
@keyframes bpfly{0%{transform:translate(0,4px) rotate(-10deg);opacity:0}15%{opacity:1}50%{transform:translate(calc(var(--w) * .5),-8px) rotate(0)}to{transform:translate(var(--w),2px) rotate(6deg);opacity:0}}