/* 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; } /* 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; } }