body {
    margin: 0;
    background: black;
    color: white;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
}

.wrap {
    padding: 20px;
}

.coming {
    color: #bbb;
    font-size: 1.2rem;
    letter-spacing: 2px;
}
.logo-wrap {
    position: relative;
    width: 320px;
    height: 320px;
    max-width: 80vw;
    margin: 0 auto 20px;
}

.logo-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.logo-bg {
    z-index: 1;
}

.echo {
    transform-origin: center;
}

.echo3 {
    z-index: 2;
    animation: vibrationLarge 6s infinite linear;
}

.echo2 {
    z-index: 3;
    animation: vibrationMedium 6s infinite linear;
}

.echo1 {
    z-index: 4;
    animation: vibrationSmall 6s infinite linear;
}
.main-r {
    z-index: 5;
}

.logo-small {
    --vib: 1;
}

.logo-medium {
    --vib: 2;
}

.logo-large {
    --vib: 3;
}


.vibrate {
    animation: vibration 6s infinite linear;
}


@keyframes vibration {

    0%, 20%, 80%, 100% {
        transform: translate(0,0);
    }
    /* early subtle movement */

    24% {
        transform: translate( calc(0.15px * var(--vib)), 0 );
    }

    30% {
        transform: translate( calc(-0.2px * var(--vib)), calc(0.1px * var(--vib)) );
    }

    35% {
        transform: translate( calc(0.3px * var(--vib)), calc(-0.2px * var(--vib)) );
    }

    39% {
        transform: translate( calc(-0.4px * var(--vib)), calc(0.3px * var(--vib)) );
    }

    42% {
        transform: translate( calc(0.55px * var(--vib)), calc(-0.35px * var(--vib)) );
    }

    44% {
        transform: translate( calc(-0.7px * var(--vib)), calc(0.5px * var(--vib)) );
    }

    45% {
        transform: translate( calc(0.8px * var(--vib)), calc(-0.6px * var(--vib)) );
    }

    46% {
        transform: translate( calc(-0.9px * var(--vib)), calc(0.7px * var(--vib)) );
    }

    47% {
        transform: translate( calc(1px * var(--vib)), calc(-0.8px * var(--vib)) );
    }
    /* peak */

    48% {
        transform: translate( calc(-1px * var(--vib)), calc(1px * var(--vib)) );
    }

    49% {
        transform: translate( calc(1px * var(--vib)), calc(-1px * var(--vib)) );
    }

    50% {
        transform: translate( calc(-1px * var(--vib)), calc(1px * var(--vib)) );
    }

    51% {
        transform: translate( calc(1px * var(--vib)), calc(-1px * var(--vib)) );
    }

    52% {
        transform: translate( calc(-1px * var(--vib)), calc(1px * var(--vib)) );
    }
    /* fade out */


    53% {
        transform: translate( calc(0.9px * var(--vib)), calc(-0.7px * var(--vib)) );
    }

    54% {
        transform: translate( calc(-0.8px * var(--vib)), calc(0.6px * var(--vib)) );
    }

    55% {
        transform: translate( calc(0.7px * var(--vib)), calc(-0.5px * var(--vib)) );
    }

    57% {
        transform: translate( calc(-0.55px * var(--vib)), calc(0.35px * var(--vib)) );
    }

    60% {
        transform: translate( calc(0.4px * var(--vib)), calc(-0.3px * var(--vib)) );
    }

    64% {
        transform: translate( calc(-0.3px * var(--vib)), calc(0.2px * var(--vib)) );
    }

    70% {
        transform: translate( calc(0.2px * var(--vib)), calc(-0.1px * var(--vib)) );
    }

    76% {
        transform: translate( calc(-0.15px * var(--vib)), 0 );
    }

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