/* ===================================================================== OrderStraight — Stage 12: App-style splash screen * Full-viewport navy overlay with the OrderStraight logo. * 2-second sequence: fade-in (300ms) → hold (1400ms) → fade-out (300ms). * Pure CSS animation — no JS timing race. The overlay paints IMMEDIATELY before the rest of the page renders, then animates out and stops blocking pointer events. * Suppressed when: (a) set by the inline head script (sessionStorage flag "os_splash_shown_v1" already present) (b) user prefers reduced motion ===================================================================== */ .os-splash { position: fixed; inset: 0; /* z-index intentionally BELOW the modal stack (chooser sheet 9998/9999, login modal in auth.css). Splash is full-opaque and covers the whole viewport visually, so a modal opened in the same 2s window will still render correctly on top instead of being hidden under the splash. */ z-index: 9000; background: #1C2A44; /* Coastal Premium navy */ display: flex; align-items: center; justify-content: center; overflow: hidden; /* Animation: fade-in (0-15%) → hold (15-85%) → fade-out (85-100%) over 2s. forwards keeps opacity:0 + visibility:hidden after the run so the overlay no longer blocks taps on the page underneath. */ animation: osSplashFade 2000ms ease-in-out forwards; will-change: opacity; } .os-splash__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; /* Subtle logo scale-up — gives the brand a "breathing in" feel. */ animation: osSplashLogo 2000ms ease-out forwards; will-change: transform, opacity; } .os-splash__logo { width: min(58vw, 280px); height: auto; display: block; /* Logo is on dark background — the file already has a transparent BG. */ } .os-splash__tagline { color: rgba(255, 255, 255, 0.78); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; } /* Animated dot pulse under the logo — soft "loading" affordance. */ .os-splash__dots { display: inline-flex; gap: 6px; margin-top: 4px; } .os-splash__dots span { width: 7px; height: 7px; border-radius: 50%; background: #E07856; /* coral accent */ opacity: 0.4; animation: osSplashDot 1.2s ease-in-out infinite; } .os-splash__dots span:nth-child(2) { animation-delay: 0.18s; } .os-splash__dots span:nth-child(3) { animation-delay: 0.36s; } @keyframes osSplashFade { 0% { opacity: 0; visibility: visible; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; pointer-events: none; } } @keyframes osSplashLogo { 0% { opacity: 0; transform: scale(0.92); } 20% { opacity: 1; transform: scale(1.00); } 90% { opacity: 1; transform: scale(1.00); } 100% { opacity: 0; transform: scale(0.98); } } @keyframes osSplashDot { 0%, 80%, 100% { opacity: 0.4; transform: scale(1); } 40% { opacity: 1.0; transform: scale(1.25); } } /* ------ Suppression rules ------ */ html.os-splash-skip .os-splash { display: none !important; } @media (prefers-reduced-motion: reduce) { .os-splash { display: none !important; } }