/* Hide the canvas while Bevy appends it to , before we move it */ body > canvas { display: none !important; } .globe-layout { position: relative; width: 100%; } .page-container { overflow-x: clip; } .globe-text { position: relative; z-index: 1; } .globe-text .globe-title { font-size: 30px; } .globe-text .globe-description { font-size: 20px; line-height: 1.6; } #globe-container { position: absolute; top: -90px; right: -10px; width: 595px; height: 595px; z-index: 10; pointer-events: none; } #globe-container canvas { position: relative !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: transparent !important; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: none; } /* Loading skeleton: same footprint as the globe, hidden once Bevy's canvas is moved in (#globe-container.globe-live). Globe visuals unaffected. */ .globe-skeleton { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .globe-skeleton::before { content: ""; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(16,42,67,0.10) 0%, rgba(16,42,67,0.03) 70%, transparent 71%); } .globe-spinner { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(16,42,67,0.15); border-top-color: #3b82f6; animation: globe-spin 0.9s linear infinite; } @keyframes globe-spin { to { transform: rotate(360deg); } } #globe-container.globe-live .globe-skeleton { display: none; } /* Desktop: slide-in animation */ @media (min-width: 851px) { .globe-text { width: 100%; transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1); } #globe-container { transform: translateX(120%); opacity: 0; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; } .globe-layout.globe-ready #globe-container { transform: translateX(0); opacity: 1; } .globe-layout.globe-settled .globe-text { width: calc(100% - 585px); } } /* Mobile: globe on top, text below */ @media (max-width: 850px) { .globe-layout { display: flex; flex-direction: column; } #globe-container { position: relative; order: -1; top: 0; right: 0; width: 100%; height: 100vw; overflow: visible; } .globe-text .globe-title { font-size: 24px; } .globe-text .globe-description { font-size: 16px; } }