/* =========================================================
   Smart Mobile Care
   REGISTER CARTOON BOY ANIMATION
========================================================= */


/* =========================================================
   REGISTER CONTAINER
========================================================= */

.register-container {

    position: relative;

}


/* =========================================================
   CHARACTER AREA
========================================================= */

.register-character {

    position: absolute;

    left: -190px;

    bottom: 45px;

    width: 180px;

    height: 260px;

    z-index: 20;

    pointer-events: none;

    animation:
        boyEntrance
        1.1s
        cubic-bezier(.22,1,.36,1)
        both;

}


/* =========================================================
   BOY
========================================================= */

.character-boy {

    position: absolute;

    left: 20px;

    bottom: 0;

    width: 115px;

    height: 220px;

    animation:
        boyPull
        1.2s
        ease-in-out
        .8s
        both;

}


/* =========================================================
   HEAD
========================================================= */

.boy-head {

    position: absolute;

    top: 5px;

    left: 27px;

    width: 68px;

    height: 75px;

    background: #f5b27c;

    border-radius:
        45% 45%
        48% 48%;

    z-index: 5;

    box-shadow:
        inset
        -5px
        -5px
        0
        rgba(0,0,0,.05);

}


/* =========================================================
   HAIR
========================================================= */

.boy-hair {

    position: absolute;

    top: -7px;

    left: 2px;

    width: 64px;

    height: 35px;

    background: #1f2937;

    border-radius:
        55%
        55%
        35%
        25%;

    transform:
        rotate(-4deg);

}


.boy-hair::after {

    content: "";

    position: absolute;

    width: 24px;

    height: 18px;

    left: 4px;

    top: 18px;

    background: #1f2937;

    border-radius: 0 0 70% 20%;

    transform:
        rotate(-12deg);

}


/* =========================================================
   EARS
========================================================= */

.boy-ear {

    position: absolute;

    top: 31px;

    width: 13px;

    height: 22px;

    background: #efa875;

    border-radius: 50%;

}


.boy-ear.left {

    left: -8px;

}


.boy-ear.right {

    right: -8px;

}


/* =========================================================
   EYES
========================================================= */

.boy-eye {

    position: absolute;

    top: 32px;

    width: 8px;

    height: 10px;

    background: #111827;

    border-radius: 50%;

    animation:
        boyBlink
        4s
        infinite;

}


.boy-eye.left {

    left: 20px;

}


.boy-eye.right {

    right: 20px;

}


/* =========================================================
   MOUTH
========================================================= */

.boy-mouth {

    position: absolute;

    left: 27px;

    top: 53px;

    width: 15px;

    height: 7px;

    border-bottom:
        2px
        solid
        #7c2d12;

    border-radius: 50%;

}


/* =========================================================
   NECK
========================================================= */

.boy-neck {

    position: absolute;

    top: 72px;

    left: 49px;

    width: 20px;

    height: 20px;

    background: #efa875;

    z-index: 2;

}


/* =========================================================
   BODY
========================================================= */

.boy-body {

    position: absolute;

    top: 85px;

    left: 27px;

    width: 70px;

    height: 82px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

    border-radius:
        18px
        18px
        12px
        12px;

    z-index: 3;

}


/* Shirt logo */

.boy-body::after {

    content: "T";

    position: absolute;

    left: 27px;

    top: 22px;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: rgba(255,255,255,.9);

    color: #2563eb;

    font-weight: 700;

    font-size: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* =========================================================
   ARMS
========================================================= */

.boy-arm {

    position: absolute;

    top: 8px;

    width: 17px;

    height: 72px;

    background: #2563eb;

    border-radius: 15px;

}


.boy-arm.left {

    left: -12px;

    transform:
        rotate(24deg);

}


.boy-arm.right {

    right: -13px;

    transform:
        rotate(-48deg);

    transform-origin: top center;

    animation:
        pullingArm
        1.1s
        ease-in-out
        1s
        infinite alternate;

}


/* Hands */

.boy-arm::after {

    content: "";

    position: absolute;

    bottom: -7px;

    left: 2px;

    width: 18px;

    height: 18px;

    background: #f5b27c;

    border-radius: 50%;

}


/* =========================================================
   LEGS
========================================================= */

.boy-leg {

    position: absolute;

    top: 160px;

    width: 22px;

    height: 60px;

    background: #1e3a8a;

    border-radius:
        8px
        8px
        5px
        5px;

    z-index: 1;

}


.boy-leg.left {

    left: 35px;

    transform:
        rotate(3deg);

}


.boy-leg.right {

    right: 35px;

    transform:
        rotate(-3deg);

}


/* Shoes */

.boy-leg::after {

    content: "";

    position: absolute;

    bottom: -4px;

    left: -5px;

    width: 32px;

    height: 13px;

    background: #111827;

    border-radius: 10px;

}


/* =========================================================
   ROPE
========================================================= */

.register-rope {

    position: absolute;

    left: 105px;

    bottom: 145px;

    width: 190px;

    height: 5px;

    background: #b45309;

    border-radius: 10px;

    transform:
        rotate(-4deg);

    transform-origin: left center;

    z-index: 4;

    animation:
        ropePull
        1.2s
        ease-in-out
        .9s
        both;

}


/* Rope end */

.register-rope::after {

    content: "";

    position: absolute;

    right: -8px;

    top: -5px;

    width: 14px;

    height: 14px;

    border:
        3px
        solid
        #b45309;

    border-radius: 50%;

    background: transparent;

}


/* =========================================================
   CARD ANIMATION
========================================================= */

.register-card {

    animation:
        registerCardPull
        1.25s
        cubic-bezier(.22,1,.36,1)
        .55s
        both;

    transform-origin:
        center center;

}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes boyEntrance {

    0% {

        opacity: 0;

        transform:
            translateX(-90px)
            scale(.7);

    }

    100% {

        opacity: 1;

        transform:
            translateX(0)
            scale(1);

    }

}


@keyframes boyPull {

    0% {

        transform:
            translateX(0)
            rotate(0);

    }

    30% {

        transform:
            translateX(10px)
            rotate(-2deg);

    }

    60% {

        transform:
            translateX(-2px)
            rotate(2deg);

    }

    100% {

        transform:
            translateX(0)
            rotate(0);

    }

}


@keyframes pullingArm {

    from {

        transform:
            rotate(-40deg);

    }

    to {

        transform:
            rotate(-58deg);

    }

}


@keyframes ropePull {

    0% {

        opacity: 0;

        width: 40px;

    }

    100% {

        opacity: 1;

        width: 190px;

    }

}


@keyframes registerCardPull {

    0% {

        opacity: 0;

        transform:
            translateX(110px)
            scale(.94);

    }

    45% {

        opacity: 1;

        transform:
            translateX(-15px)
            scale(1.015);

    }

    70% {

        transform:
            translateX(6px)
            scale(.995);

    }

    100% {

        opacity: 1;

        transform:
            translateX(0)
            scale(1);

    }

}


@keyframes boyBlink {

    0%,
    45%,
    48%,
    100% {

        transform:
            scaleY(1);

    }

    46%,
    47% {

        transform:
            scaleY(.15);

    }

}


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

@media (max-width: 900px) {

    .register-character {

        left: -105px;

        bottom: 35px;

        transform:
            scale(.75);

        transform-origin:
            bottom right;

    }


    .register-rope {

        width: 130px;

    }

}


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

@media (max-width: 600px) {

    .register-character {

        position: relative;

        left: auto;

        bottom: auto;

        width: 130px;

        height: 120px;

        margin:
            0
            auto
            -20px;

        transform:
            scale(.55);

        transform-origin:
            center bottom;

    }


    .character-boy {

        left: 8px;

    }


    .register-rope {

        left: 88px;

        bottom: 65px;

        width: 100px;

    }


    .register-card {

        animation:
            registerCardPullMobile
            1s
            cubic-bezier(.22,1,.36,1)
            .55s
            both;

    }

}


@keyframes registerCardPullMobile {

    0% {

        opacity: 0;

        transform:
            translateY(35px)
            scale(.96);

    }

    70% {

        opacity: 1;

        transform:
            translateY(-4px)
            scale(1.01);

    }

    100% {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


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

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

    .register-character,
    .character-boy,
    .register-rope,
    .register-card,
    .boy-arm.right {

        animation: none !important;

        transform: none !important;

        opacity: 1 !important;

    }

}