.hg-spin {
    --s: 200px;
    position: relative;
    flex: 0 0 var(--s);
    width: var(--s);
    height: var(--s);
    perspective: 900px;
    contain: layout paint;
}
.hg-spin-css {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: hg-spin-turn 16s linear infinite;
    will-change: transform;
    filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.42));
}
.hg-spin-face {
    position: absolute;
    inset: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: transparent;
}
.hg-spin-face img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
}
.hg-spin-front { transform: translateZ(10px); }
.hg-spin-back { transform: rotateY(180deg) translateZ(10px); }
.hg-spin-rim {
    position: absolute;
    inset: 18%;
    border-radius: 18%;
    background: linear-gradient(180deg, #e6c65a, #6b5420 50%, #d4af37);
    transform: rotateY(90deg) scaleX(0.11);
    opacity: 0.85;
}
.hg-wordmark {
    display: block;
    width: min(100%, 520px);
    height: auto;
    max-height: 84px;
    object-fit: contain;
    object-position: left center;
    background: transparent;
}

@keyframes hg-spin-turn {
    from { transform: rotateX(14deg) rotateY(0deg); }
    to { transform: rotateX(14deg) rotateY(360deg); }
}

@media (max-width: 980px) {
    .hg-spin { --s: 152px; }
    .hg-wordmark { max-height: 52px; }
}
@media (max-width: 479px) {
    .hg-spin { --s: 168px; align-self: center; }
    .hg-wordmark { max-height: 44px; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .hg-spin-css {
        animation: none;
        will-change: auto;
        transform: rotateX(12deg) rotateY(-20deg);
    }
}