/* The globe and the crests, as in the videos. */
.globe { position: relative; overflow: hidden; background: #030817; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.globe.is-dragging { cursor: grabbing; }
.globe-earth, .globe-lines { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.globe-icons { position: absolute; inset: 0; pointer-events: none; }
.globe-seat { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.globe-tail { position: absolute; overflow: visible; }
.globe-tail line { stroke: #fff; stroke-width: 2; }
.globe-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--ai); border: 2px solid #fff; box-sizing: border-box; }
.globe-crest { position: absolute; left: 0; top: 0; }

.crest { position: relative; flex: none; }
.crest-frame { position: absolute; left: 0; top: 0; overflow: visible; }
.crest-paint { position: absolute; overflow: hidden; }
.crest-face, .crest-blink { position: absolute; left: -6%; top: 10%; width: 112%; height: 112%; object-fit: contain; filter: sepia(0.25) contrast(1.05); }
.crest-blink, .crest.is-blink .crest-face { visibility: hidden; }
.crest.is-blink .crest-blink { visibility: visible; }
.crest.is-off { filter: grayscale(1) brightness(0.85); }
.crest-logo { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 50%; background: #F4E2A6; border-style: solid; border-color: #B8862B; display: flex; align-items: center; justify-content: center; color: #3B2A10; }
.crest-label { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: Georgia, "Times New Roman", serif; font-weight: 700; color: #F4E2A6; letter-spacing: .04em; text-shadow: 0 2px 6px #000; }
.crest-label b { font-family: "Anton", sans-serif; font-weight: 400; color: #FFAA28; margin-left: 4px; letter-spacing: 0.02em; }