/* ============================================================ SplashScreen Component — Standalone CSS Prefix: .sp- (no collisions with page styles) Usage: Works independently of any page stylesheet. All class names are namespaced with sp- ============================================================ */ /* ── Host wrapper ─────────────────────────────────────────── */ /* Injected into by SplashScreen.show() */ .sp-host { position: fixed; inset: 0; z-index: 9990; pointer-events: none; /* doors + overlay handle their own events */ } /* ── Door panels (optional — doorReveal: true) ────────────── */ .sp-door { position: fixed; top: 0; bottom: 0; width: 50%; background: #000000; z-index: 9998; transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1); pointer-events: none; } .sp-door-left { left: 0; } .sp-door-right { right: 0; } .sp-door-left.open { transform: translateX(-100%); } .sp-door-right.open { transform: translateX(100%); } /* ── Main overlay ─────────────────────────────────────────── */ .sp-overlay { position: fixed; inset: 0; z-index: 9999; background: #000000; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: auto; } /* ── Individual slides ────────────────────────────────────── */ .sp-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; z-index: 1; } .sp-slide.active { opacity: 1; z-index: 2; } /* ── Sponsor logo ─────────────────────────────────────────── */ .sp-logo { width: clamp(160px, 22vw, 280px); height: clamp(160px, 22vw, 280px); object-fit: cover; border-radius: 50%; display: block; animation: sp-logo-in 0.85s cubic-bezier(0.77, 0, 0.175, 1) forwards; } @keyframes sp-logo-in { from { opacity: 0; transform: scale(0.55); filter: blur(24px) drop-shadow(0 0 0 rgba(211,29,36,0)); } to { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(0 0 52px rgba(211,29,36,0.5)); } } /* ── Sponsor name ─────────────────────────────────────────── */ .sp-name { font-family: 'Tajawal', 'Segoe UI', 'Tahoma', sans-serif; font-size: clamp(1.6rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: 0; color: #e5e5e5; text-align: center; margin: 0; animation: sp-name-in 0.9s 0.15s cubic-bezier(0.77, 0, 0.175, 1) both; } @keyframes sp-name-in { from { opacity: 0; transform: translateY(18px); filter: blur(10px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } /* ── Progress bar ─────────────────────────────────────────── */ .sp-progress { position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: #D31D24; z-index: 10; pointer-events: none; transition: none; /* JS drives width directly */ } /* ── Flash overlay (between slides) ──────────────────────── */ .sp-flash { position: absolute; inset: 0; background: #e5e5e5; opacity: 0; pointer-events: none; z-index: 8; transition: opacity 0.08s ease; } .sp-flash.flashing { opacity: 0.55; } /* ── Skip button ──────────────────────────────────────────── */ .sp-skip { position: absolute; bottom: 2.5rem; right: 2.5rem; z-index: 30; pointer-events: auto; background: transparent; border: 1px solid rgba(255,255,255,0.13); color: rgba(255,255,255,0.55); padding: 0.5rem 1.4rem; border-radius: 2rem; font-family: 'Tajawal', 'Segoe UI', 'Tahoma', sans-serif; font-size: 0.82rem; cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .sp-skip:hover, .sp-skip:focus-visible { background: rgba(8, 8, 18, 0.78); color: #e5e5e5; border-color: rgba(255,255,255,0.45); outline: none; }