/* ═══════════════════════════════════════════════════════════════ preloader.css — Aviator game loading overlay Link this BEFORE style.css in your ═══════════════════════════════════════════════════════════════ */ /* ── Overlay backdrop ───────────────────────────────────────── */ .game-loading-overlay { position: fixed; inset: 0; z-index: 9999; background: #07080f; display: flex; align-items: center; justify-content: center; transition: opacity 0.55s ease, visibility 0.55s ease; visibility: visible; opacity: 1; } .game-loading-overlay.dismissed { opacity: 0; visibility: hidden; pointer-events: none; } /* ── Inner wrapper ──────────────────────────────────────────── */ .game-loading-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 0 24px; } /* ── Logo ───────────────────────────────────────────────────── */ .aviator-loading-logo { font-family: 'Montserrat', sans-serif; font-size: 38px; font-weight: 900; font-style: italic; color: #ef4444; letter-spacing: -1px; line-height: 1; user-select: none; } .aviator-loading-logo .logo-a { color: #ff7070; } /* ── Spinner container — FIXED size ────────────────────────── */ .game-loading-spinner { width: 64px; /* explicit px size on the wrapper */ height: 64px; flex-shrink: 0; } /* The SVG itself must NOT exceed its wrapper */ .spinner-svg { display: block; width: 64px; height: 64px; overflow: visible; /* keeps stroke-linecap tips visible */ } /* Track ring — static, no animation */ .spinner-track { stroke: rgba(239, 68, 68, 0.15); } /* Spinning arc */ .spinner-arc { stroke: #ef4444; stroke-linecap: round; transform-origin: 32px 32px; /* centre of viewBox="0 0 64 64" */ animation: spin-arc 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes spin-arc { 0% { stroke-dasharray: 20 101; transform: rotate(0deg); } 50% { stroke-dasharray: 80 101; transform: rotate(270deg); } 100% { stroke-dasharray: 20 101; transform: rotate(720deg); } } /* ── Status text ────────────────────────────────────────────── */ .game-loading-text { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.4px; min-height: 18px; transition: color 0.3s ease; } /* ── Bouncing dots ──────────────────────────────────────────── */ .game-loading-dots { display: flex; gap: 7px; align-items: center; height: 10px; } .game-loading-dots span { display: block; width: 6px; height: 6px; border-radius: 50%; background: rgba(239, 68, 68, 0.5); animation: dot-bounce 1.3s ease-in-out infinite; } .game-loading-dots span:nth-child(1) { animation-delay: 0s; } .game-loading-dots span:nth-child(2) { animation-delay: 0.18s; } .game-loading-dots span:nth-child(3) { animation-delay: 0.36s; } @keyframes dot-bounce { 0%, 80%, 100% { transform: translateY(0) scale(0.75); opacity: 0.4; } 40% { transform: translateY(-5px) scale(1.1); opacity: 1; } } /* ── Mobile ─────────────────────────────────────────────────── */ @media (max-width: 480px) { .aviator-loading-logo { font-size: 30px; } .game-loading-spinner { width: 52px; height: 52px; } .spinner-svg { width: 52px; height: 52px; } .spinner-arc { transform-origin: 32px 32px; } .game-loading-text { font-size: 12px; } }