/* ============================================================
   arena-reactions-director-v71

   Каждая reaction scene = один цельный sticker.
============================================================ */


/* ============================================================
   STAGE RESET
============================================================ */

.arm-scene-director71 {

    width:
        96px !important;

    height:
        96px !important;

    overflow:
        visible !important;

    isolation:
        isolate;
}


/*
 * Гасим псевдоэлементы старых V3/V4/V5,
 * которые висели на .arm-scene-like/laugh/cry.
 */

.arm-scene-director71::before,
.arm-scene-director71::after {

    content:
        none !important;

    display:
        none !important;
}


/*
 * Все наши элементы находятся в одном sticker-root.
 */

.arm71-sticker {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        88px;

    height:
        88px;

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

    transform-origin:
        center;

    pointer-events:
        none;

    isolation:
        isolate;
}


/*
 * Очень слабый halo визуально объединяет сцену.
 */

.arm71-sticker::before {

    content: "";

    position:
        absolute;

    z-index:
        -2;

    left:
        50%;

    top:
        50%;

    width:
        75px;

    height:
        75px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(178,32,0,.07),
            rgba(178,32,0,.018) 48%,
            transparent 72%
        );

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


.arm71-logo {

    display:
        block;

    width:
        100%;

    height:
        100%;
}


/* ============================================================
   👍 STAMP
============================================================ */

.arm71-stamp {

    position:
        absolute;

    z-index:
        20;

    left:
        50%;

    top:
        50%;

    width:
        54px;

    height:
        79px;

    opacity:
        0;

    animation:
        arm71StampFall
        850ms
        cubic-bezier(.12,.88,.16,1)
        forwards;
}


.arm71-stamp-head {

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        54px;

    height:
        54px;

    filter:
        drop-shadow(
            0 8px 10px
            rgba(0,0,0,.38)
        );
}


.arm71-stamp-handle {

    position:
        absolute;

    z-index:
        -1;

    left:
        50%;

    top:
        0;

    width:
        20px;

    height:
        34px;

    border-radius:
        8px 8px 3px 3px;

    background:
        linear-gradient(
            90deg,
            #55100F,
            #8D1717 52%,
            #B22000
        );

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

    transform:
        translateX(-50%);
}


.arm71-like-result {

    position:
        absolute;

    z-index:
        10;

    left:
        50%;

    top:
        56%;

    opacity:
        0;

    transform:
        translate(-50%,-50%)
        scaleX(1.24)
        scaleY(.40);

    animation:
        arm71LikeResult
        500ms
        cubic-bezier(.14,.90,.18,1)
        420ms forwards;
}


.arm71-like-result
.arm-icon {

    width:
        47px !important;

    height:
        47px !important;
}


.arm71-impact {

    position:
        absolute;

    z-index:
        2;

    left:
        50%;

    top:
        60%;

    width:
        42px;

    height:
        15px;

    opacity:
        0;

    border:
        1.5px solid
        rgba(237,28,36,.56);

    border-radius:
        50%;

    animation:
        arm71Impact
        430ms ease-out
        450ms forwards;
}


@keyframes arm71StampFall {

    0% {
        opacity: 0;

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

    18% {
        opacity: 1;
    }

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

    /*
     * БАМ
     */
    59% {
        transform:
            translate(-50%,-43px)
            scaleX(1.08)
            scaleY(.88);
    }

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

    81% {
        opacity: 1;

        transform:
            translate(-50%,-83px)
            scale(.89);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%,-123px)
            scale(.68);
    }
}


@keyframes arm71LikeResult {

    0% {
        opacity: 0;

        transform:
            translate(-50%,-50%)
            scaleX(1.24)
            scaleY(.40);
    }

    38% {
        opacity: 1;

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

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

    100% {
        opacity: 1;

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


@keyframes arm71Impact {

    from {
        opacity: .68;

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

    to {
        opacity: 0;

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


/* ============================================================
   😂 ЛОГОТИП САМ СМЕЁТСЯ
============================================================ */

.arm71-laugh-logo {

    position:
        absolute;

    z-index:
        8;

    left:
        50%;

    top:
        50%;

    width:
        61px;

    height:
        61px;

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

    animation:
        arm71LaughBody
        1080ms
        cubic-bezier(.18,.78,.20,1)
        forwards;
}


.arm71-eye {

    position:
        absolute;

    z-index:
        15;

    top:
        31%;

    width:
        12px;

    height:
        7px;

    opacity:
        0;

    border-top:
        3px solid
        #F9EEEB;

    border-radius:
        50%;

    animation:
        arm71FaceAppear
        180ms ease
        260ms forwards;
}


.arm71-eye.left {

    left:
        21%;

    transform:
        rotate(14deg);
}


.arm71-eye.right {

    right:
        21%;

    transform:
        rotate(-14deg);
}


.arm71-mouth {

    position:
        absolute;

    z-index:
        15;

    left:
        50%;

    top:
        57%;

    width:
        24px;

    height:
        12px;

    opacity:
        0;

    border-bottom:
        5px solid
        #F9EEEB;

    border-radius:
        0 0 24px 24px;

    transform:
        translateX(-50%);

    animation:
        arm71FaceAppear
        180ms ease
        290ms forwards;
}


.arm71-tear {

    position:
        absolute;

    z-index:
        18;

    top:
        39%;

    width:
        8px;

    height:
        14px;

    opacity:
        0;

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

    background:
        linear-gradient(
            180deg,
            #C0EFFF,
            #55BBEE
        );

    box-shadow:
        0 2px 6px
        rgba(85,187,238,.28);
}


.arm71-tear.left {

    left:
        10%;

    animation:
        arm71LaughTearLeft
        650ms ease-out
        450ms forwards;
}


.arm71-tear.right {

    right:
        10%;

    animation:
        arm71LaughTearRight
        690ms ease-out
        480ms forwards;
}


.arm71-laugh-ring {

    position:
        absolute;

    top:
        50%;

    width:
        15px;

    height:
        31px;

    opacity:
        0;
}


.arm71-laugh-ring.r1 {

    left:
        3px;

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

    border-radius:
        50%;

    animation:
        arm71LaughRingLeft
        430ms ease-out
        390ms forwards;
}


.arm71-laugh-ring.r2 {

    right:
        3px;

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

    border-radius:
        50%;

    animation:
        arm71LaughRingRight
        430ms ease-out
        420ms forwards;
}


@keyframes arm71LaughBody {

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

    30% {
        transform:
            translate(-50%,-54%)
            rotate(-3deg);
    }

    36% {
        transform:
            translate(-50%,-47%)
            rotate(3deg);
    }

    43% {
        transform:
            translate(-50%,-55%)
            rotate(-4deg)
            scaleX(1.03);
    }

    50% {
        transform:
            translate(-50%,-46%)
            rotate(3deg);
    }

    58% {
        transform:
            translate(-50%,-56%)
            rotate(-3deg)
            scaleX(.96);
    }

    66% {
        transform:
            translate(-50%,-46%)
            rotate(3deg)
            scaleX(1.04);
    }

    75% {
        transform:
            translate(-50%,-53%)
            rotate(-2deg);
    }

    86% {
        transform:
            translate(-50%,-48%)
            rotate(1deg);
    }

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


@keyframes arm71FaceAppear {

    to {
        opacity: 1;
    }
}


@keyframes arm71LaughTearLeft {

    0% {
        opacity: 0;

        transform:
            translate(4px,-2px)
            scale(.3);
    }

    20% {
        opacity: 1;
    }

    66% {
        opacity: 1;

        transform:
            translate(-16px,-12px)
            rotate(-38deg);
    }

    100% {
        opacity: 0;

        transform:
            translate(-27px,9px)
            rotate(-85deg)
            scale(.2);
    }
}


@keyframes arm71LaughTearRight {

    0% {
        opacity: 0;

        transform:
            translate(-4px,-2px)
            scale(.3);
    }

    20% {
        opacity: 1;
    }

    66% {
        opacity: 1;

        transform:
            translate(16px,-12px)
            rotate(38deg);
    }

    100% {
        opacity: 0;

        transform:
            translate(28px,10px)
            rotate(88deg)
            scale(.2);
    }
}


@keyframes arm71LaughRingLeft {

    from {
        opacity: .6;

        transform:
            translateX(8px)
            scale(.5);
    }

    to {
        opacity: 0;

        transform:
            translateX(-10px)
            scale(1.4);
    }
}


@keyframes arm71LaughRingRight {

    from {
        opacity: .6;

        transform:
            translateX(-8px)
            scale(.5);
    }

    to {
        opacity: 0;

        transform:
            translateX(10px)
            scale(1.4);
    }
}


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

.arm71-reactor {

    position:
        absolute;

    z-index:
        8;

    left:
        50%;

    top:
        50%;

    width:
        60px;

    height:
        60px;

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

    animation:
        arm71Reactor
        1030ms ease
        forwards;
}


.arm71-fire-spark {

    position:
        absolute;

    z-index:
        20;

    left:
        18px;

    top:
        18px;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #FFF7D0;

    box-shadow:
        0 0 5px #fff,
        0 0 11px #FFB529,
        0 0 20px #ED1C24;

    animation:
        arm71Spark
        750ms linear
        forwards;
}


.arm71-fire-result {

    position:
        absolute;

    z-index:
        15;

    left:
        50%;

    top:
        50%;

    opacity:
        0;

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

    animation:
        arm71FireResult
        520ms
        cubic-bezier(.14,.92,.17,1)
        720ms forwards;
}


.arm71-fire-result
.arm-icon {

    width:
        54px !important;

    height:
        54px !important;
}


.arm71-ember {

    position:
        absolute;

    z-index:
        18;

    left:
        50%;

    top:
        50%;

    width:
        4px;

    height:
        4px;

    opacity:
        0;

    border-radius:
        50%;

    background:
        #FF9428;
}


.arm71-ember.e1 {
    animation:
        arm71Ember1
        540ms ease-out
        780ms forwards;
}

.arm71-ember.e2 {
    animation:
        arm71Ember2
        600ms ease-out
        820ms forwards;
}

.arm71-ember.e3 {
    animation:
        arm71Ember3
        520ms ease-out
        850ms forwards;
}


@keyframes arm71Spark {

    0% {
        opacity: 0;

        transform:
            translate(0,0)
            scale(.3);
    }

    8% {
        opacity: 1;
    }

    24% {
        transform:
            translate(26px,26px);
    }

    45% {
        transform:
            translate(52px,0);
    }

    65% {
        transform:
            translate(52px,52px);
    }

    83% {
        transform:
            translate(0,52px);
    }

    96% {
        opacity: 1;

        transform:
            translate(0,0)
            scale(1.4);
    }

    100% {
        opacity: 0;

        transform:
            translate(0,0)
            scale(2.2);
    }
}


@keyframes arm71Reactor {

    0%, 47% {
        opacity: 1;

        filter:
            brightness(1);
    }

    63% {
        filter:
            brightness(1.8)
            saturate(1.4)
            drop-shadow(
                0 0 10px
                rgba(255,105,20,.45)
            );
    }

    77% {
        filter:
            brightness(2.8);

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

    100% {
        opacity: 0;

        filter:
            brightness(4);

        transform:
            translate(-50%,-73%)
            scaleX(.58)
            scaleY(.16);
    }
}


@keyframes arm71FireResult {

    0% {
        opacity: 0;

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

    42% {
        opacity: 1;

        transform:
            translate(-50%,-50%)
            translateY(-4px)
            scale(1.18);
    }

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

    100% {
        opacity: 1;

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


@keyframes arm71Ember1 {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;

        transform:
            translate(-18px,-39px)
            scale(.2);
    }
}


@keyframes arm71Ember2 {

    from {
        opacity: .9;
    }

    to {
        opacity: 0;

        transform:
            translate(5px,-48px)
            scale(.1);
    }
}


@keyframes arm71Ember3 {

    from {
        opacity: .9;
    }

    to {
        opacity: 0;

        transform:
            translate(20px,-34px)
            scale(.2);
    }
}


/* ============================================================
   😭 0/2 → ПЛАЧЕТ САМ ЛОГОТИП
============================================================ */

.arm-scene-cry.arm-scene-director71 {

    width:
        102px !important;

    height:
        108px !important;
}


.arm71-score {

    position:
        absolute;

    z-index:
        25;

    left:
        56%;

    top:
        -4px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        47px;

    height:
        29px;

    opacity:
        0;

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

    border-radius:
        8px;

    background:
        linear-gradient(
            180deg,
            #211A19,
            #171212
        );

    box-shadow:
        0 7px 17px
        rgba(0,0,0,.34);

    animation:
        arm71ScoreDrop
        610ms
        cubic-bezier(.14,.90,.18,1)
        forwards;
}


.arm71-score span {

    color:
        #F4ECEA;

    font-size:
        14px;

    font-weight:
        850;
}


.arm71-score b {

    position:
        absolute;

    right:
        -7px;

    top:
        -7px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        17px;

    height:
        17px;

    border:
        2px solid
        #171212;

    border-radius:
        50%;

    background:
        #B22000;

    color:
        white;

    font-size:
        12px;

    line-height:
        1;
}


.arm71-sad-logo {

    position:
        absolute;

    z-index:
        8;

    left:
        50%;

    top:
        58%;

    width:
        59px;

    height:
        59px;

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

    animation:
        arm71SadBody
        1230ms
        cubic-bezier(.17,.76,.20,1)
        forwards;
}


.arm71-sad-eye {

    position:
        absolute;

    z-index:
        15;

    top:
        32%;

    width:
        11px;

    height:
        6px;

    opacity:
        0;

    border-top:
        3px solid
        #F8ECEA;

    animation:
        arm71SadFaceIn
        170ms ease
        560ms forwards;
}


.arm71-sad-eye.left {

    left:
        21%;

    transform:
        rotate(-15deg);
}


.arm71-sad-eye.right {

    right:
        21%;

    transform:
        rotate(15deg);
}


.arm71-sad-mouth {

    position:
        absolute;

    z-index:
        15;

    left:
        50%;

    top:
        61%;

    width:
        20px;

    height:
        8px;

    opacity:
        0;

    border-top:
        3px solid
        #F8ECEA;

    border-radius:
        50%;

    transform:
        translateX(-50%);

    animation:
        arm71SadFaceIn
        170ms ease
        590ms forwards;
}


.arm71-sad-tear {

    position:
        absolute;

    z-index:
        18;

    top:
        43%;

    width:
        9px;

    height:
        18px;

    opacity:
        0;

    border-radius:
        60% 60% 76% 76%;

    background:
        linear-gradient(
            180deg,
            #C6F1FF,
            #53B9EE
        );
}


.arm71-sad-tear.left {

    left:
        17%;

    animation:
        arm71SadTearLeft
        680ms ease
        690ms forwards;
}


.arm71-sad-tear.right {

    right:
        17%;

    animation:
        arm71SadTearRight
        710ms ease
        730ms forwards;
}


.arm71-puddle {

    position:
        absolute;

    bottom:
        -1px;

    width:
        25px;

    height:
        8px;

    opacity:
        0;

    border:
        1px solid
        rgba(85,185,238,.52);

    border-radius:
        50%;
}


.arm71-puddle.left {

    left:
        10px;

    animation:
        arm71Puddle
        430ms ease-out
        1080ms forwards;
}


.arm71-puddle.right {

    right:
        10px;

    animation:
        arm71Puddle
        430ms ease-out
        1130ms forwards;
}


@keyframes arm71ScoreDrop {

    0% {
        opacity: 0;

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

    43% {
        opacity: 1;

        transform:
            translate(-50%,4px)
            rotate(3deg)
            scale(1.06);
    }

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

    100% {
        opacity: 1;

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


@keyframes arm71SadBody {

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

    /*
     * Увидел 0/2 и завис.
     */
    47%, 56% {
        transform:
            translate(-50%,-47%)
            scaleX(1.02)
            scaleY(.97);
    }

    /*
     * Поник.
     */
    67% {
        transform:
            translate(-50%,-41%)
            rotate(2deg)
            scaleX(.96)
            scaleY(.91);
    }

    76% {
        transform:
            translate(-50%,-39%)
            rotate(-2deg)
            scaleX(.94)
            scaleY(.89);
    }

    /*
     * Всхлипы.
     */
    84% {
        transform:
            translate(-50%,-44%)
            scaleX(1.04)
            scaleY(.94);
    }

    92% {
        transform:
            translate(-50%,-40%)
            scaleX(.95)
            scaleY(.91);
    }

    100% {
        transform:
            translate(-50%,-42%)
            scale(.97);
    }
}


@keyframes arm71SadFaceIn {

    to {
        opacity: 1;
    }
}


@keyframes arm71SadTearLeft {

    0% {
        opacity: 0;

        transform:
            translateY(-4px)
            scale(.3);
    }

    18% {
        opacity: 1;
    }

    73% {
        opacity: 1;

        transform:
            translate(-5px,30px)
            scaleY(1.15);
    }

    100% {
        opacity: 0;

        transform:
            translate(-7px,43px)
            scale(.3);
    }
}


@keyframes arm71SadTearRight {

    0% {
        opacity: 0;

        transform:
            translateY(-4px)
            scale(.3);
    }

    18% {
        opacity: 1;
    }

    73% {
        opacity: 1;

        transform:
            translate(5px,30px)
            scaleY(1.15);
    }

    100% {
        opacity: 0;

        transform:
            translate(7px,43px)
            scale(.3);
    }
}


@keyframes arm71Puddle {

    0% {
        opacity: .7;

        transform:
            scale(.25);
    }

    100% {
        opacity: 0;

        transform:
            scale(1.7);
    }
}


/* ============================================================
   🤡 BONK — ОДНА КОМПОЗИЦИЯ
============================================================ */

.arm-scene-clown.arm-scene-director71 {

    width:
        112px !important;
}


.arm71-bonk-arena {

    position:
        absolute;

    z-index:
        8;

    left:
        8px;

    top:
        34px;

    width:
        38px;

    height:
        38px;

    opacity:
        0;

    animation:
        arm71ArenaPeek
        700ms ease
        180ms forwards;
}


.arm71-bonk-victim {

    position:
        absolute;

    z-index:
        10;

    right:
        3px;

    top:
        29px;

    animation:
        arm71ClownVictim
        1170ms
        cubic-bezier(.15,.82,.18,1)
        250ms forwards;
}


.arm71-bonk-victim
.arm-icon {

    width:
        45px !important;

    height:
        45px !important;
}


.arm71-hammer {

    position:
        absolute;

    z-index:
        22;

    left:
        26px;

    top:
        -1px;

    width:
        56px;

    height:
        56px;

    opacity:
        0;

    transform-origin:
        14px 48px;

    animation:
        arm71Hammer
        880ms
        cubic-bezier(.12,.85,.16,1)
        460ms forwards;
}


.arm71-hammer svg {

    display:
        block;

    width:
        100%;

    height:
        100%;
}


/*
 * Красный нос реагирует отдельно на BONK.
 */

.arm71-bonk-victim
.arm-clown-nose {

    transform-box:
        fill-box;

    transform-origin:
        center;

    animation:
        arm71Nose
        570ms ease
        960ms forwards;
}


.arm71-star {

    position:
        absolute;

    z-index:
        30;

    width:
        10px;

    height:
        10px;

    opacity:
        0;

    background:
        #FFD45E;

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


.arm71-star.s1 {

    right:
        -1px;

    top:
        10px;

    animation:
        arm71Star1
        500ms ease-out
        1010ms forwards;
}


.arm71-star.s2 {

    right:
        25px;

    top:
        -1px;

    animation:
        arm71Star2
        520ms ease-out
        1040ms forwards;
}


@keyframes arm71ArenaPeek {

    0% {
        opacity: 0;

        transform:
            translateX(-22px)
            rotate(-6deg)
            scale(.7);
    }

    43% {
        opacity: 1;

        transform:
            translateX(2px)
            rotate(1deg)
            scale(1.05);
    }

    67% {
        transform:
            translateX(0)
            scale(.98);
    }

    100% {
        opacity: 1;

        transform:
            scale(1);
    }
}


@keyframes arm71Hammer {

    0%, 22% {
        opacity: 0;

        transform:
            rotate(-76deg)
            scale(.6);
    }

    34% {
        opacity: 1;
    }

    /*
     * Показываем молоток и держим паузу.
     */
    47%, 67% {
        opacity: 1;

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

    /*
     * BONK
     */
    78% {
        transform:
            rotate(34deg)
            scale(1.11);
    }

    87% {
        transform:
            rotate(17deg)
            scale(.96);
    }

    100% {
        opacity: 0;

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


@keyframes arm71ClownVictim {

    0%, 54% {
        transform:
            scale(1)
            rotate(0);
    }

    /*
     * Увидел молоток.
     */
    61%, 67% {
        transform:
            translateX(2px)
            rotate(4deg);
    }

    /*
     * БОНК.
     */
    74% {
        transform:
            translate(7px,7px)
            scaleX(1.40)
            scaleY(.51)
            rotate(7deg);
    }

    /*
     * Пружина.
     */
    82% {
        transform:
            translate(2px,-6px)
            scaleX(.84)
            scaleY(1.21)
            rotate(-4deg);
    }

    91% {
        transform:
            scaleX(1.06)
            scaleY(.96);
    }

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


@keyframes arm71Nose {

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

    37% {
        transform:
            translate(5px,-17px)
            rotate(42deg)
            scale(1.18);
    }

    58% {
        transform:
            translate(-2px,-21px)
            rotate(82deg)
            scale(.9);
    }

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

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


@keyframes arm71Star1 {

    0% {
        opacity: 0;

        transform:
            scale(.2);
    }

    27% {
        opacity: 1;

        transform:
            scale(1.25);
    }

    100% {
        opacity: 0;

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


@keyframes arm71Star2 {

    0% {
        opacity: 0;

        transform:
            scale(.2);
    }

    27% {
        opacity: 1;

        transform:
            scale(1.15);
    }

    100% {
        opacity: 0;

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


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

/*
 * Перед посадкой убираем реквизит.
 */

.arm-scene-director71.is-preparing-dock
.arm71-score,

.arm-scene-director71.is-preparing-dock
.arm71-puddle,

.arm-scene-director71.is-preparing-dock
.arm71-tear,

.arm-scene-director71.is-preparing-dock
.arm71-sad-tear,

.arm-scene-director71.is-preparing-dock
.arm71-hammer,

.arm-scene-director71.is-preparing-dock
.arm71-star,

.arm-scene-director71.is-preparing-dock
.arm71-impact,

.arm-scene-director71.is-preparing-dock
.arm71-ember {

    opacity:
        0 !important;

    transition:
        opacity 130ms ease;
}


/*
 * Existing Smart Placement V6 затем двигает
 * весь stage обратно в reaction-slot.
 */

.arm-scene-director71.is-docked
.arm71-sticker {

    opacity:
        0;

    transition:
        opacity 160ms ease;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    .arm71-sticker {

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


/* ============================================================
   REDUCED MOTION
============================================================ */

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

    .arm-scene-director71 *,
    .arm-scene-director71::before,
    .arm-scene-director71::after {

        animation-duration:
            1ms !important;

        animation-delay:
            0ms !important;

        transition-duration:
            1ms !important;
    }
}



/* ============================================================
   arena-exact-reaction-target-v72-css

   Финальная посадка возможна ТОЛЬКО
   в chip с тем же animation_key.
============================================================ */


/*
 * Если во время websocket rerender нужный chip
 * неожиданно исчез — не прыгаем в соседнюю клетку.
 */

.arm-scene-director71.arm71-no-dock-target {

    opacity:
        0 !important;

    transition:
        opacity
        180ms
        ease !important;
}


.arm-scene-director71.arm71-no-dock-target.is-docking {

    /*
     * Убираем старый координатный docking.
     */
    transform:
        translate(-50%, -50%)
        scale(.82) !important;
}


/*
 * При корректном target оставляем точный V6 docking,
 * координаты которого теперь пересчитываются
 * непосредственно перед посадкой.
 */

.arm-scene-director71:not(.arm71-no-dock-target).is-docking {

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

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

        scale(.31) !important;
}


.arm-scene-director71:not(.arm71-no-dock-target).is-docked {

    opacity:
        0 !important;

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

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

        scale(.27) !important;
}



/* ============================================================
   arena-vertical-docking-v73

   НИ ОДНА реакция больше не проходит
   через соседний reaction-chip.

   Финальный маршрут всегда:

          ICON
           ↓
        [ target ]
============================================================ */


/* ============================================================
   STEP A — СХЛОПЫВАЕМ БОЛЬШУЮ СЦЕНУ
============================================================ */

.arm-scene-director71.arm73-collapse-scene {

    /*
     * ВАЖНО:
     * не двигаем stage.
     * Только быстро уменьшаем его на текущем месте.
     */
    transform:
        translate(-50%,-50%)
        scale(.12) !important;

    opacity:
        0 !important;

    transition:
        transform
        130ms
        cubic-bezier(.30,.05,.45,1),

        opacity
        100ms
        ease !important;
}


/* ============================================================
   STEP B — stage уже переставлен над своим slot
============================================================ */

.arm-scene-director71.arm73-above-target {

    /*
     * Пока браузер меняет left/top,
     * ничего не должно мигнуть.
     */
    opacity:
        0 !important;

    transform:
        translate(-50%,-50%)
        scale(.18) !important;

    transition:
        none !important;
}


/* ============================================================
   STEP B2 — маленький финальный объект появляется
   непосредственно НАД своей клеткой.
============================================================ */

.arm-scene-director71.arm73-above-target.arm73-ready-to-land {

    opacity:
        1 !important;

    transform:
        translate(-50%,-50%)
        scale(.29) !important;

    transition:
        transform
        90ms
        cubic-bezier(.16,.84,.20,1),

        opacity
        65ms
        ease !important;
}


/* ============================================================
   STEP C — ТОЛЬКО ВЕРТИКАЛЬНАЯ ПОСАДКА

   left уже равен target center X.
   Поэтому X вообще не меняется.
============================================================ */

.arm-scene-director71.arm73-ready-to-land.is-docking {

    opacity:
        1 !important;

    transform:
        translate(-50%,-50%)
        translateY(34px)
        scale(.27) !important;

    transition:
        transform
        290ms
        cubic-bezier(.12,.84,.18,1),

        opacity
        220ms
        ease !important;
}


/*
 * Финальная точка.
 */

.arm-scene-director71.arm73-ready-to-land.is-docked {

    opacity:
        0 !important;

    transform:
        translate(-50%,-50%)
        translateY(34px)
        scale(.23) !important;

    transition:
        opacity
        130ms
        ease !important;
}


/* ============================================================
   ПЕРЕД ПОСАДКОЙ УБИРАЕМ РЕКВИЗИТ

   Вниз должен садиться не весь мультфильм,
   а только финальный визуальный объект.
============================================================ */


/* 👍 */

.arm-scene-like.arm73-collapse-scene
.arm71-stamp,

.arm-scene-like.arm73-collapse-scene
.arm71-impact {

    display:
        none !important;
}


/* 😂 */

.arm-scene-laugh.arm73-collapse-scene
.arm71-laugh-ring,

.arm-scene-laugh.arm73-collapse-scene
.arm71-tear {

    display:
        none !important;
}


/* 🔥 */

.arm-scene-fire.arm73-collapse-scene
.arm71-reactor,

.arm-scene-fire.arm73-collapse-scene
.arm71-fire-spark,

.arm-scene-fire.arm73-collapse-scene
.arm71-ember {

    display:
        none !important;
}


/* 😭 */

.arm-scene-cry.arm73-collapse-scene
.arm71-score,

.arm-scene-cry.arm73-collapse-scene
.arm71-puddle,

.arm-scene-cry.arm73-collapse-scene
.arm71-sad-tear {

    display:
        none !important;
}


/* 🤡 */

.arm-scene-clown.arm73-collapse-scene
.arm71-bonk-arena,

.arm-scene-clown.arm73-collapse-scene
.arm71-hammer,

.arm-scene-clown.arm73-collapse-scene
.arm71-star {

    display:
        none !important;
}


/* ============================================================
   У КАЖДОЙ СЦЕНЫ ФИНАЛЬНЫЙ ОБЪЕКТ
   держим строго по центру stage.
============================================================ */

.arm73-ready-to-land
.arm71-sticker {

    left:
        50% !important;

    top:
        50% !important;

    transform-origin:
        center !important;
}


/*
 * Во время вертикального landing
 * никакая внутренняя анимация больше
 * не должна уводить sticker в сторону.
 */

.arm73-ready-to-land
.arm71-sticker,

.arm73-ready-to-land
.arm71-sticker * {

    animation-play-state:
        paused !important;
}


/* ============================================================
   ОСОБО ДЛЯ 🤡

   В сцене clown сам victim расположен справа,
   потому что слева стоит Arena.

   Во время landing переставляем victim
   В ЦЕНТР всего stage.

   Иначе даже при правильном stage X
   сам клоун визуально остаётся справа/слева.
============================================================ */

.arm-scene-clown.arm73-ready-to-land
.arm71-bonk-victim {

    left:
        50% !important;

    right:
        auto !important;

    top:
        50% !important;

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

    animation:
        none !important;
}


/*
 * В landing clown sticker должен содержать
 * только клоуна.
 */

.arm-scene-clown.arm73-ready-to-land
.arm71-bonk-arena,

.arm-scene-clown.arm73-ready-to-land
.arm71-hammer,

.arm-scene-clown.arm73-ready-to-land
.arm71-star {

    display:
        none !important;
}


/* ============================================================
   😂

   Сам логотип во время сцены смеётся,
   но при landing он должен быть центрирован.
============================================================ */

.arm-scene-laugh.arm73-ready-to-land
.arm71-laugh-logo {

    left:
        50% !important;

    top:
        50% !important;

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

    animation:
        none !important;
}


/* ============================================================
   😭
============================================================ */

.arm-scene-cry.arm73-ready-to-land
.arm71-sad-logo {

    left:
        50% !important;

    top:
        50% !important;

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

    animation:
        none !important;
}


/* ============================================================
   👍
============================================================ */

.arm-scene-like.arm73-ready-to-land
.arm71-like-result {

    left:
        50% !important;

    top:
        50% !important;

    opacity:
        1 !important;

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

    animation:
        none !important;
}


/* ============================================================
   🔥
============================================================ */

.arm-scene-fire.arm73-ready-to-land
.arm71-fire-result {

    left:
        50% !important;

    top:
        50% !important;

    opacity:
        1 !important;

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

    animation:
        none !important;
}


/* ============================================================
   NO TARGET

   Если target пропал —
   всё просто исчезает на месте.
============================================================ */

.arm-scene-director71.arm71-no-dock-target {

    opacity:
        0 !important;

    transform:
        translate(-50%,-50%)
        scale(.12) !important;
}


/* ============================================================
   REDUCED MOTION
============================================================ */

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

    .arm-scene-director71.arm73-collapse-scene,
    .arm-scene-director71.arm73-above-target,
    .arm-scene-director71.arm73-ready-to-land,
    .arm-scene-director71.arm73-ready-to-land.is-docking {

        transition-duration:
            1ms !important;
    }
}



/* ============================================================
   arena-universal-landing-v74

   ЕДИНАЯ МЕХАНИКА ФИНАЛА ДЛЯ:
   👍 😂 🔥 😭 🤡

   Входящее / исходящее —
   абсолютно одинаково.

   Никакого горизонтального движения
   около reaction-row.
============================================================ */


/* ============================================================
   БОЛЬШАЯ СЦЕНА ПРОСТО ЗАКАНЧИВАЕТСЯ НА МЕСТЕ
============================================================ */

.arm-scene-director71.arm74-scene-finish {

    opacity:
        0 !important;

    transform:
        translate(-50%,-50%)
        scale(.88) !important;

    transition:
        opacity
        120ms
        ease,

        transform
        130ms
        cubic-bezier(.32,.05,.35,1)
        !important;
}


/*
 * Самое важное:
 *
 * никакой старый is-docking больше
 * не имеет права перемещать большую scene.
 */

.arm-scene-director71.arm74-scene-finish.is-docking,
.arm-scene-director71.arm74-scene-finish.is-docked {

    opacity:
        0 !important;

    transform:
        translate(-50%,-50%)
        scale(.88) !important;

    transition:
        none !important;
}


/* ============================================================
   LANDING GHOST
============================================================ */

.arm74-landing {

    position:
        absolute;

    z-index:
        80;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        27px;

    height:
        27px;

    pointer-events:
        none;

    opacity:
        0;

    /*
     * left — уже точный центр target.
     * Поэтому горизонтальная координата
     * НИКОГДА не анимируется.
     */
    transform:
        translate(-50%,-50%)
        scale(.74);

    transform-origin:
        center;

    filter:
        drop-shadow(
            0 4px 9px
            rgba(0,0,0,.30)
        );

    transition:
        top
        310ms
        cubic-bezier(.14,.82,.18,1),

        opacity
        80ms
        ease,

        transform
        310ms
        cubic-bezier(.14,.82,.18,1);
}


.arm74-landing
.arm-icon {

    width:
        24px !important;

    height:
        24px !important;

    flex:
        0 0 auto !important;

    margin:
        0 !important;

    transform:
        none !important;

    animation:
        none !important;
}


/* ============================================================
   ПОЯВЛЕНИЕ НАД / ПОД СВОИМ SLOT
============================================================ */

.arm74-landing.is-visible {

    opacity:
        1;

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


/* ============================================================
   ВЕРТИКАЛЬНОЕ ДВИЖЕНИЕ
============================================================ */

.arm74-landing.is-landing {

    opacity:
        1;

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


/*
 * Очень маленький impact,
 * но БЕЗ смещения X.
 */

.arm74-landing.is-impact {

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

    transition:
        transform
        95ms
        cubic-bezier(.16,.88,.20,1),

        opacity
        80ms
        ease;
}


/*
 * Финальное растворение.
 */

.arm74-landing.is-finished {

    opacity:
        0;

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

    transition:
        opacity
        130ms
        ease,

        transform
        130ms
        ease;
}


/* ============================================================
   НИ ОДИН ВНУТРЕННИЙ SVG
   НЕ МОЖЕТ УЕХАТЬ В СТОРОНУ
============================================================ */

.arm74-landing *,
.arm74-landing svg {

    animation:
        none !important;

    transition:
        none !important;

    transform-origin:
        center !important;
}


/* ============================================================
   КЛОУН

   Отдельное правило, потому что раньше
   его victim жил справа внутри BONK scene.

   Landing ghost теперь совершенно отдельный,
   поэтому ничего наследовать от BONK не должен.
============================================================ */

.arm74-landing-clown
.arm-icon-clown {

    position:
        static !important;

    left:
        auto !important;

    right:
        auto !important;

    top:
        auto !important;

    bottom:
        auto !important;

    transform:
        none !important;
}


/* ============================================================
   😂
============================================================ */

.arm74-landing-laugh
.arm-icon-laugh {

    position:
        static !important;

    transform:
        none !important;
}


/* ============================================================
   👍
============================================================ */

.arm74-landing-like
.arm-icon-like {

    position:
        static !important;

    transform:
        none !important;
}


/* ============================================================
   🔥
============================================================ */

.arm74-landing-fire
.arm-icon-fire {

    position:
        static !important;

    transform:
        none !important;
}


/* ============================================================
   😭
============================================================ */

.arm74-landing-cry
.arm-icon-cry {

    position:
        static !important;

    transform:
        none !important;
}


/* ============================================================
   ВАЖНО ДЛЯ INPUT / OUTPUT SIDE
============================================================ */

/*
 * Никаких отдельных:
 *
 * .incoming ...
 * .outgoing ...
 * .mine ...
 * .other ...
 *
 * здесь намеренно НЕТ.
 *
 * Landing работает исключительно
 * относительно своего reaction-chip.
 */


/* ============================================================
   MOBILE
============================================================ */

@media (max-width:700px) {

    .arm74-landing {

        width:
            25px;

        height:
            25px;
    }


    .arm74-landing
    .arm-icon {

        width:
            22px !important;

        height:
            22px !important;
    }
}


/* ============================================================
   REDUCED MOTION
============================================================ */

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

    .arm74-landing {

        transition-duration:
            1ms !important;
    }
}