.hero-mark {
    perspective: 1100px;
    isolation: isolate;
}

.gyro-scene {
    position: relative;
    width: min(34vw, 460px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    perspective: 950px;
    transform-style: preserve-3d;
}

.gyro-scene::before {
    content: "";
    position: absolute;
    inset: 24%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(49, 130, 255, .28), rgba(15, 225, 220, .07) 48%, transparent 72%);
    filter: blur(22px);
}

.gyro-gimbal {
    position: absolute;
    inset: 9%;
    transform-style: preserve-3d;
    will-change: transform;
}

.gyro-gimbal-b { inset: 16%; }
.gyro-gimbal-c { inset: 23%; }

.hero-mark .gyro-hoop {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 50%;
    transform-style: preserve-3d;
    background: conic-gradient(from 20deg,
        #2472ff 0deg,
        #55f4ec 70deg,
        #0d749c 145deg,
        #2365d9 215deg,
        #78fff5 285deg,
        #2472ff 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
    filter: drop-shadow(0 0 6px rgba(45, 133, 255, .68)) drop-shadow(0 0 12px rgba(65, 240, 232, .22));
    backface-visibility: visible;
    animation: none;
}

.gyro-gimbal-b .gyro-hoop {
    background: conic-gradient(from 135deg, #65fff3, #1b78ff 28%, #083c82 51%, #4ceee7 73%, #65fff3);
}

.gyro-gimbal-c .gyro-hoop {
    background: conic-gradient(from 250deg, #2465ff, #66fff1 32%, #1469bd 59%, #35bddd 78%, #2465ff);
}

.gyro-hoop::before,
.gyro-hoop::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid rgba(181, 255, 250, .32);
    transform: translateZ(3px);
}

.gyro-hoop::after {
    border-color: rgba(0, 24, 71, .74);
    transform: translateZ(-3px);
}

.hero-mark .mark-core {
    position: relative;
    z-index: 8;
    transform: translateZ(78px);
    width: 31%;
    aspect-ratio: 1;
    line-height: 1;
}

.hero-mark .mark-core img {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 24px rgba(45, 146, 255, .38));
}

.site-logo img {
    position: relative;
    z-index: 2;
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    box-shadow: 0 8px 22px rgba(1, 7, 19, .38), 0 0 18px rgba(44, 114, 255, .12);
}

.site-logo::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 1px;
    display: block;
    border: 2px solid transparent;
    border-top-color: rgba(82, 242, 237, .92);
    border-right-color: rgba(53, 130, 255, .78);
    border-bottom-color: rgba(82, 242, 237, .34);
    border-radius: 50%;
    box-shadow: 0 0 9px rgba(53, 130, 255, .26);
    pointer-events: none;
    transform-style: preserve-3d;
    animation: header-gimbal 5.2s linear infinite !important;
}

.site-brand .site-logo {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    overflow: visible;
    border-radius: 50%;
    background: transparent;
    perspective: 320px;
    transform-style: preserve-3d;
}

.site-wordmark {
    display: inline-flex;
    align-items: baseline;
    letter-spacing: -.035em;
    line-height: 1;
}

.site-wordmark b,
.site-wordmark strong,
.site-wordmark em,
.site-wordmark small {
    font: inherit;
    font-style: normal;
}

.site-wordmark b { color: #f5f9ff; }
.site-wordmark strong {
    color: #3987ff;
    font-size: 1.13em;
    font-weight: 850;
}
.site-wordmark em { color: #55e7e5; }
.site-wordmark small {
    margin-left: 1px;
    color: #d7e7f5;
    font-size: .76em;
    letter-spacing: -.02em;
}

body.motion-enabled .gyro-gimbal-a { animation: gimbal-a 8.4s linear infinite !important; }
body.motion-enabled .gyro-gimbal-b { animation: gimbal-b 6.8s linear infinite reverse !important; }
body.motion-enabled .gyro-gimbal-c { animation: gimbal-c 5.6s linear infinite !important; }
body.motion-enabled .hero-mark .mark-core { animation: gyro-core 3.2s ease-in-out infinite !important; }
body.motion-enabled .gyro-scene::before { animation: gyro-glow 3.2s ease-in-out infinite !important; }

@keyframes gimbal-a {
    0% { transform: rotateX(66deg) rotateY(0deg) rotateZ(12deg); }
    50% { transform: rotateX(66deg) rotateY(180deg) rotateZ(12deg); }
    100% { transform: rotateX(66deg) rotateY(360deg) rotateZ(12deg); }
}

@keyframes gimbal-b {
    0% { transform: rotateY(64deg) rotateX(0deg) rotateZ(-18deg); }
    50% { transform: rotateY(64deg) rotateX(180deg) rotateZ(-18deg); }
    100% { transform: rotateY(64deg) rotateX(360deg) rotateZ(-18deg); }
}

@keyframes gimbal-c {
    0% { transform: rotateX(38deg) rotateY(52deg) rotateZ(0deg); }
    50% { transform: rotateX(218deg) rotateY(52deg) rotateZ(180deg); }
    100% { transform: rotateX(398deg) rotateY(52deg) rotateZ(360deg); }
}

@keyframes header-gimbal {
    0% { transform: rotateX(62deg) rotateY(0deg) rotateZ(8deg); }
    50% { transform: rotateX(62deg) rotateY(180deg) rotateZ(8deg); }
    100% { transform: rotateX(62deg) rotateY(360deg) rotateZ(8deg); }
}

@keyframes gyro-core {
    0%, 100% { transform: translateZ(78px) scale(1); filter: drop-shadow(0 0 24px rgba(45, 146, 255, .28)); }
    50% { transform: translateZ(84px) scale(1.035); filter: drop-shadow(0 0 42px rgba(57, 225, 224, .52)); }
}

@keyframes gyro-glow {
    0%, 100% { opacity: .55; transform: scale(.92); }
    50% { opacity: 1; transform: scale(1.1); }
}

@media (max-width: 850px) {
    .gyro-scene { display: none; }
}