.loader_box .loader71-coffee {
    position: relative;
    width: 225px;
    height: 185px;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
    transform: scale(0.8);
}

.loader_box .loader71-cup {
    position: absolute;
    left: 54px;
    top: 75px;
    z-index: 3;
    width: 116px;
    height: 78px;
    border: 3px solid #49ABCB;
    border-radius: 10px 10px 45px 45px;
    box-sizing: border-box;
    background: #49ABCB;
}

.loader_box .loader71-handle {
    position: absolute;
    z-index: 2;
    left: 158px;
    top: 87px;
    width: 39px;
    height: 42px;
    border: 8px solid #036C91;
    border-left: 0;
    border-radius: 0 26px 26px 0;
    box-sizing: border-box;
}

/*
The coffee surface used to be .loader71-cup::after. It is its own element now so it can sit ABOVE the
spoon (z-index 5 against the spoon's 4) - that is what hides the end of the spoon and makes it read as
dipping into the liquid rather than resting on top of the cup.
*/
.loader_box .loader71-surface {
    position: absolute;
    z-index: 5;
    left: 60px;
    top: 80px;
    width: 104px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(180deg, #BE7656, #4B1F0E);
}

.loader_box .loader71-saucer {
    position: absolute;
    left: 34px;
    bottom: 12px;
    width: 160px;
    height: 36px;
    border-radius: 50%;
    box-sizing: border-box;
    background: linear-gradient(180deg, #08495E 20%, #036C91);
}

.loader_box .loader71-steam {
    position: absolute;
    top: 10px;
    width: 18px;
    height: 54px;
    border-left: 5px solid #CDCDCD;
    border-radius: 50%;
    opacity: 80%;
    animation: loader71-steam-rise 3s ease-in-out infinite;
}

.loader_box .loader71-steam-a { left: 78px; }
.loader_box .loader71-steam-b { left: 108px; animation-delay: -1s; }
.loader_box .loader71-steam-c { left: 138px; animation-delay: -2s; }

/*
The spoon stands in the middle of the cup at x 112, which is the centre of the coffee surface, and its
transform-origin is its own bottom end - so the pivot sits at (112, 94), just inside the surface ellipse.
The pivot never moves as it rotates, so the end stays covered by the coffee at every angle and the handle
sweeps above it. z-index 4 puts it over the cup wall (3) but under the surface (5).
*/
.loader_box .loader71-spoon {
    position: absolute;
    z-index: 4;
    left: 108px;
    top: 34px;
    width: 8px;
    height: 60px;
    border-radius: 8px 8px 4px 4px;
    background: linear-gradient(180deg, #929393, #737474, #595A5A);
    transform: rotate(-24deg);
    transform-origin: 50% 100%;
    animation: loader71-spoon-stir 4s ease-in-out infinite;
}

.loader_box .loader71-bean {
    position: absolute;
    width: 20px;
    height: 13px;
    border-radius: 50%;
    background: #4B1F0E;
    transform: rotate(-26deg);
}

.loader_box .loader71-bean::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 1px;
    width: 2px;
    height: 11px;
    border-radius: 50%;
    background: #BE7656;
}

.loader_box .loader71-bean-a { left: 8px; bottom: 26px; }
.loader_box .loader71-bean-b { left: 18px; bottom: 8px; transform: rotate(34deg); }

@keyframes loader71-steam-rise { 0% { opacity: 25; transform: translateY(10px) scaleX(0.8); } 50% { opacity: 0.7; } 100% { opacity: 0; transform: translateY(-28px) scaleX(1.2); } }
@keyframes loader71-spoon-stir { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(24deg); } }

@media (prefers-reduced-motion: reduce) {
    .loader_box .loader71-coffee * { animation: none; }
    .loader_box .loader71-steam { opacity: 0.45; transform: translateY(-8px); }
}