body{
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-content: center;
    background: #DDBEA9;
    overflow: hidden;
}

.coffee{
    width: 150px;
    aspect-ratio: 1;
    background: 
    radial-gradient(100% 50% at left,#0000 70%,#fff 71% 90%,#0000) 95% 53%/14% 20%,
    linear-gradient(#eee 0 0) 50% 90%/100% 10%,
    radial-gradient(50% 100% at top,#fff 98%,#0000) 50% 70%/80% 50%;
    background-repeat: no-repeat;
    border-radius: 0 0 50% 50%/0 0 20% 20%;
    position: relative;
    animation: a 5s linear infinite;
}

.coffee::before{
    content: "";
    position: absolute;
    width: 6%;
    height: 20%;
    left: 47%;
    bottom: 65%;
    background: #50281c;
    background-repeat: no-repeat;
    border-bottom: 75px solid #50281c;
    clip-path: inset(-30% 0 56%);
    animation: b 5s linear infinite;
}

.coffee::after{
    content: "";
    position: absolute;
    width: 26%;
    height: 40%;
    left: 37%;
    bottom: 103%;
    background: 
    radial-gradient(100% 87% at 0% 69%,#0000 77%,#50281c 78% 99%,#0000) -5% 80%/60% 40%,
    radial-gradient(100% 87% at 100% 41%,#0000 77%, #50281c 78% 99%, #0000) 105% 20%/60% 40%,
    radial-gradient(100% 84% at 100% 55%,#0000 77%,#2d120d 78% 99%,#0000) 20% 80%/60% 40%,
    radial-gradient(50% 50%,#50281c 95%,#0000);
    background-repeat: no-repeat;
    animation: c 5s linear infinite;
}

.animation-body {
    background: linear-gradient(135deg, #6e4a21, #8a5a2b, #6e4a21);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}
.loading-container {
    text-align: center;
}
.brand-name {
    font-family: 'Satisfy', cursive;
    color: white;
    font-size: 3rem;
    margin-top: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    opacity: 0;
    animation: fadeIn 2s ease-in-out 1s forwards;
}
@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes a{
    0% {transform: translateX(calc(-50vw - 150px))}
    20%,80% {transform: translateX(0)}
    100% {transform: translateX(calc(150vw + 150px))}
}

@keyframes b{
    0%,20%,100% {transform: translateY(calc(-50vh - 150px)); clip-path: inset(-30% 0 56%)}
    35%,40% {transform: translateY(0); clip-path: inset(0% -100% 56%)}
    75%,99% {transform: translateY(0); clip-path: inset(20% 50% -121%)};
}

@keyframes c{
    0%,20%,100% {transform: translateY(calc(-50vh - 150px));}
    35%,40% {transform: translateY(0) rotate(0);}
    75%,99% {transform: translateY(0) rotate(8turn) scale(0);}
}