.spot-rest-card {
    --spot-rest-w: clamp(158px, 19vw, 232px);
    --spot-rest-h: calc(var(--spot-rest-w) / 1.8452);
    --spot-rest-sink: calc(var(--spot-rest-h) * 0.21);
    --spot-rest-lift: calc(var(--spot-rest-h) - var(--spot-rest-sink));
    --spot-rest-x: 64%;

    position: relative;
    margin-top: calc(var(--spot-rest-lift) + 0.4rem);
    overflow: visible;
}

.spot-rest-face {
    position: absolute;
    z-index: 3;
    top: calc(var(--spot-rest-lift) * -1);
    left: var(--spot-rest-x);
    width: var(--spot-rest-w);
    height: auto;
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    pointer-events: none;
    filter:
        drop-shadow(0 2px 2px rgb(20 15 18 / 26%))
        drop-shadow(0 12px 18px rgb(20 15 18 / 24%));
    animation: spotRestBreathe 7s ease-in-out infinite;
}

.spot-rest-card::before {
    content: '';
    position: absolute;
    z-index: 4;
    top: calc(var(--spot-rest-sink) * 0.1);
    left: var(--spot-rest-x);
    width: calc(var(--spot-rest-w) * 0.86);
    height: calc(var(--spot-rest-h) * 0.16);
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 20%, rgb(20 15 18 / 30%), transparent 66%);
    pointer-events: none;
    mix-blend-mode: multiply;
    animation: spotRestShadow 7s ease-in-out infinite;
}

@keyframes spotRestBreathe {
    0%, 100% { transform: translateX(-50%) scaleY(1); }
    50%      { transform: translateX(-50%) scaleY(1.018); }
}

@keyframes spotRestShadow {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.86; }
}

.support-panel.spot-rest-card,
.error-card.spot-rest-card,
.auth-benefits.spot-rest-card {
    padding-top: calc(var(--spot-rest-sink) + clamp(1.5rem, 3vw, 2.2rem));
}

[data-thema='donker'] .spot-rest-card::before {
    background: radial-gradient(ellipse at 50% 20%, rgb(0 0 0 / 58%), transparent 66%);
    mix-blend-mode: normal;
}

[data-thema='donker'] .spot-rest-face {
    filter:
        drop-shadow(0 2px 2px rgb(0 0 0 / 50%))
        drop-shadow(0 12px 20px rgb(0 0 0 / 52%));
}

@media (max-width: 640px) {
    .spot-rest-card {
        --spot-rest-w: clamp(136px, 40vw, 180px);
        --spot-rest-x: 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spot-rest-face,
    .spot-rest-card::before {
        animation: none;
    }
}