/* Declared here too: this file is linked in on both pages, so the font applies before the app bundle (which also declares it) arrives. */ @font-face { font-family: "Rubik"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/rubik-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Rubik"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/rubik-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .wasila-splash { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, #085925 0%, #043818 55%, #02200d 100%); color: #fff; pointer-events: none; isolation: isolate; opacity: 1; visibility: visible; transition: opacity .45s cubic-bezier(.4, 0, .2, 1), visibility .45s; animation: wasila-splash-failsafe 0s linear 6s forwards; font-family: "Rubik", system-ui, -apple-system, sans-serif; } /* Animated Grid Background representing GPS / Map Routes */ .wasila-splash__bg-grid { position: absolute; inset: -100px; z-index: -2; background-image: linear-gradient(rgba(36, 232, 106, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(36, 232, 106, 0.07) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 80%); animation: wasila-grid-move 25s linear infinite; } @keyframes wasila-grid-move { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-24px) scale(1.02); } 100% { transform: translateY(0) scale(1); } } /* Radar pulse wave effect */ .wasila-splash__radar { position: absolute; width: min(560px, 85vw); aspect-ratio: 1; z-index: -1; border-radius: 50%; border: 1px stroke rgba(36, 232, 106, 0.15); background: radial-gradient(circle, rgba(36, 232, 106, 0.16) 0%, rgba(4, 72, 31, 0) 70%); box-shadow: 0 0 100px rgba(36, 232, 106, 0.12); opacity: 0; transform: scale(0.6); } .wasila-splash.is-ready .wasila-splash__radar { animation: wasila-radar-pulse 2s cubic-bezier(0.22, 1, 0.36, 1) infinite alternate; } @keyframes wasila-radar-pulse { 0% { opacity: 0.3; transform: scale(0.85); } 100% { opacity: 0.85; transform: scale(1.05); } } /* Main Content Container */ .wasila-splash__content { width: min(480px, calc(100vw - 40px)); display: flex; flex-direction: column; align-items: center; position: relative; opacity: 0; transform: translateY(22px); padding: 32px 24px; background: rgba(4, 45, 20, 0.45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .wasila-splash.is-ready .wasila-splash__content { animation: wasila-splash-enter .75s cubic-bezier(.22, 1, .36, 1) .05s forwards; } /* Smart Transportation Badge */ .wasila-splash__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; margin-bottom: 20px; background: rgba(36, 232, 106, 0.12); border: 1px solid rgba(36, 232, 106, 0.3); border-radius: 99px; color: #24e86a; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 0 15px rgba(36, 232, 106, 0.15); } .wasila-splash__badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #24e86a; box-shadow: 0 0 8px #24e86a; animation: wasila-dot-pulse 1.4s ease-in-out infinite alternate; } @keyframes wasila-dot-pulse { 0% { transform: scale(0.8); opacity: 0.6; } 100% { transform: scale(1.3); opacity: 1; } } /* Transportation Route & Car Stage */ .wasila-splash__route-stage { width: 100%; max-width: 320px; height: 90px; position: relative; margin-bottom: 12px; filter: drop-shadow(0 8px 20px rgba(36, 232, 106, 0.2)); } .wasila-splash__route-svg { width: 100%; height: 100%; overflow: visible; } .route-glow { stroke-dasharray: 260; stroke-dashoffset: 260; } .wasila-splash.is-ready .route-glow { animation: wasila-route-draw 1.6s ease-out forwards; } @keyframes wasila-route-draw { to { stroke-dashoffset: 0; } } /* Car driving along path */ .wasila-splash__car-group { offset-path: path("M 15,55 C 65,15 125,65 210,25"); offset-rotate: auto; offset-distance: 0%; } .wasila-splash.is-ready .wasila-splash__car-group { animation: wasila-car-drive 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s infinite alternate; } @keyframes wasila-car-drive { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } /* GPS Pin Pulses */ .origin-pulse { animation: wasila-pin-ripple 1.5s infinite; transform-origin: center; } .dest-pulse { animation: wasila-pin-ripple 1.5s infinite 0.75s; transform-origin: center; } @keyframes wasila-pin-ripple { 0% { r: 6px; opacity: 0.8; } 100% { r: 18px; opacity: 0; } } /* Wasila Logo */ .wasila-splash__logo { width: clamp(200px, 42vw, 320px); aspect-ratio: 4.1 / 1; position: relative; display: block; margin-bottom: 24px; } .wasila-splash__logo img { width: 100%; height: auto; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)); } /* Transportation Features Bar */ .wasila-splash__features { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; } .feat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.9); } .feat-icon { font-style: normal; font-size: 13px; } /* Progress Bar */ .wasila-splash__progress { width: 100%; max-width: 280px; height: 4px; display: block; position: relative; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.15); box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); } .wasila-splash__progress i { width: 100%; height: 100%; display: block; background: linear-gradient(90deg, #10b981, #24e86a, #a7f3d0); box-shadow: 0 0 12px #24e86a; transform: translateX(-102%); transform-origin: left center; border-radius: 999px; } .wasila-splash[dir="rtl"] .wasila-splash__progress i { transform: translateX(102%); transform-origin: right center; } .wasila-splash.is-ready .wasila-splash__progress i { animation: wasila-splash-progress 1.5s cubic-bezier(.65, 0, .35, 1) .1s forwards; } /* Cities Footer */ .wasila-splash__cities { position: absolute; bottom: clamp(20px, 4vh, 44px); left: 50%; color: rgba(255, 255, 255, 0.75); font-size: 11px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; opacity: 0; transform: translate(-50%, 10px); background: rgba(4, 45, 20, 0.35); padding: 6px 18px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); } .wasila-splash.is-ready .wasila-splash__cities { animation: wasila-splash-cities .55s ease .3s forwards; } .wasila-splash.is-leaving { opacity: 0; visibility: hidden; } @keyframes wasila-splash-enter { to { opacity: 1; transform: translateY(0); } } @keyframes wasila-splash-progress { to { transform: translateX(0); } } @keyframes wasila-splash-cities { to { opacity: 1; transform: translate(-50%, 0); } } @keyframes wasila-splash-failsafe { to { opacity: 0; visibility: hidden; } } @media (max-width: 520px) { .wasila-splash__content { padding: 24px 16px; border-radius: 22px; } .wasila-splash__badge { margin-bottom: 14px; font-size: 12px; } .wasila-splash__route-stage { height: 70px; margin-bottom: 8px; } .wasila-splash__logo { margin-bottom: 18px; } .wasila-splash__features { gap: 6px; margin-bottom: 20px; } .feat-pill { font-size: 10px; padding: 4px 9px; } } @media (prefers-reduced-motion: reduce) { .wasila-splash { display: none !important; } }