/* =========================================================
   MCW ANIMATED LOGO
   Nagorik Khabor inspired kinetic logo effect
   ========================================================= */

.mcw-animated-logo {
    position: relative;

    display: inline-block;

    width: 100%;
    max-width: 1053px;

    aspect-ratio: 1053 / 237;

    line-height: 0;

    overflow: hidden;

    /*
     * Important:
     * This prevents the animation from affecting
     * the surrounding header.
     */
}


/* =========================================================
   ORIGINAL LOGO
   ========================================================= */

.mcw-logo-base {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    z-index: 1;

    animation: mcwBaseLogo 6.8s ease-in-out infinite;

    pointer-events: none;
}


/*
 * During the disassembly phase the original logo
 * fades away so the individual pieces can be seen.
 */

@keyframes mcwBaseLogo {

    0%,
    48% {
        opacity: 1;
    }

    55% {
        opacity: 1;
    }

    61% {
        opacity: 0;
    }

    84% {
        opacity: 0;
    }

    92% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}


/* =========================================================
   PIECE CONTAINER
   ========================================================= */

.mcw-logo-pieces {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 2;

    pointer-events: none;
}


/* =========================================================
   EACH PIECE
   ========================================================= */

.mcw-logo-piece {
    position: absolute;

    top: 0;

    width: 100%;
    height: 100%;

    display: block;

    overflow: hidden;

    transform-origin: center center;

    will-change: transform, opacity;

    /*
     * The image inside each piece stays exactly
     * the same size as the original logo.
     */
}

.mcw-logo-piece img {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: fill;

    display: block;
}


/* =========================================================
   PIECE 1
   0% - 11%
   ========================================================= */

.piece-1 {
    clip-path: inset(
        0 89% 0 0
    );

    animation:
        mcwPiece1 6.8s cubic-bezier(.65,0,.35,1) infinite;
}


/* =========================================================
   PIECE 2
   11% - 22%
   ========================================================= */

.piece-2 {
    clip-path: inset(
        0 78% 0 11%
    );

    animation:
        mcwPiece2 6.8s cubic-bezier(.65,0,.35,1) infinite;
}


/* =========================================================
   PIECE 3
   22% - 33%
   ========================================================= */

.piece-3 {
    clip-path: inset(
        0 67% 0 22%
    );

    animation:
        mcwPiece3 6.8s cubic-bezier(.65,0,.35,1) infinite;
}


/* =========================================================
   PIECE 4
   33% - 44%
   ========================================================= */

.piece-4 {
    clip-path: inset(
        0 56% 0 33%
    );

    animation:
        mcwPiece4 6.8s cubic-bezier(.65,0,.35,1) infinite;
}


/* =========================================================
   PIECE 5
   44% - 56%
   ========================================================= */

.piece-5 {
    clip-path: inset(
        0 44% 0 44%
    );

    animation:
        mcwPiece5 6.8s cubic-bezier(.65,0,.35,1) infinite;
}


/* =========================================================
   PIECE 6
   56% - 67%
   ========================================================= */

.piece-6 {
    clip-path: inset(
        0 33% 0 56%
    );

    animation:
        mcwPiece6 6.8s cubic-bezier(.65,0,.35,1) infinite;
}


/* =========================================================
   PIECE 7
   67% - 78%
   ========================================================= */

.piece-7 {
    clip-path: inset(
        0 22% 0 67%
    );

    animation:
        mcwPiece7 6.8s cubic-bezier(.65,0,.35,1) infinite;
}


/* =========================================================
   PIECE 8
   78% - 89%
   ========================================================= */

.piece-8 {
    clip-path: inset(
        0 11% 0 78%
    );

    animation:
        mcwPiece8 6.8s cubic-bezier(.65,0,.35,1) infinite;
}


/* =========================================================
   PIECE 9
   89% - 100%
   ========================================================= */

.piece-9 {
    clip-path: inset(
        0 0 0 89%
    );

    animation:
        mcwPiece9 6.8s cubic-bezier(.65,0,.35,1) infinite;
}


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

   0 - 50%
       Complete logo.

   50 - 62%
       Pieces begin separating.

   62 - 76%
       Pieces remain separated.

   76 - 92%
       Pieces return.

   92 - 100%
       Complete logo / pause.
   */


/* LEFT SIDE */

@keyframes mcwPiece1 {

    0%,
    50%,
    92%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }

    62% {
        transform: translate3d(-18px, -18px, 0) rotate(-2deg);
        opacity: 1;
    }

    76% {
        transform: translate3d(-25px, 22px, 0) rotate(-3deg);
        opacity: .9;
    }
}


@keyframes mcwPiece2 {

    0%,
    50%,
    92%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }

    62% {
        transform: translate3d(-8px, 24px, 0) rotate(1deg);
        opacity: 1;
    }

    76% {
        transform: translate3d(-13px, -25px, 0) rotate(2deg);
        opacity: .9;
    }
}


@keyframes mcwPiece3 {

    0%,
    50%,
    92%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }

    62% {
        transform: translate3d(14px, -22px, 0) rotate(-2deg);
        opacity: 1;
    }

    76% {
        transform: translate3d(19px, 27px, 0) rotate(2deg);
        opacity: .9;
    }
}


@keyframes mcwPiece4 {

    0%,
    50%,
    92%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }

    62% {
        transform: translate3d(-13px, 27px, 0) rotate(2deg);
        opacity: 1;
    }

    76% {
        transform: translate3d(18px, -20px, 0) rotate(-2deg);
        opacity: .9;
    }
}


/* CENTER */

@keyframes mcwPiece5 {

    0%,
    50%,
    92%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }

    62% {
        transform: translate3d(0, -32px, 0) rotate(-1deg);
        opacity: 1;
    }

    76% {
        transform: translate3d(0, 30px, 0) rotate(1deg);
        opacity: .9;
    }
}


/* RIGHT SIDE */

@keyframes mcwPiece6 {

    0%,
    50%,
    92%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }

    62% {
        transform: translate3d(16px, 25px, 0) rotate(-2deg);
        opacity: 1;
    }

    76% {
        transform: translate3d(-18px, -25px, 0) rotate(2deg);
        opacity: .9;
    }
}


@keyframes mcwPiece7 {

    0%,
    50%,
    92%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }

    62% {
        transform: translate3d(-15px, -25px, 0) rotate(2deg);
        opacity: 1;
    }

    76% {
        transform: translate3d(22px, 25px, 0) rotate(-2deg);
        opacity: .9;
    }
}


@keyframes mcwPiece8 {

    0%,
    50%,
    92%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }

    62% {
        transform: translate3d(10px, 23px, 0) rotate(-1deg);
        opacity: 1;
    }

    76% {
        transform: translate3d(-18px, -23px, 0) rotate(2deg);
        opacity: .9;
    }
}


@keyframes mcwPiece9 {

    0%,
    50%,
    92%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 1;
    }

    62% {
        transform: translate3d(23px, -20px, 0) rotate(3deg);
        opacity: 1;
    }

    76% {
        transform: translate3d(28px, 23px, 0) rotate(3deg);
        opacity: .9;
    }
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

    .mcw-animated-logo {
        max-width: 85%;
        max-height: 80px;
    }
}


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

@media (max-width: 767px) {

    .mcw-animated-logo {
        max-width: 90%;

        /*
         * Keep the same aspect ratio automatically.
         */
        aspect-ratio: 1053 / 237;
    }

    /*
     * Reduce movement on small screens.
     */
    @keyframes mcwPiece1 {
        0%, 50%, 92%, 100% {
            transform: translate3d(0,0,0) rotate(0);
        }

        62% {
            transform: translate3d(-8px,-10px,0) rotate(-1deg);
        }

        76% {
            transform: translate3d(-12px,12px,0) rotate(-1deg);
        }
    }

    @keyframes mcwPiece5 {
        0%, 50%, 92%, 100% {
            transform: translate3d(0,0,0);
        }

        62% {
            transform: translate3d(0,-15px,0);
        }

        76% {
            transform: translate3d(0,14px,0);
        }
    }
}


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

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

    .mcw-logo-base,
    .mcw-logo-piece {
        animation: none !important;
        transform: none !important;
    }

    .mcw-logo-base {
        opacity: 1 !important;
    }
}