/* == LOADING OVERLAY == */ /* Hide page body while overlay is active */ html.lang-switching body { visibility: hidden; } .lang-loading-overlay { position: fixed; inset: 0; background: var(--surface-white); z-index: 9999; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; opacity: 1; transition: opacity 0.15s ease; } /* Shown on page load (lang-switching class on ) */ html.lang-switching .lang-loading-overlay { display: flex; visibility: visible; } /* Shown immediately on button click (before reload) */ .lang-loading-overlay.is-visible { display: flex; } .lang-loading-overlay.fade-out { opacity: 0; } .lang-loading-logo { height: 52px; opacity: 0.85; } .lang-loading-dots { display: flex; gap: 7px; } .lang-loading-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); animation: lang-dot-bounce 1.2s infinite ease-in-out; } .lang-loading-dots span:nth-child(2) { animation-delay: 0.2s; } .lang-loading-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes lang-dot-bounce { 0%, 80%, 100% { transform: scale(0.55); opacity: 0.35; } 40% { transform: scale(1); opacity: 1; } }