/* Arena Reaction Motion System v1 */

.arm-icon { display:inline-flex; align-items:center; justify-content:center; width:21px; height:21px; flex:0 0 auto; transform-origin:center; }
.arm-icon svg { width:100%; height:100%; display:block; overflow:visible; }
.arm-like-cuff{fill:#971318}.arm-like-hand{fill:#f4e8e3;stroke:#ED1C24;stroke-width:2.1;stroke-linejoin:round}.arm-like-brand{fill:#ED1C24}
.arm-laugh-face{fill:#f3c74c}.arm-laugh-eye{fill:none;stroke:#241817;stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round}.arm-laugh-mouth{fill:#8f1519}.arm-laugh-tear{fill:#66bff1}
.arm-fire-outer{fill:#ED1C24}.arm-fire-inner{fill:#ff8a2b}
.arm-cry-face{fill:#ede5e2}.arm-cry-line{fill:none;stroke:#4a3935;stroke-width:3.6;stroke-linecap:round}.arm-cry-tear{fill:#69c5f3}
.arm-clown-face{fill:#f1e6e2;stroke:rgba(255,255,255,.18);stroke-width:1}.arm-clown-nose,.arm-clown-hair{fill:#ED1C24}.arm-clown-eye{fill:none;stroke:#3b2926;stroke-width:3.4;stroke-linecap:round}.arm-clown-mouth{fill:none;stroke:#B22000;stroke-width:3.5;stroke-linecap:round}

.ac5-reaction-picker .arena-motion-option-v1{display:flex;align-items:center;justify-content:center;width:40px;min-height:40px;padding:0!important}
.ac5-reaction-picker .arena-motion-option-v1 .arm-icon{width:25px;height:25px;transition:transform 170ms cubic-bezier(.2,.8,.2,1),filter 170ms ease}
.ac5-reaction-picker .arena-motion-option-v1:hover .arm-icon{transform:translateY(-2px) scale(1.1);filter:drop-shadow(0 4px 8px rgba(178,32,0,.24))}

.ac5-reaction.arena-extra-lock-v1{width:var(--arena-extra-lock-width)!important;min-width:var(--arena-extra-lock-width)!important;max-width:var(--arena-extra-lock-width)!important;height:var(--arena-extra-lock-height)!important;min-height:var(--arena-extra-lock-height)!important;max-height:var(--arena-extra-lock-height)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;box-sizing:border-box!important;transform-origin:center!important}
.ac5-reaction.arena-extra-await-v1{opacity:1!important;visibility:visible!important;background:rgba(17,13,13,.34)!important;border:1px solid rgba(210,65,48,.27)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;transform:scale(1)!important;overflow:hidden!important;color:transparent!important;font-size:0!important}
.ac5-reaction.arena-extra-await-v1>*{visibility:hidden!important;opacity:0!important}
.ac5-reaction.arena-extra-await-v1::before,.ac5-reaction.arena-extra-await-v1::after{content:none!important;display:none!important}
.ac5-reaction.arena-extra-fill-v1{animation:arm-slot-fill 400ms cubic-bezier(.16,.84,.2,1) forwards!important}
.ac5-reaction.arena-extra-fill-v1>*{visibility:visible!important;animation:arm-slot-content 330ms cubic-bezier(.16,.84,.2,1) forwards!important}
@keyframes arm-slot-fill{0%{transform:scale(.92)}42%{transform:scale(1.065)}72%{transform:scale(.985)}100%{transform:scale(1)}}
@keyframes arm-slot-content{0%{opacity:0;transform:scale(.45)}48%{opacity:1;transform:scale(1.13)}100%{opacity:1;transform:scale(1)}}

.arm-flight{position:absolute;z-index:45;width:34px;height:34px;pointer-events:none;transform-origin:center;filter:drop-shadow(0 5px 12px rgba(178,32,0,.3))}
.arm-flight-logo,.arm-flight>.arm-icon{position:absolute;inset:2px;width:30px;height:30px}
.arm-flight-tail{position:absolute;top:50%;right:62%;width:62px;height:5px;transform:translateY(-50%);border-radius:999px;background:linear-gradient(90deg,transparent,rgba(178,32,0,.08),rgba(237,28,36,.44));filter:blur(1.5px)}
.arm-flight-fire .arm-flight-tail{width:78px;height:8px;background:linear-gradient(90deg,transparent,rgba(255,92,20,.10),rgba(237,28,36,.5),rgba(255,170,30,.72));filter:blur(2px)}
.arm-flight-cry .arm-flight-tail{background:linear-gradient(90deg,transparent,rgba(105,197,243,.10),rgba(105,197,243,.5))}
.arm-flight-clown .arm-flight-tail{display:none}

.arm-scene{position:absolute;z-index:50;width:84px;height:84px;pointer-events:none;transform:translate(-50%,-50%);transform-origin:center;isolation:isolate;transition:transform 380ms cubic-bezier(.16,.84,.2,1),opacity 380ms ease}
.arm-scene.is-docking{transform:translate(-50%,-50%) scale(.31)}
.arm-scene.is-docked{opacity:0;transform:translate(-50%,-50%) scale(.27)}
.arm-scene-logo{width:64px;height:64px;display:block}
.arm-logo-half{position:absolute;inset:10px;width:64px;height:64px}.arm-logo-half .arm-scene-logo{width:64px;height:64px}
.arm-logo-left{clip-path:inset(0 50% 0 0)}.arm-logo-right{clip-path:inset(0 0 0 50%)}
.arm-logo-full{position:absolute;inset:12px;width:60px;height:60px}.arm-logo-full .arm-scene-logo{width:60px;height:60px}
.arm-final{position:absolute;inset:14px;width:56px;height:56px;opacity:0}.arm-final .arm-icon{width:100%;height:100%}

/* LIKE */
.arm-scene-like .arm-logo-left{animation:arm-like-left 720ms cubic-bezier(.18,.8,.2,1) forwards}
.arm-scene-like .arm-logo-right{animation:arm-like-right 720ms cubic-bezier(.18,.8,.2,1) forwards}
.arm-scene-like .arm-final{top:11px;left:19px;right:auto;bottom:auto;width:48px;height:48px;animation:arm-like-thumb 720ms cubic-bezier(.16,.88,.2,1) 330ms forwards}
.arm-ring-like{position:absolute;top:50%;left:50%;width:38px;height:38px;border:1.5px solid rgba(237,28,36,.55);border-radius:50%;opacity:0;transform:translate(-50%,-50%);animation:arm-like-ring 520ms ease-out 690ms forwards}
@keyframes arm-like-left{0%,36%{transform:translateX(0);opacity:1}68%{transform:translateX(-15px) rotate(-7deg);opacity:1}100%{transform:translateX(-19px) rotate(-9deg);opacity:0}}
@keyframes arm-like-right{0%,36%{transform:translateX(0);opacity:1}68%{transform:translateX(15px) rotate(7deg);opacity:1}100%{transform:translateX(19px) rotate(9deg);opacity:0}}
@keyframes arm-like-thumb{0%{opacity:0;transform:translateY(18px) scale(.4)}42%{opacity:1;transform:translateY(-5px) scale(1.13)}67%{transform:translateY(1px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes arm-like-ring{0%{opacity:.65;transform:translate(-50%,-50%) scale(.45)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.85)}}

/* LAUGH */
.arm-scene-laugh .arm-logo-left{animation:arm-curtain-left 850ms cubic-bezier(.18,.82,.2,1) forwards}
.arm-scene-laugh .arm-logo-right{animation:arm-curtain-right 850ms cubic-bezier(.18,.82,.2,1) forwards}
.arm-scene-laugh .arm-final{animation:arm-laugh-face 780ms cubic-bezier(.16,.86,.2,1) 350ms forwards}
.arm-tear-fly{position:absolute;top:42px;width:8px;height:13px;border-radius:60% 60% 70% 70%;background:#69c5f3;opacity:0}.arm-tear-left{left:22px;animation:arm-tear-left 530ms ease-out 730ms forwards}.arm-tear-right{right:22px;animation:arm-tear-right 530ms ease-out 760ms forwards}
@keyframes arm-curtain-left{0%,35%{transform:translateX(0);opacity:1}75%{transform:translateX(-25px) rotate(-10deg);opacity:.75}100%{transform:translateX(-32px) rotate(-14deg);opacity:0}}
@keyframes arm-curtain-right{0%,35%{transform:translateX(0);opacity:1}75%{transform:translateX(25px) rotate(10deg);opacity:.75}100%{transform:translateX(32px) rotate(14deg);opacity:0}}
@keyframes arm-laugh-face{0%{opacity:0;transform:translateY(10px) scale(.42) rotate(-6deg)}36%{opacity:1;transform:translateY(-5px) scale(1.13) rotate(4deg)}62%{transform:translateY(1px) scale(.97) rotate(-2deg)}78%{transform:scale(1.04) rotate(1deg)}100%{opacity:1;transform:scale(1)}}
@keyframes arm-tear-left{0%{opacity:.9;transform:translate(0,0) rotate(20deg) scale(.6)}100%{opacity:0;transform:translate(-31px,-23px) rotate(-35deg) scale(.2)}}
@keyframes arm-tear-right{0%{opacity:.9;transform:translate(0,0) rotate(-20deg) scale(.6)}100%{opacity:0;transform:translate(31px,-23px) rotate(35deg) scale(.2)}}

/* FIRE */
.arm-scene-fire .arm-logo-full{animation:arm-fire-logo 860ms ease forwards}
.arm-spark{position:absolute;top:34px;left:39px;width:7px;height:7px;border-radius:50%;background:#ffd26b;box-shadow:0 0 7px #ffd26b,0 0 16px #ED1C24;opacity:0;animation:arm-fire-spark 620ms ease 240ms forwards}
.arm-scene-fire .arm-final{animation:arm-fire-final 650ms cubic-bezier(.16,.88,.2,1) 610ms forwards}
.arm-ember{position:absolute;width:4px;height:4px;border-radius:50%;background:#ff8a2b;opacity:0;box-shadow:0 0 6px rgba(255,138,43,.7)}.arm-ember.e1{left:24px;top:54px;animation:arm-ember1 500ms ease-out 760ms forwards}.arm-ember.e2{left:55px;top:49px;animation:arm-ember2 500ms ease-out 800ms forwards}.arm-ember.e3{left:42px;top:20px;animation:arm-ember3 500ms ease-out 840ms forwards}
@keyframes arm-fire-logo{0%,45%{opacity:1;filter:brightness(1)}66%{opacity:1;filter:brightness(1.8) drop-shadow(0 0 12px rgba(255,100,20,.6))}100%{opacity:0;transform:scale(.82)}}
@keyframes arm-fire-spark{0%{opacity:0;transform:translate(-22px,-21px) scale(.3)}18%{opacity:1}68%{opacity:1;transform:translate(12px,9px) scale(1.25)}100%{opacity:0;transform:translate(18px,14px) scale(2)}}
@keyframes arm-fire-final{0%{opacity:0;transform:scale(.35) translateY(13px)}35%{opacity:1;transform:scale(1.2) translateY(-4px)}60%{transform:scale(.94) translateY(1px)}80%{transform:scale(1.07)}100%{opacity:1;transform:scale(1)}}
@keyframes arm-ember1{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(-24px,-30px) scale(.2)}}@keyframes arm-ember2{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(21px,-35px) scale(.2)}}@keyframes arm-ember3{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(9px,-28px) scale(.2)}}

/* CRY */
.arm-scene-cry .arm-logo-full{animation:arm-cry-logo 860ms ease forwards}
.arm-crack{position:absolute;top:17px;left:41px;width:2px;height:46px;background:#6cc8f5;box-shadow:0 0 8px rgba(108,200,245,.72);opacity:0;transform:rotate(7deg);animation:arm-crack 420ms ease 440ms forwards}
.arm-scene-cry .arm-final{animation:arm-cry-final 620ms ease 720ms forwards}
.arm-drop{position:absolute;top:46px;width:7px;height:12px;border-radius:60% 60% 70% 70%;background:#69c5f3;opacity:0}.arm-drop.d1{left:25px;animation:arm-drop 650ms cubic-bezier(.3,.65,.25,1) 820ms forwards}.arm-drop.d2{right:25px;animation:arm-drop 650ms cubic-bezier(.3,.65,.25,1) 900ms forwards}
.arm-ripple{position:absolute;bottom:7px;width:20px;height:7px;border:1px solid rgba(105,197,243,.56);border-radius:50%;opacity:0}.arm-ripple.r1{left:17px;animation:arm-ripple 420ms ease-out 1290ms forwards}.arm-ripple.r2{right:17px;animation:arm-ripple 420ms ease-out 1370ms forwards}
@keyframes arm-cry-logo{0%,30%{opacity:1;transform:translateX(0)}35%{transform:translateX(-2px)}40%{transform:translateX(2px)}45%{transform:translateX(-2px)}50%{transform:translateX(2px)}58%{transform:translateX(0)}100%{opacity:0;transform:scale(.9)}}
@keyframes arm-crack{0%{opacity:0;transform:scaleY(.1) rotate(7deg)}40%{opacity:1}100%{opacity:.9;transform:scaleY(1) rotate(7deg)}}
@keyframes arm-cry-final{0%{opacity:0;transform:scale(.55)}45%{opacity:1;transform:scale(1.08)}72%{transform:scale(.98)}100%{opacity:1;transform:scale(1)}}
@keyframes arm-drop{0%{opacity:0;transform:translateY(-8px) scale(.4)}16%{opacity:1}100%{opacity:.8;transform:translateY(28px) scale(.75)}}
@keyframes arm-ripple{0%{opacity:.7;transform:scale(.35)}100%{opacity:0;transform:scale(1.7)}}

/* CLOWN BONK */
.arm-bonk-clown{position:absolute;top:20px;left:30px;width:48px;height:48px;animation:arm-bonk-clown 1380ms cubic-bezier(.18,.8,.2,1) forwards}.arm-bonk-clown .arm-icon{width:48px;height:48px}
.arm-bonk-logo{position:absolute;top:29px;left:-5px;width:35px;height:35px;opacity:0;animation:arm-bonk-logo 880ms cubic-bezier(.16,.84,.2,1) 280ms forwards}.arm-bonk-logo .arm-scene-logo{width:35px;height:35px}
.arm-hammer{position:absolute;top:1px;left:17px;width:52px;height:52px;opacity:0;transform-origin:20% 82%;animation:arm-hammer 780ms cubic-bezier(.12,.82,.2,1) 510ms forwards}.arm-hammer svg{width:100%;height:100%;display:block}
.arm-bonk-star{position:absolute;width:10px;height:10px;opacity:0;background:#ffd45f;clip-path:polygon(50% 0%,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0% 50%,39% 37%)}.arm-bonk-star.s1{top:13px;right:6px;animation:arm-bonk-star1 500ms ease-out 960ms forwards}.arm-bonk-star.s2{top:3px;right:27px;animation:arm-bonk-star2 500ms ease-out 990ms forwards}
.arm-final-clown{inset:17px;width:50px;height:50px;animation:arm-bonk-final 430ms cubic-bezier(.16,.86,.2,1) 1190ms forwards}
@keyframes arm-bonk-clown{0%,54%{transform:scale(1) translate(0,0);opacity:1}61%{transform:translate(9px,6px) scaleX(1.28) scaleY(.58) rotate(7deg)}69%{transform:translate(4px,-4px) scaleX(.88) scaleY(1.16) rotate(-4deg)}80%{transform:scale(1.03)}100%{opacity:0;transform:scale(.82)}}
@keyframes arm-bonk-logo{0%{opacity:0;transform:translateX(-21px) scale(.65)}32%{opacity:1;transform:translateX(3px) scale(1.06)}55%{transform:translateX(0) scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes arm-hammer{0%,18%{opacity:0;transform:rotate(-58deg) scale(.7)}28%{opacity:1}60%{opacity:1;transform:rotate(-46deg) scale(1)}72%{opacity:1;transform:rotate(33deg) scale(1.08)}82%{transform:rotate(20deg) scale(.98)}100%{opacity:0;transform:rotate(18deg) scale(.9)}}
@keyframes arm-bonk-star1{0%{opacity:0;transform:scale(.2)}28%{opacity:1;transform:scale(1.3)}100%{opacity:0;transform:scale(.3) translate(17px,-15px) rotate(65deg)}}
@keyframes arm-bonk-star2{0%{opacity:0;transform:scale(.2)}28%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(.3) translate(-8px,-20px) rotate(-70deg)}}
@keyframes arm-bonk-final{0%{opacity:0;transform:scale(.65) rotate(-5deg)}48%{opacity:1;transform:scale(1.1) rotate(3deg)}75%{transform:scale(.97) rotate(-1deg)}100%{opacity:1;transform:scale(1)}}

@media (max-width:700px){.arm-scene{width:76px;height:76px}.arm-icon{width:20px;height:20px}}
@media (prefers-reduced-motion:reduce){.arm-flight,.arm-scene,.arm-scene *,.ac5-reaction.arena-extra-fill-v1,.arm-icon{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}}


/* ============================================================
   arena-motion-creative-director-v3

   РЕАЛЬНЫЕ DOM-КЛАССЫ:
     .arm-scene-like
     .arm-scene-laugh
     .arm-scene-fire
     .arm-scene-cry
     .arm-scene-clown

   ❤️ Heart не затрагивается.
============================================================ */


/* ============================================================
   GLOBAL
============================================================ */

.arm-scene-like,
.arm-scene-laugh,
.arm-scene-fire,
.arm-scene-cry,
.arm-scene-clown {
    overflow: visible !important;
    isolation: isolate;
}


/*
 * У пяти сцен убиваем старую одинаковую режиссуру.
 * Затем каждая получает собственную ниже.
 */

.arm-scene-like .arm-final,
.arm-scene-laugh .arm-final,
.arm-scene-fire .arm-final,
.arm-scene-cry .arm-final,
.arm-scene-clown .arm-final {
    animation: none !important;
}


/* ============================================================
   👍 ARENA STAMP
   ============================================================
   
              ARENA
               ↓
              БАМ
               ↓
           отпечаток 👍

   Вообще никакого перелёта.
============================================================ */

.arm-scene-like {
    width: 92px !important;
    height: 92px !important;

    perspective: 520px;
}


/*
 * Старые половины логотипа вообще не используем.
 */

.arm-scene-like .arm-logo-half {
    display: none !important;
}


/*
 * Большая печать — сама эмблема Arena.
 */

.arm-scene-like::before {
    content: "";

    position: absolute;
    z-index: 30;

    left: 50%;
    top: 50%;

    width: 57px;
    height: 57px;

    background:
        linear-gradient(
            90deg,
            #971318 0 49.7%,
            #ED1C24 50.3% 100%
        );

    clip-path: polygon(
        0 0,
        50% 50%,
        100% 0,
        100% 100%,
        0 100%
    );

    transform-origin:
        50% 100%;

    filter:
        drop-shadow(
            0 13px 12px
            rgba(0,0,0,.42)
        )
        drop-shadow(
            0 0 8px
            rgba(178,32,0,.22)
        );

    animation:
        armStampV3
        1130ms
        cubic-bezier(.14,.82,.17,1)
        forwards;
}


/*
 * Ручка печати.
 */

.arm-scene-like::after {
    content: "";

    position: absolute;
    z-index: 29;

    left: 50%;
    top: 50%;

    width: 22px;
    height: 44px;

    border-radius:
        9px 9px 5px 5px;

    background:
        linear-gradient(
            90deg,
            #541010,
            #8E1818 48%,
            #B22000
        );

    box-shadow:
        inset 0 1px
        rgba(255,255,255,.10),
        0 7px 12px
        rgba(0,0,0,.32);

    animation:
        armStampHandleV3
        1130ms
        cubic-bezier(.14,.82,.17,1)
        forwards;
}


/*
 * Финальный 👍 — именно отпечаток.
 */

.arm-scene-like .arm-final {
    position: absolute !important;

    z-index: 20 !important;

    left: 50% !important;
    top: 50% !important;

    width: 51px !important;
    height: 51px !important;

    opacity: 0;

    animation:
        armStampImprintV3
        610ms
        cubic-bezier(.14,.90,.18,1)
        535ms forwards !important;
}


.arm-scene-like .arm-ring-like {
    position: absolute !important;

    z-index: 8;

    left: 50% !important;
    top: 54% !important;

    width: 45px !important;
    height: 17px !important;

    border:
        1.5px solid
        rgba(237,28,36,.55) !important;

    border-radius: 50% !important;

    opacity: 0;

    animation:
        armStampShockV3
        480ms ease-out
        565ms forwards !important;
}


@keyframes armStampV3 {

    0% {
        opacity: 0;

        transform:
            translate(-50%,-150px)
            rotateX(-13deg)
            scale(.73);
    }

    16% {
        opacity: 1;
    }

    45% {
        transform:
            translate(-50%,-69px)
            rotateX(-5deg)
            scale(.97);
    }

    /*
     * БАМ
     */
    56% {
        transform:
            translate(-50%,-50%)
            scaleX(1.08)
            scaleY(.87);
    }

    62% {
        transform:
            translate(-50%,-54%)
            scale(.97);
    }

    75% {
        opacity: 1;

        transform:
            translate(-50%,-84px)
            rotateX(-7deg)
            scale(.91);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%,-132px)
            rotateX(-15deg)
            scale(.70);
    }
}


@keyframes armStampHandleV3 {

    0% {
        opacity: 0;

        transform:
            translate(-50%,-183px)
            scale(.70);
    }

    16% {
        opacity: 1;
    }

    45% {
        transform:
            translate(-50%,-102px)
            scale(.96);
    }

    56% {
        transform:
            translate(-50%,-80px)
            scaleY(.94);
    }

    62% {
        transform:
            translate(-50%,-84px)
            scale(.97);
    }

    75% {
        opacity: 1;

        transform:
            translate(-50%,-117px)
            scale(.90);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%,-166px)
            scale(.70);
    }
}


@keyframes armStampImprintV3 {

    0% {
        opacity: 0;

        transform:
            translate(-50%,-50%)
            scaleX(1.22)
            scaleY(.48);

        filter:
            blur(1px)
            brightness(.76);
    }

    24% {
        opacity: .72;

        transform:
            translate(-50%,-50%)
            scaleX(1.13)
            scaleY(.80);
    }

    48% {
        opacity: 1;

        transform:
            translate(-50%,-50%)
            scale(1.10);

        filter: none;
    }

    72% {
        transform:
            translate(-50%,-50%)
            scale(.96);
    }

    100% {
        opacity: 1;

        transform:
            translate(-50%,-50%)
            scale(1);
    }
}


@keyframes armStampShockV3 {

    from {
        opacity: .68;

        transform:
            translate(-50%,-50%)
            scale(.20);
    }

    to {
        opacity: 0;

        transform:
            translate(-50%,-50%)
            scale(2.45);
    }
}


/* ============================================================
   😂 LAUGH INFECTION
   ============================================================

   Серьёзный логотип начинает смеяться сам.
   Половины сначала трясутся как плечи,
   потом расходятся.
============================================================ */

.arm-scene-laugh {
    width: 94px !important;
    height: 94px !important;
}


/*
 * Две реальные половины Arena logo.
 */

.arm-scene-laugh .arm-logo-half {
    position: absolute !important;

    z-index: 15;

    inset: 13px !important;

    width: 68px !important;
    height: 68px !important;

    opacity: 1 !important;

    transform-origin:
        50% 65%;
}


.arm-scene-laugh .arm-logo-left {
    clip-path:
        inset(0 50% 0 0);

    animation:
        armLaughLeftV3
        1100ms
        cubic-bezier(.17,.78,.20,1)
        forwards !important;
}


.arm-scene-laugh .arm-logo-right {
    clip-path:
        inset(0 0 0 50%);

    animation:
        armLaughRightV3
        1100ms
        cubic-bezier(.17,.78,.20,1)
        forwards !important;
}


/*
 * Финальное лицо.
 */

.arm-scene-laugh .arm-final {
    position: absolute !important;

    z-index: 12 !important;

    left: 50% !important;
    top: 50% !important;

    width: 58px !important;
    height: 58px !important;

    opacity: 0;

    animation:
        armLaughFaceV3
        690ms
        cubic-bezier(.14,.90,.18,1)
        690ms forwards !important;
}


/*
 * Слёзы облетают лицо по разным траекториям.
 */

.arm-scene-laugh .arm-tear-fly {
    position: absolute !important;

    z-index: 18;

    top: 47% !important;

    width: 8px !important;
    height: 13px !important;

    border-radius:
        60% 60% 75% 75%;

    background:
        linear-gradient(
            180deg,
            #A5E5FF,
            #57B5EB
        ) !important;

    box-shadow:
        0 0 8px
        rgba(87,181,235,.38);

    opacity: 0;
}


.arm-scene-laugh .arm-tear-left {
    left: 29% !important;

    animation:
        armLaughTearLeftV3
        720ms
        cubic-bezier(.20,.70,.18,1)
        610ms forwards !important;
}


.arm-scene-laugh .arm-tear-right {
    right: 29% !important;

    animation:
        armLaughTearRightV3
        780ms
        cubic-bezier(.20,.70,.18,1)
        650ms forwards !important;
}


/*
 * Воздушные дуги смеха.
 */

.arm-scene-laugh::before,
.arm-scene-laugh::after {
    content: "";

    position: absolute;

    z-index: 3;

    top: 50%;

    width: 18px;
    height: 34px;

    opacity: 0;

    border:
        2px solid
        rgba(105,197,243,.44);
}


.arm-scene-laugh::before {
    left: 2px;

    border-right: 0;

    border-radius:
        30px 0 0 30px;

    animation:
        armLaughArcLeftV3
        470ms ease-out
        500ms forwards;
}


.arm-scene-laugh::after {
    right: 2px;

    border-left: 0;

    border-radius:
        0 30px 30px 0;

    animation:
        armLaughArcRightV3
        470ms ease-out
        530ms forwards;
}


@keyframes armLaughLeftV3 {

    0%, 20% {
        transform: translate(0,0);
    }

    28% {
        transform:
            translate(-2px,-2px)
            rotate(-3deg);
    }

    34% {
        transform:
            translate(2px,1px)
            rotate(3deg);
    }

    40% {
        transform:
            translate(-3px,-3px)
            rotate(-4deg);
    }

    47% {
        transform:
            translate(2px,1px)
            rotate(3deg);
    }

    56% {
        transform:
            translate(-5px,-5px)
            rotate(-7deg);
    }

    68% {
        transform:
            translate(-11px,1px)
            rotate(-12deg);
    }

    82% {
        opacity: .9;

        transform:
            translate(-18px,-3px)
            rotate(-16deg);
    }

    100% {
        opacity: 0;

        transform:
            translate(-29px,5px)
            rotate(-21deg)
            scale(.72);
    }
}


@keyframes armLaughRightV3 {

    0%, 20% {
        transform: translate(0,0);
    }

    28% {
        transform:
            translate(2px,-2px)
            rotate(3deg);
    }

    34% {
        transform:
            translate(-2px,1px)
            rotate(-3deg);
    }

    40% {
        transform:
            translate(3px,-3px)
            rotate(4deg);
    }

    47% {
        transform:
            translate(-2px,1px)
            rotate(-3deg);
    }

    56% {
        transform:
            translate(5px,-5px)
            rotate(7deg);
    }

    68% {
        transform:
            translate(11px,1px)
            rotate(12deg);
    }

    82% {
        opacity: .9;

        transform:
            translate(18px,-3px)
            rotate(16deg);
    }

    100% {
        opacity: 0;

        transform:
            translate(29px,5px)
            rotate(21deg)
            scale(.72);
    }
}


@keyframes armLaughFaceV3 {

    0% {
        opacity: 0;

        transform:
            translate(-50%,-50%)
            scale(.27)
            rotate(-8deg);
    }

    32% {
        opacity: 1;

        transform:
            translate(-50%,-50%)
            scale(1.19)
            rotate(5deg);
    }

    51% {
        transform:
            translate(-50%,-50%)
            scale(.92)
            rotate(-3deg);
    }

    69% {
        transform:
            translate(-50%,-50%)
            scale(1.07)
            rotate(2deg);
    }

    84% {
        transform:
            translate(-50%,-50%)
            scale(.98);
    }

    100% {
        opacity: 1;

        transform:
            translate(-50%,-50%)
            scale(1);
    }
}


@keyframes armLaughTearLeftV3 {

    0% {
        opacity: 0;

        transform:
            translate(7px,-6px)
            rotate(17deg)
            scale(.3);
    }

    15% {
        opacity: 1;
    }

    48% {
        transform:
            translate(-29px,-25px)
            rotate(-46deg)
            scale(.95);
    }

    78% {
        opacity: .8;

        transform:
            translate(-41px,-4px)
            rotate(-92deg)
            scale(.68);
    }

    100% {
        opacity: 0;

        transform:
            translate(-28px,23px)
            rotate(-150deg)
            scale(.15);
    }
}


@keyframes armLaughTearRightV3 {

    0% {
        opacity: 0;

        transform:
            translate(-7px,-6px)
            rotate(-17deg)
            scale(.3);
    }

    15% {
        opacity: 1;
    }

    48% {
        transform:
            translate(29px,-25px)
            rotate(46deg)
            scale(.95);
    }

    78% {
        opacity: .8;

        transform:
            translate(43px,0)
            rotate(96deg)
            scale(.66);
    }

    100% {
        opacity: 0;

        transform:
            translate(32px,25px)
            rotate(155deg)
            scale(.14);
    }
}


@keyframes armLaughArcLeftV3 {

    from {
        opacity: .62;

        transform:
            translate(11px,-50%)
            scale(.45);
    }

    to {
        opacity: 0;

        transform:
            translate(-15px,-50%)
            scale(1.35);
    }
}


@keyframes armLaughArcRightV3 {

    from {
        opacity: .62;

        transform:
            translate(-11px,-50%)
            scale(.45);
    }

    to {
        opacity: 0;

        transform:
            translate(15px,-50%)
            scale(1.35);
    }
}


/* ============================================================
   🔥 ARENA REACTOR
   ============================================================

   До места реакции летит НЕ логотип.
   Летит только одна раскалённая искра.

   На месте:
   искра обходит M → M белеет от жара →
   сгорает вверх → остаётся огонь.
============================================================ */


/* flight: скрываем логотип */

.arm-flight-fire .arm-flight-logo {
    opacity: 0 !important;
}


/* сама летящая искра */

.arm-flight-fire::before {
    content: "";

    position: absolute;

    z-index: 30;

    left: 50%;
    top: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #FFF7D0;

    box-shadow:
        0 0 5px #fff,
        0 0 11px #FFBA2A,
        0 0 21px #ED1C24;

    transform:
        translate(-50%,-50%);
}


.arm-flight-fire .arm-flight-tail {
    width: 84px !important;
    height: 5px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(237,28,36,.08),
            rgba(255,105,18,.38),
            rgba(255,190,42,.76),
            #FFF2B1
        ) !important;

    filter:
        blur(1.4px) !important;
}


.arm-scene-fire {
    width: 94px !important;
    height: 94px !important;
}


/*
 * Реальный Arena logo на месте.
 */

.arm-scene-fire .arm-logo-full {
    position: absolute !important;

    z-index: 5 !important;

    inset: 15px !important;

    width: 64px !important;
    height: 64px !important;

    opacity: 1 !important;

    animation:
        armReactorLogoV3
        1220ms ease
        forwards !important;
}


/*
 * Искра идёт по контуру эмблемы.
 */

.arm-scene-fire .arm-spark {
    position: absolute !important;

    z-index: 20;

    left: 0 !important;
    top: 0 !important;

    width: 7px !important;
    height: 7px !important;

    border-radius: 50%;

    opacity: 0;

    background:
        #FFF7CE !important;

    box-shadow:
        0 0 6px #fff,
        0 0 12px #FFB12A,
        0 0 22px #ED1C24 !important;

    offset-path:
        path(
            "M 20 19
             L 47 46
             L 74 19
             L 74 72
             L 20 72
             L 20 19"
        );

    offset-rotate: 0deg;

    animation:
        armReactorTraceV3
        820ms
        cubic-bezier(.27,.05,.27,1)
        forwards !important;
}


.arm-scene-fire .arm-final {
    position: absolute !important;

    z-index: 15 !important;

    left: 50% !important;
    top: 50% !important;

    width: 60px !important;
    height: 60px !important;

    opacity: 0;

    animation:
        armReactorFireV3
        690ms
        cubic-bezier(.13,.92,.17,1)
        810ms forwards !important;
}


/*
 * Угольки появляются уже ПОСЛЕ огня.
 */

.arm-scene-fire .arm-ember {
    position: absolute !important;

    z-index: 14;

    width: 4px !important;
    height: 4px !important;

    border-radius: 50%;

    opacity: 0;

    background:
        #FF9428 !important;

    box-shadow:
        0 0 5px
        rgba(255,120,20,.75);
}


.arm-scene-fire .arm-ember.e1 {
    left: 35% !important;
    top: 43% !important;

    animation:
        armEmberOneV3
        650ms ease-out
        850ms forwards !important;
}

.arm-scene-fire .arm-ember.e2 {
    left: 55% !important;
    top: 39% !important;

    animation:
        armEmberTwoV3
        700ms ease-out
        900ms forwards !important;
}

.arm-scene-fire .arm-ember.e3 {
    left: 65% !important;
    top: 48% !important;

    animation:
        armEmberThreeV3
        620ms ease-out
        950ms forwards !important;
}


@keyframes armReactorTraceV3 {

    0% {
        opacity: 0;
        offset-distance: 0%;
        transform: scale(.3);
    }

    5% {
        opacity: 1;
    }

    67% {
        opacity: 1;
        transform: scale(1);
    }

    96% {
        opacity: 1;
        offset-distance: 100%;
        transform: scale(1.55);
    }

    100% {
        opacity: 0;
        offset-distance: 100%;
        transform: scale(2.4);
    }
}


@keyframes armReactorLogoV3 {

    0%, 45% {
        opacity: 1;

        filter:
            brightness(1)
            saturate(1);
    }

    58% {
        filter:
            brightness(1.7)
            saturate(1.35)
            drop-shadow(
                0 0 9px
                rgba(255,98,20,.47)
            );
    }

    69% {
        filter:
            brightness(2.5)
            saturate(1.6)
            drop-shadow(
                0 0 17px
                rgba(255,132,22,.75)
            );

        transform: scale(1.04);
    }

    /*
     * знак начинает сгорать вверх
     */
    82% {
        opacity: .75;

        transform:
            translateY(-7px)
            scaleX(.93)
            scaleY(.72);

        filter:
            brightness(3.2);
    }

    100% {
        opacity: 0;

        transform:
            translateY(-28px)
            scaleX(.56)
            scaleY(.12);

        filter:
            brightness(4)
            blur(1.2px);
    }
}


@keyframes armReactorFireV3 {

    0% {
        opacity: 0;

        transform:
            translate(-50%,-50%)
            translateY(17px)
            scale(.22);
    }

    31% {
        opacity: 1;

        transform:
            translate(-50%,-50%)
            translateY(-6px)
            scale(1.24);
    }

    52% {
        transform:
            translate(-50%,-50%)
            translateY(1px)
            scale(.92);
    }

    72% {
        transform:
            translate(-50%,-50%)
            translateY(-2px)
            scale(1.08);
    }

    100% {
        opacity: 1;

        transform:
            translate(-50%,-50%)
            scale(1);
    }
}


@keyframes armEmberOneV3 {
    from {
        opacity: .9;
        transform: translate(0,0) scale(1);
    }

    to {
        opacity: 0;
        transform:
            translate(-14px,-42px)
            scale(.1);
    }
}

@keyframes armEmberTwoV3 {
    from {
        opacity: .8;
        transform: translate(0,0) scale(.8);
    }

    to {
        opacity: 0;
        transform:
            translate(6px,-50px)
            scale(.1);
    }
}

@keyframes armEmberThreeV3 {
    from {
        opacity: .85;
        transform: translate(0,0) scale(.9);
    }

    to {
        opacity: 0;
        transform:
            translate(19px,-36px)
            scale(.1);
    }
}


/* ============================================================
   😭 DAM BREAK
   ============================================================

   Здесь вообще ничего не прилетает.

   Arena = плотина.
   За ней поднимается вода.
   Давление.
   Трещина.
   Прорыв.
============================================================ */

.arm-scene-cry {
    width: 94px !important;
    height: 94px !important;

    overflow: visible !important;
}


/*
 * Вода за плотиной.
 */

.arm-scene-cry::before {
    content: "";

    position: absolute;

    z-index: 2;

    left: 15px;
    right: 15px;
    bottom: 14px;

    height: 5px;

    border-radius:
        14px 14px 6px 6px;

    background:
        linear-gradient(
            180deg,
            #9EE5FF,
            #4FAEEA 62%,
            #328CCE
        );

    box-shadow:
        0 -4px 13px
        rgba(83,183,239,.22);

    transform-origin:
        bottom center;

    animation:
        armDamWaterV3
        1070ms
        cubic-bezier(.25,.10,.20,1)
        forwards;
}


/*
 * Логотип является плотиной.
 */

.arm-scene-cry .arm-logo-full {
    position: absolute !important;

    z-index: 7 !important;

    inset: 15px !important;

    width: 64px !important;
    height: 64px !important;

    opacity: 1 !important;

    animation:
        armDamLogoV3
        1370ms
        cubic-bezier(.20,.72,.20,1)
        forwards !important;
}


/*
 * Центральная трещина.
 */

.arm-scene-cry .arm-crack {
    position: absolute !important;

    z-index: 12;

    left: calc(50% - 1px) !important;
    top: 26px !important;

    width: 3px !important;
    height: 38px !important;

    opacity: 0;

    background:
        linear-gradient(
            180deg,
            #DBF7FF,
            #5FC4F5
        ) !important;

    box-shadow:
        0 0 8px
        rgba(95,196,245,.8);

    clip-path: polygon(
        0 0,
        100% 0,
        42% 22%,
        100% 35%,
        25% 53%,
        90% 67%,
        18% 82%,
        72% 100%,
        0 100%
    );

    transform-origin:
        top center;

    animation:
        armDamCrackV3
        400ms ease
        745ms forwards !important;
}


.arm-scene-cry .arm-final {
    position: absolute !important;

    z-index: 15 !important;

    left: 50% !important;
    top: 50% !important;

    width: 59px !important;
    height: 59px !important;

    opacity: 0;

    animation:
        armFloodFaceV3
        660ms
        cubic-bezier(.14,.90,.18,1)
        1050ms forwards !important;
}


.arm-scene-cry .arm-drop {
    position: absolute !important;

    z-index: 16;

    top: 48% !important;

    width: 8px !important;
    height: 16px !important;

    opacity: 0;

    border-radius:
        65% 65% 75% 75%;

    background:
        linear-gradient(
            180deg,
            #B5ECFF,
            #55B9EE
        ) !important;

    animation:
        armFloodDropV3
        600ms
        cubic-bezier(.25,.56,.24,1)
        1030ms forwards !important;
}


.arm-scene-cry .arm-drop.d1 {
    left: 28% !important;
}

.arm-scene-cry .arm-drop.d2 {
    right: 28% !important;

    animation-delay:
        1110ms !important;
}


.arm-scene-cry .arm-ripple {
    position: absolute !important;

    z-index: 13;

    bottom: 5px !important;

    width: 24px !important;
    height: 8px !important;

    opacity: 0;

    border:
        1px solid
        rgba(91,191,241,.60) !important;

    border-radius: 50%;

    animation:
        armFloodRippleV3
        440ms ease-out
        1480ms forwards !important;
}


.arm-scene-cry .arm-ripple.r1 {
    left: 13px !important;
}

.arm-scene-cry .arm-ripple.r2 {
    right: 13px !important;

    animation-delay:
        1550ms !important;
}


@keyframes armDamWaterV3 {

    0% {
        height: 4px;
        opacity: .22;
    }

    23% {
        height: 15px;
        opacity: .65;
    }

    49% {
        height: 29px;
        opacity: .90;
    }

    73% {
        height: 43px;
        opacity: 1;
    }

    100% {
        height: 51px;
        opacity: .96;
    }
}


@keyframes armDamLogoV3 {

    0%, 47% {
        transform: translateX(0);
    }

    52% {
        transform:
            translateX(-1px)
            rotate(-.7deg);
    }

    56% {
        transform:
            translateX(2px)
            rotate(.9deg);
    }

    60% {
        transform:
            translateX(-2px)
            rotate(-1deg);
    }

    64% {
        transform:
            translateX(2px)
            rotate(1deg);
    }

    69% {
        transform: translateX(0);
    }

    /*
     * давление становится слишком большим
     */
    81% {
        opacity: 1;

        transform:
            scaleX(1.09)
            scaleY(.95);
    }

    /*
     * прорыв
     */
    100% {
        opacity: 0;

        transform:
            scaleX(1.38)
            scaleY(.71);
    }
}


@keyframes armDamCrackV3 {

    0% {
        opacity: 0;
        transform: scaleY(.04);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}


@keyframes armFloodFaceV3 {

    0% {
        opacity: 0;

        transform:
            translate(-50%,-50%)
            translateY(14px)
            scale(.51);
    }

    37% {
        opacity: 1;

        transform:
            translate(-50%,-50%)
            translateY(-3px)
            scale(1.11);
    }

    62% {
        transform:
            translate(-50%,-50%)
            translateY(1px)
            scale(.97);
    }

    100% {
        opacity: 1;

        transform:
            translate(-50%,-50%)
            scale(1);
    }
}


@keyframes armFloodDropV3 {

    0% {
        opacity: 0;

        transform:
            translateY(-13px)
            scaleY(.25);
    }

    15% {
        opacity: 1;
    }

    100% {
        opacity: .9;

        transform:
            translateY(31px)
            scaleY(1.25);
    }
}


@keyframes armFloodRippleV3 {

    from {
        opacity: .72;
        transform: scale(.28);
    }

    to {
        opacity: 0;
        transform: scale(1.9);
    }
}


/* ============================================================
   🤡 ARENA BONK — DIRECTOR'S CUT
   ============================================================

   Клоун скачет сам.
   Потом:

       🤡
   M выглядывает
       ↓
   появляется молоток
       ↓
   клоун замечает
       ↓
      ПАУЗА
       ↓
      БОНК
       ↓
   нос улетает
============================================================ */

.arm-flight-clown .arm-flight-tail {
    display: none !important;
}


.arm-scene-clown {
    width: 105px !important;
    height: 96px !important;
}


/*
 * Клоун-жертва.
 */

.arm-scene-clown .arm-bonk-clown {
    position: absolute !important;

    z-index: 12;

    left: 58% !important;
    top: 51% !important;

    width: 50px !important;
    height: 50px !important;

    opacity: 1 !important;

    animation:
        armClownVictimV3
        1680ms
        cubic-bezier(.15,.82,.18,1)
        forwards !important;
}


/*
 * Arena медленно выглядывает слева.
 */

.arm-scene-clown .arm-bonk-logo {
    position: absolute !important;

    z-index: 10;

    left: -2px !important;
    top: 35% !important;

    width: 37px !important;
    height: 37px !important;

    opacity: 0;

    animation:
        armBonkPeekV3
        1180ms
        cubic-bezier(.14,.84,.18,1)
        220ms forwards !important;
}


/*
 * Молоток.
 */

.arm-scene-clown .arm-hammer {
    position: absolute !important;

    z-index: 22;

    left: 23px !important;
    top: -4px !important;

    width: 58px !important;
    height: 58px !important;

    opacity: 0;

    transform-origin:
        17% 85%;

    animation:
        armHammerV3
        1010ms
        cubic-bezier(.11,.85,.15,1)
        585ms forwards !important;
}


.arm-scene-clown .arm-hammer svg {
    display: block;

    width: 100%;
    height: 100%;
}


/*
 * Нос клоуна физически вылетает.
 */

.arm-scene-clown
.arm-bonk-clown
.arm-clown-nose {
    transform-box: fill-box;
    transform-origin: center;

    animation:
        armClownNoseV3
        630ms
        cubic-bezier(.17,.82,.19,1)
        1080ms forwards !important;
}


/*
 * Звёзды удара.
 */

.arm-scene-clown .arm-bonk-star {
    position: absolute !important;

    z-index: 30;

    width: 11px !important;
    height: 11px !important;

    opacity: 0;

    background:
        #FFD45C !important;

    clip-path: polygon(
        50% 0,
        61% 37%,
        100% 50%,
        61% 63%,
        50% 100%,
        39% 63%,
        0 50%,
        39% 37%
    );
}


.arm-scene-clown .arm-bonk-star.s1 {
    right: 6px !important;
    top: 12px !important;

    animation:
        armBonkStarOneV3
        570ms ease-out
        1130ms forwards !important;
}


.arm-scene-clown .arm-bonk-star.s2 {
    right: 30px !important;
    top: 2px !important;

    animation:
        armBonkStarTwoV3
        570ms ease-out
        1160ms forwards !important;
}


/*
 * Финальный rebound.
 */

.arm-scene-clown .arm-final-clown {
    position: absolute !important;

    z-index: 15 !important;

    left: 58% !important;
    top: 51% !important;

    width: 51px !important;
    height: 51px !important;

    opacity: 0;

    animation:
        armBonkFinalV3
        440ms
        cubic-bezier(.14,.90,.18,1)
        1430ms forwards !important;
}


@keyframes armBonkPeekV3 {

    0%, 8% {
        opacity: 0;

        transform:
            translateX(-34px)
            rotate(-7deg)
            scale(.67);
    }

    28% {
        opacity: 1;

        transform:
            translateX(-7px)
            rotate(-3deg)
            scale(.94);
    }

    /*
     * выглянул и просто смотрит
     */
    39%, 77% {
        opacity: 1;

        transform:
            translateX(0)
            rotate(0)
            scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}


@keyframes armHammerV3 {

    0%, 12% {
        opacity: 0;

        transform:
            rotate(-86deg)
            scale(.53);
    }

    24% {
        opacity: 1;
    }

    /*
     * Молоток появился.
     */
    38% {
        opacity: 1;

        transform:
            rotate(-56deg)
            scale(.96);
    }

    /*
     * ДЛИННАЯ ПАУЗА
     */
    38%, 67% {
        opacity: 1;

        transform:
            rotate(-56deg)
            scale(.96);
    }

    /*
     * БОНК
     */
    77% {
        opacity: 1;

        transform:
            rotate(36deg)
            scale(1.13);
    }

    /*
     * отдача
     */
    86% {
        transform:
            rotate(18deg)
            scale(.96);
    }

    100% {
        opacity: 0;

        transform:
            rotate(8deg)
            scale(.80);
    }
}


@keyframes armClownVictimV3 {

    0%, 49% {
        opacity: 1;

        transform:
            translate(-50%,-50%)
            scale(1)
            rotate(0);
    }

    /*
     * заметил молоток
     */
    54% {
        transform:
            translate(-50%,-50%)
            translateX(3px)
            rotate(5deg);
    }

    /*
     * неловкая пауза
     */
    54%, 64% {
        transform:
            translate(-50%,-50%)
            translateX(3px)
            rotate(5deg);
    }

    /*
     * БОНК — клоун становится блином
     */
    70% {
        transform:
            translate(-50%,-50%)
            translate(9px,9px)
            scaleX(1.48)
            scaleY(.44)
            rotate(8deg);
    }

    /*
     * пружинный отскок
     */
    78% {
        transform:
            translate(-50%,-50%)
            translate(3px,-8px)
            scaleX(.80)
            scaleY(1.28)
            rotate(-5deg);
    }

    87% {
        transform:
            translate(-50%,-50%)
            translateY(1px)
            scaleX(1.08)
            scaleY(.94)
            rotate(1deg);
    }

    94% {
        opacity: 1;

        transform:
            translate(-50%,-50%)
            scale(1);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%,-50%)
            scale(.84);
    }
}


@keyframes armClownNoseV3 {

    0%, 10% {
        transform:
            translate(0,0)
            scale(1);
    }

    30% {
        transform:
            translate(6px,-20px)
            rotate(37deg)
            scale(1.20);
    }

    52% {
        transform:
            translate(-2px,-26px)
            rotate(84deg)
            scale(.90);
    }

    80% {
        transform:
            translate(0,2px)
            rotate(0)
            scale(.86);
    }

    100% {
        transform:
            translate(0,0)
            scale(1);
    }
}


@keyframes armBonkStarOneV3 {

    0% {
        opacity: 0;
        transform: scale(.2);
    }

    25% {
        opacity: 1;
        transform: scale(1.35);
    }

    100% {
        opacity: 0;

        transform:
            translate(19px,-17px)
            rotate(70deg)
            scale(.2);
    }
}


@keyframes armBonkStarTwoV3 {

    0% {
        opacity: 0;
        transform: scale(.2);
    }

    25% {
        opacity: 1;
        transform: scale(1.17);
    }

    100% {
        opacity: 0;

        transform:
            translate(-10px,-23px)
            rotate(-74deg)
            scale(.2);
    }
}


@keyframes armBonkFinalV3 {

    0% {
        opacity: 0;

        transform:
            translate(-50%,-50%)
            scale(.60)
            rotate(-5deg);
    }

    43% {
        opacity: 1;

        transform:
            translate(-50%,-50%)
            scale(1.13)
            rotate(3deg);
    }

    69% {
        transform:
            translate(-50%,-50%)
            scale(.96)
            rotate(-1deg);
    }

    100% {
        opacity: 1;

        transform:
            translate(-50%,-50%)
            scale(1);
    }
}


/* ============================================================
   FLIGHT CHARACTERS
============================================================ */


/*
 * 😂 логотип слегка болтается в полёте.
 */

.arm-flight-laugh {
    filter:
        drop-shadow(
            0 5px 9px
            rgba(105,197,243,.16)
        ) !important;
}


/*
 * 🔥 только искра — задано выше.
 */


/*
 * 🤡 никакого метеорного следа.
 */

.arm-flight-clown .arm-flight-tail {
    display: none !important;
}


/*
 * ❤️ здесь НЕТ ни одного селектора.
 */


/* ============================================================
   ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .arm-scene-like *,
    .arm-scene-laugh *,
    .arm-scene-fire *,
    .arm-scene-cry *,
    .arm-scene-clown *,

    .arm-scene-like::before,
    .arm-scene-like::after,

    .arm-scene-laugh::before,
    .arm-scene-laugh::after,

    .arm-scene-cry::before {

        animation-duration:
            1ms !important;

        animation-delay:
            0ms !important;
    }
}


/* ============================================================
   arena-cry-result-shock-v4

   😭 ARENA RESULT SHOCK

             ┌─────┐
             │ 0/2 │
             └─────┘
                ↓
              ARENA
                …
                ↓
           💧       💧
                ↓
               😭

   Плотина V3 полностью отключается.
============================================================ */


/* ============================================================
   СЦЕНА
============================================================ */

.arm-scene-cry {
    width: 104px !important;
    height: 104px !important;

    overflow: visible !important;
}


/*
 * Старую воду-плотину больше не показываем.
 */

.arm-scene-cry::before,
.arm-scene-cry::after {
    content: none !important;
    display: none !important;
}


/* ============================================================
   ЛОГОТИП АРЕНЫ
============================================================ */

.arm-scene-cry .arm-logo-full {
    position: absolute !important;

    z-index: 8 !important;

    left: 50% !important;
    top: 58% !important;

    width: 58px !important;
    height: 58px !important;

    inset: auto !important;

    opacity: 1 !important;

    transform-origin:
        50% 80% !important;

    animation:
        arenaCryLogoShockV4
        1540ms
        cubic-bezier(.18,.78,.18,1)
        forwards !important;
}


/* ============================================================
   КАРТОЧКА РЕЗУЛЬТАТА
   Используем бывший .arm-crack
============================================================ */

.arm-scene-cry .arm-crack {
    position: absolute !important;

    z-index: 30 !important;

    left: 50% !important;
    top: -18px !important;

    width: 49px !important;
    height: 31px !important;

    opacity: 0;

    border:
        1px solid
        rgba(255,255,255,.12) !important;

    border-radius:
        8px !important;

    clip-path:
        none !important;

    background:
        linear-gradient(
            180deg,
            #211918,
            #171212
        ) !important;

    box-shadow:
        0 9px 22px
        rgba(0,0,0,.38),
        inset 0 1px
        rgba(255,255,255,.045) !important;

    transform-origin:
        center bottom !important;

    animation:
        arenaResultCardDropV4
        870ms
        cubic-bezier(.15,.88,.18,1)
        forwards !important;
}


/*
 * 0/2
 */

.arm-scene-cry .arm-crack::before {
    content: "0/2";

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    color:
        #F4EDEC;

    font-family:
        inherit;

    font-size:
        15px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -.4px;
}


/*
 * Маленькая красная метка ошибки.
 */

.arm-scene-cry .arm-crack::after {
    content: "×";

    position: absolute;

    right: -6px;
    top: -7px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 17px;
    height: 17px;

    border:
        2px solid
        #171212;

    border-radius:
        50%;

    background:
        #B22000;

    color:
        #fff;

    font-size:
        12px;

    font-weight:
        900;

    line-height:
        1;

    box-shadow:
        0 3px 7px
        rgba(0,0,0,.28);
}


/* ============================================================
   СЛЁЗЫ

   Две большие капли появляются ещё ДО финального 😭.
   Поэтому причина реакции считывается.
============================================================ */

.arm-scene-cry .arm-drop {
    position: absolute !important;

    z-index: 24 !important;

    top: 53px !important;

    width: 10px !important;
    height: 20px !important;

    opacity: 0;

    border-radius:
        55% 55% 68% 68% !important;

    background:
        linear-gradient(
            180deg,
            #C5F1FF,
            #74D0F7 42%,
            #46AEE9
        ) !important;

    box-shadow:
        0 2px 8px
        rgba(70,174,233,.34);

    transform-origin:
        50% 0 !important;
}


.arm-scene-cry .arm-drop.d1 {
    left: 27px !important;

    animation:
        arenaCryStreamLeftV4
        760ms
        cubic-bezier(.20,.65,.18,1)
        820ms forwards !important;
}


.arm-scene-cry .arm-drop.d2 {
    left: auto !important;
    right: 27px !important;

    animation:
        arenaCryStreamRightV4
        780ms
        cubic-bezier(.20,.65,.18,1)
        870ms forwards !important;
}


/* ============================================================
   ЛУЖИ
============================================================ */

.arm-scene-cry .arm-ripple {
    position: absolute !important;

    z-index: 15 !important;

    bottom: 3px !important;

    width: 29px !important;
    height: 9px !important;

    opacity: 0;

    border:
        1.5px solid
        rgba(87,190,239,.56) !important;

    border-radius:
        50% !important;

    background:
        transparent !important;
}


.arm-scene-cry .arm-ripple.r1 {
    left: 12px !important;

    animation:
        arenaCryPuddleV4
        520ms ease-out
        1300ms forwards !important;
}


.arm-scene-cry .arm-ripple.r2 {
    left: auto !important;
    right: 12px !important;

    animation:
        arenaCryPuddleV4
        520ms ease-out
        1370ms forwards !important;
}


/* ============================================================
   ФИНАЛЬНЫЙ 😭
============================================================ */

.arm-scene-cry .arm-final {
    position: absolute !important;

    z-index: 20 !important;

    left: 50% !important;
    top: 58% !important;

    width: 60px !important;
    height: 60px !important;

    opacity: 0;

    animation:
        arenaCryFaceRevealV4
        620ms
        cubic-bezier(.14,.92,.17,1)
        1120ms forwards !important;
}


/* ============================================================
   RESULT CARD
============================================================ */

@keyframes arenaResultCardDropV4 {

    0% {
        opacity: 0;

        transform:
            translate(-50%,-39px)
            rotate(-7deg)
            scale(.72);
    }

    25% {
        opacity: 1;
    }

    60% {
        transform:
            translate(-50%,16px)
            rotate(3deg)
            scale(1.07);
    }

    76% {
        transform:
            translate(-50%,11px)
            rotate(-1deg)
            scale(.98);
    }

    /*
     * карточка зависает перед логотипом
     */
    76%, 92% {
        opacity: 1;

        transform:
            translate(-50%,11px)
            rotate(0)
            scale(1);
    }

    100% {
        opacity: .88;

        transform:
            translate(-50%,11px)
            scale(1);
    }
}


/* ============================================================
   LOGO REACTION
============================================================ */

@keyframes arenaCryLogoShockV4 {

    /*
     * Стоит нормально.
     */
    0%, 30% {
        opacity: 1;

        transform:
            translate(-50%,-50%)
            scale(1)
            rotate(0);
    }

    /*
     * Увидел 0/2.
     */
    37% {
        transform:
            translate(-50%,-50%)
            translateY(2px)
            scaleX(1.03)
            scaleY(.97);
    }

    /*
     * Очень важная пауза:
     * "..."
     */
    37%, 49% {
        transform:
            translate(-50%,-50%)
            translateY(2px)
            scaleX(1.03)
            scaleY(.97);
    }

    /*
     * Поник.
     */
    58% {
        transform:
            translate(-50%,-50%)
            translateY(6px)
            rotate(2deg)
            scaleX(.95)
            scaleY(.92);
    }

    67% {
        transform:
            translate(-50%,-50%)
            translateY(7px)
            rotate(-2deg)
            scaleX(.94)
            scaleY(.90);
    }

    /*
     * Первый всхлип.
     */
    74% {
        transform:
            translate(-50%,-50%)
            translateY(4px)
            scaleX(1.04)
            scaleY(.95);
    }

    81% {
        transform:
            translate(-50%,-50%)
            translateY(7px)
            scaleX(.95)
            scaleY(.91);
    }

    /*
     * Уходит под финальное лицо.
     */
    91% {
        opacity: .65;

        transform:
            translate(-50%,-50%)
            translateY(8px)
            scale(.86);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%,-50%)
            translateY(9px)
            scale(.72);
    }
}


/* ============================================================
   TEAR STREAMS
============================================================ */

@keyframes arenaCryStreamLeftV4 {

    0% {
        opacity: 0;

        transform:
            translate(0,-7px)
            scale(.28);
    }

    16% {
        opacity: 1;
    }

    40% {
        opacity: 1;

        transform:
            translate(-3px,7px)
            scaleX(.95)
            scaleY(1.25);
    }

    /*
     * большая слеза падает
     */
    76% {
        opacity: .95;

        transform:
            translate(-7px,37px)
            scaleX(.78)
            scaleY(1.10);
    }

    100% {
        opacity: 0;

        transform:
            translate(-9px,50px)
            scale(.38);
    }
}


@keyframes arenaCryStreamRightV4 {

    0% {
        opacity: 0;

        transform:
            translate(0,-7px)
            scale(.28);
    }

    16% {
        opacity: 1;
    }

    40% {
        opacity: 1;

        transform:
            translate(3px,7px)
            scaleX(.95)
            scaleY(1.25);
    }

    76% {
        opacity: .95;

        transform:
            translate(7px,37px)
            scaleX(.78)
            scaleY(1.10);
    }

    100% {
        opacity: 0;

        transform:
            translate(9px,50px)
            scale(.38);
    }
}


/* ============================================================
   PUDDLES
============================================================ */

@keyframes arenaCryPuddleV4 {

    0% {
        opacity: 0;

        transform:
            scale(.20);
    }

    24% {
        opacity: .72;
    }

    100% {
        opacity: 0;

        transform:
            scale(1.85);
    }
}


/* ============================================================
   FINAL FACE
============================================================ */

@keyframes arenaCryFaceRevealV4 {

    0% {
        opacity: 0;

        transform:
            translate(-50%,-50%)
            translateY(5px)
            scale(.45);
    }

    /*
     * всхлип
     */
    36% {
        opacity: 1;

        transform:
            translate(-50%,-50%)
            translateY(-2px)
            scaleX(1.10)
            scaleY(.94);
    }

    53% {
        transform:
            translate(-50%,-50%)
            translateY(2px)
            scaleX(.95)
            scaleY(1.06);
    }

    70% {
        transform:
            translate(-50%,-50%)
            scale(1.04);
    }

    100% {
        opacity: 1;

        transform:
            translate(-50%,-50%)
            scale(1);
    }
}


/* ============================================================
   При docking карточка результата исчезает,
   чтобы в slot улетел только 😭.
============================================================ */

.arm-scene-cry.is-docking .arm-crack {
    opacity: 0 !important;

    transition:
        opacity 160ms ease !important;
}


.arm-scene-cry.is-docking .arm-drop,
.arm-scene-cry.is-docking .arm-ripple {
    opacity: 0 !important;
}


@media (prefers-reduced-motion: reduce) {

    .arm-scene-cry *,
    .arm-scene-cry::before,
    .arm-scene-cry::after {
        animation-duration:
            1ms !important;

        animation-delay:
            0ms !important;
    }
}


/* ============================================================
   arena-laugh-perfect-split-v5

   😂 FIX:
   обе половины используют ОДНУ И ТУ ЖЕ геометрию SVG.
   До раскрытия логотип выглядит цельным.
============================================================ */


/* ============================================================
   ОДИНАКОВАЯ СИСТЕМА КООРДИНАТ
============================================================ */

.arm-scene-laugh .arm-logo-half {
    position: absolute !important;

    /*
     * Не используем inset:13px,
     * потому что одновременно с width/height
     * он может давать браузеру лишние ограничения.
     */
    inset: auto !important;

    left: 13px !important;
    top: 13px !important;

    width: 68px !important;
    height: 68px !important;

    margin: 0 !important;
    padding: 0 !important;

    /*
     * Обе половины вращаются относительно
     * одной и той же центральной линии.
     */
    transform-origin:
        34px 44px !important;

    overflow: visible !important;

    opacity: 1 !important;
}


/* ============================================================
   ВАЖНО:
   SVG внутри обеих половин должен лежать ПИКСЕЛЬ В ПИКСЕЛЬ
============================================================ */

.arm-scene-laugh
.arm-logo-half
.arm-scene-logo {

    position: absolute !important;

    inset: 0 !important;

    left: 0 !important;
    top: 0 !important;

    width: 68px !important;
    height: 68px !important;

    min-width: 68px !important;
    min-height: 68px !important;

    max-width: 68px !important;
    max-height: 68px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    transform: none !important;

    transform-origin:
        center center !important;
}


/* ============================================================
   ИДЕАЛЬНЫЙ ЦЕНТРАЛЬНЫЙ РАЗРЕЗ

   Даём ~0.7px перекрытия.
   Это специально, чтобы на Retina/125%/150% масштабе
   между половинами никогда не появлялась чёрная щель.
============================================================ */

.arm-scene-laugh .arm-logo-left {
    clip-path:
        polygon(
            0 0,
            50.8% 0,
            50.8% 100%,
            0 100%
        ) !important;

    animation:
        armLaughPerfectLeftV5
        1100ms
        cubic-bezier(.17,.78,.20,1)
        forwards !important;
}


.arm-scene-laugh .arm-logo-right {
    clip-path:
        polygon(
            49.2% 0,
            100% 0,
            100% 100%,
            49.2% 100%
        ) !important;

    animation:
        armLaughPerfectRightV5
        1100ms
        cubic-bezier(.17,.78,.20,1)
        forwards !important;
}


/* ============================================================
   НОВАЯ РЕЖИССУРА РАСКРЫТИЯ

   0–45%:
       логотип практически цельный.

   Потом он сначала начинает смеяться ЦЕЛИКОМ.

   И только после этого половинки раскрываются.
============================================================ */

@keyframes armLaughPerfectLeftV5 {

    0%, 22% {
        opacity: 1;

        transform:
            translate(0,0)
            rotate(0deg);
    }

    /*
     * лёгкий смешок
     */
    29% {
        transform:
            translate(-1px,-2px)
            rotate(-1.2deg);
    }

    34% {
        transform:
            translate(1px,1px)
            rotate(1deg);
    }

    39% {
        transform:
            translate(-1px,-3px)
            rotate(-1.5deg);
    }

    44% {
        transform:
            translate(1px,1px)
            rotate(.8deg);
    }

    /*
     * Только теперь начинается настоящий разъезд.
     */
    53% {
        transform:
            translate(-4px,-4px)
            rotate(-4deg);
    }

    65% {
        transform:
            translate(-9px,0)
            rotate(-8deg);
    }

    77% {
        opacity: 1;

        transform:
            translate(-16px,-4px)
            rotate(-13deg);
    }

    90% {
        opacity: .55;

        transform:
            translate(-23px,1px)
            rotate(-17deg)
            scale(.87);
    }

    100% {
        opacity: 0;

        transform:
            translate(-29px,5px)
            rotate(-20deg)
            scale(.74);
    }
}


@keyframes armLaughPerfectRightV5 {

    0%, 22% {
        opacity: 1;

        transform:
            translate(0,0)
            rotate(0deg);
    }

    29% {
        transform:
            translate(1px,-2px)
            rotate(1.2deg);
    }

    34% {
        transform:
            translate(-1px,1px)
            rotate(-1deg);
    }

    39% {
        transform:
            translate(1px,-3px)
            rotate(1.5deg);
    }

    44% {
        transform:
            translate(-1px,1px)
            rotate(-.8deg);
    }

    53% {
        transform:
            translate(4px,-4px)
            rotate(4deg);
    }

    65% {
        transform:
            translate(9px,0)
            rotate(8deg);
    }

    77% {
        opacity: 1;

        transform:
            translate(16px,-4px)
            rotate(13deg);
    }

    90% {
        opacity: .55;

        transform:
            translate(23px,1px)
            rotate(17deg)
            scale(.87);
    }

    100% {
        opacity: 0;

        transform:
            translate(29px,5px)
            rotate(20deg)
            scale(.74);
    }
}


/* ============================================================
   ЛИЦО ПОЯВЛЯЕТСЯ ИЗ ЦЕНТРА РАЗРЕЗА,
   а не под уже кривыми красными блоками.
============================================================ */

.arm-scene-laugh .arm-final {
    z-index: 8 !important;

    animation:
        armLaughFacePerfectV5
        680ms
        cubic-bezier(.14,.90,.18,1)
        620ms forwards !important;
}


@keyframes armLaughFacePerfectV5 {

    0% {
        opacity: 0;

        transform:
            translate(-50%,-50%)
            scale(.32);
    }

    28% {
        opacity: .25;

        transform:
            translate(-50%,-50%)
            scale(.55);
    }

    /*
     * Половинки уже достаточно раскрылись.
     */
    48% {
        opacity: 1;

        transform:
            translate(-50%,-50%)
            scale(1.15)
            rotate(3deg);
    }

    67% {
        transform:
            translate(-50%,-50%)
            scale(.94)
            rotate(-2deg);
    }

    82% {
        transform:
            translate(-50%,-50%)
            scale(1.05)
            rotate(1deg);
    }

    100% {
        opacity: 1;

        transform:
            translate(-50%,-50%)
            scale(1);
    }
}


/* ============================================================
   Убираем любые старые размеры SVG,
   способные перетянуть одну половину отдельно.
============================================================ */

.arm-scene-laugh
.arm-logo-left
svg,

.arm-scene-laugh
.arm-logo-right
svg {

    width: 68px !important;
    height: 68px !important;

    x: 0;
    y: 0;
}


/* ============================================================
   На высоком DPI шов тоже не должен мигать.
============================================================ */

@media (min-resolution: 1.5dppx) {

    .arm-scene-laugh .arm-logo-left {
        clip-path:
            polygon(
                0 0,
                51% 0,
                51% 100%,
                0 100%
            ) !important;
    }

    .arm-scene-laugh .arm-logo-right {
        clip-path:
            polygon(
                49% 0,
                100% 0,
                100% 100%,
                49% 100%
            ) !important;
    }
}



/* ============================================================
   arena-motion-smart-placement-v6

   Большая анимационная сцена находится
   в свободной зоне рядом с message bubble.

   На финале вся сцена физически возвращается
   к reaction-slot.
============================================================ */


.arm-scene {

    --arm-dock-x-v6: 0px;
    --arm-dock-y-v6: 0px;

    /*
     * Это transition именно самой сцены,
     * не внутренних персонажей.
     */
    transition:
        transform
        380ms
        cubic-bezier(.16,.84,.20,1),

        opacity
        300ms
        ease !important;
}


/* ============================================================
   DOCKING

   ВАЖНО:
   раньше scene уже находилась прямо в target,
   поэтому ей хватало scale().

   Теперь она стоит в свободной зоне,
   поэтому при docking одновременно:
     - едет в slot,
     - уменьшается.
============================================================ */

.arm-scene.is-docking {

    transform:
        translate(-50%, -50%)

        translate(
            var(--arm-dock-x-v6),
            var(--arm-dock-y-v6)
        )

        scale(.31) !important;
}


.arm-scene.is-docked {

    opacity: 0 !important;

    transform:
        translate(-50%, -50%)

        translate(
            var(--arm-dock-x-v6),
            var(--arm-dock-y-v6)
        )

        scale(.27) !important;
}


/* ============================================================
   СЦЕНА СПРАВА ОТ ВХОДЯЩЕГО MESSAGE
============================================================ */

.arm-scene[data-arm-placement="right"] {

    transform-origin:
        left center !important;
}


/* ============================================================
   СЦЕНА СЛЕВА ОТ ИСХОДЯЩЕГО MESSAGE
============================================================ */

.arm-scene[data-arm-placement="left"] {

    transform-origin:
        right center !important;
}


.arm-scene[data-arm-placement="bottom"] {

    transform-origin:
        center top !important;
}


.arm-scene[data-arm-placement="top"] {

    transform-origin:
        center bottom !important;
}


/* ============================================================
   RESULT SHOCK 😭

   Карточка 0/2 теперь находится в свободной зоне,
   поэтому ей не надо визуально прилипать
   к самому тексту сообщения.
============================================================ */

.arm-scene-cry[data-arm-placement="right"]
.arm-crack,

.arm-scene-cry[data-arm-placement="left"]
.arm-crack {

    top:
        -13px !important;
}


/*
 * У входящего bubble справа обычно много пространства.
 * Чуть уменьшаем карточку, чтобы сцена выглядела
 * как отдельная мини-анимация, а не часть сообщения.
 */

.arm-scene-cry
.arm-crack {

    max-width:
        49px !important;
}


/* ============================================================
   На маленьком экране расстояния меньше,
   docking всё равно остаётся точным.
============================================================ */

@media (max-width: 700px) {

    .arm-scene {
        transition-duration:
            340ms !important;
    }
}


/* ============================================================
   ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .arm-scene.is-docking,
    .arm-scene.is-docked {

        transition-duration:
            1ms !important;
    }
}