Spaces:
Running
Running
| /* ============================================================ | |
| SAARTHI AI — premium splash animation | |
| White canvas, crimson gradients, glassmorphism, route trails. | |
| Timeline is orchestrated by splash.js via .phase-* classes. | |
| ============================================================ */ | |
| #splash { | |
| position: fixed; inset: 0; z-index: 6000; | |
| background: | |
| radial-gradient(900px 600px at 85% 10%, rgba(220, 20, 60, 0.06), transparent 60%), | |
| radial-gradient(800px 600px at 10% 90%, rgba(220, 20, 60, 0.05), transparent 60%), | |
| #FFFFFF; | |
| overflow: hidden; | |
| cursor: pointer; | |
| opacity: 1; | |
| transition: opacity 0.55s ease; | |
| } | |
| #splash.phase-out { opacity: 0; pointer-events: none; } | |
| /* soft gradient blobs the glass card sits over */ | |
| .splash-blob { | |
| position: absolute; border-radius: 50%; filter: blur(70px); | |
| opacity: 0; transition: opacity 1.2s ease; | |
| } | |
| .splash-blob.b1 { | |
| width: 420px; height: 420px; left: 50%; top: 38%; | |
| transform: translate(-78%, -50%); | |
| background: radial-gradient(circle, rgba(255, 77, 109, 0.35), transparent 65%); | |
| } | |
| .splash-blob.b2 { | |
| width: 360px; height: 360px; left: 50%; top: 52%; | |
| transform: translate(-12%, -50%); | |
| background: radial-gradient(circle, rgba(142, 11, 38, 0.25), transparent 65%); | |
| } | |
| #splash.phase-text .splash-blob { opacity: 1; } | |
| /* ---------- flight SVG layer ---------- */ | |
| #splash-svg { position: absolute; inset: 0; width: 100%; height: 100%; } | |
| #trail { | |
| stroke: url(#trail-grad); | |
| stroke-width: 5; | |
| fill: none; | |
| stroke-linecap: round; | |
| filter: drop-shadow(0 2px 10px rgba(220, 20, 60, 0.35)); | |
| transition: opacity 0.6s ease; | |
| } | |
| #splash.phase-logo #trail { | |
| opacity: 0.22; /* trail settles into a faint route line */ | |
| stroke-dasharray: 7 12 ; /* morph from solid flight to dotted route */ | |
| transition: opacity 0.6s ease, stroke-dasharray 0.6s ease; | |
| } | |
| #plane { | |
| filter: drop-shadow(0 0 14px rgba(255, 61, 96, 0.75)) | |
| drop-shadow(0 4px 8px rgba(122, 9, 32, 0.3)); | |
| transition: opacity 0.3s ease; | |
| } | |
| #splash.phase-logo #plane { opacity: 0; } | |
| /* AI network: nodes + connection lines drawn behind the route */ | |
| .net { opacity: 0; transition: opacity 0.9s ease; } | |
| #splash.phase-net .net { opacity: 1; } | |
| .net-line { | |
| stroke: rgba(220, 20, 60, 0.18); stroke-width: 1.6; fill: none; | |
| stroke-dasharray: 240; stroke-dashoffset: 240; | |
| } | |
| #splash.phase-net .net-line { animation: net-draw 1.6s ease forwards; } | |
| @keyframes net-draw { to { stroke-dashoffset: 0; } } | |
| .net-node { | |
| fill: #fff; stroke: #DC143C; stroke-width: 2.5; | |
| transform-box: fill-box; transform-origin: center; | |
| opacity: 0; scale: 0; | |
| } | |
| #splash.phase-net .net-node { animation: node-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4) forwards; } | |
| .net-node:nth-of-type(odd) { animation-delay: 0.25s ; } | |
| @keyframes node-pop { to { opacity: 1; scale: 1; } } | |
| .net-ring { | |
| fill: none; stroke: rgba(220, 20, 60, 0.3); stroke-width: 1.5; | |
| transform-box: fill-box; transform-origin: center; opacity: 0; | |
| } | |
| #splash.phase-net .net-ring { animation: ring-pulse 2.2s ease-out infinite; } | |
| @keyframes ring-pulse { | |
| 0% { opacity: 0.7; scale: 0.4; } | |
| 100% { opacity: 0; scale: 2.1; } | |
| } | |
| /* floating AI particles */ | |
| .splash-particle { | |
| position: absolute; width: 6px; height: 6px; border-radius: 50%; | |
| background: radial-gradient(circle at 35% 30%, #FF5C7C, #A60D2E); | |
| opacity: 0; | |
| } | |
| #splash.phase-net .splash-particle { | |
| animation: particle-float 3.2s ease-in-out var(--pd, 0s) infinite; | |
| } | |
| @keyframes particle-float { | |
| 0%, 100% { opacity: 0; transform: translateY(8px) scale(0.6); } | |
| 35% { opacity: 0.75; transform: translateY(-6px) scale(1); } | |
| 70% { opacity: 0.35; transform: translateY(-14px) scale(0.85); } | |
| } | |
| /* ---------- center title on glass ---------- */ | |
| .splash-center { | |
| position: absolute; inset: 0; | |
| display: flex; align-items: center; justify-content: center; | |
| pointer-events: none; | |
| } | |
| .splash-glass { | |
| padding: 34px 52px; border-radius: 28px; text-align: center; | |
| background: rgba(255, 255, 255, 0.45); | |
| border: 1px solid rgba(255, 255, 255, 0.7); | |
| backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); | |
| box-shadow: 0 24px 70px rgba(122, 9, 32, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9); | |
| opacity: 0; transform: translateY(22px) scale(0.96); | |
| transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.3, 1), | |
| transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1); | |
| } | |
| #splash.phase-text .splash-glass { opacity: 1; transform: none; } | |
| .splash-title { | |
| font-family: 'Plus Jakarta Sans', system-ui, sans-serif; | |
| font-size: clamp(2.4rem, 7vw, 4rem); font-weight: 800; | |
| letter-spacing: -0.02em; line-height: 1.05; | |
| display: flex; gap: 0.28em; justify-content: center; | |
| } | |
| .splash-title .st-word { | |
| display: inline-block; | |
| background: linear-gradient(120deg, #16181D 20%, #DC143C 75%, #7A0920 100%); | |
| -webkit-background-clip: text; background-clip: text; color: transparent; | |
| opacity: 0; transform: translateY(105%); | |
| filter: blur(6px); | |
| } | |
| .splash-title .st-ai { | |
| background: linear-gradient(120deg, #FF4D6D 0%, #DC143C 50%, #7A0920 100%); | |
| -webkit-background-clip: text; background-clip: text; | |
| } | |
| #splash.phase-text .st-word { | |
| animation: word-rise 0.75s cubic-bezier(0.2, 0.8, 0.25, 1) forwards; | |
| } | |
| #splash.phase-text .st-word:nth-child(2) { animation-delay: 0.12s; } | |
| @keyframes word-rise { | |
| to { opacity: 1; transform: none; filter: blur(0); } | |
| } | |
| .splash-title-clip { overflow: hidden; display: inline-flex; gap: 0.28em; } | |
| .splash-tag { | |
| margin-top: 12px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; | |
| font-size: 0.95rem; font-weight: 600; letter-spacing: 0.28em; | |
| text-transform: uppercase; color: #6B7280; | |
| opacity: 0; transform: translateY(8px); | |
| transition: opacity 0.7s ease 0.45s, transform 0.7s ease 0.45s, | |
| letter-spacing 0.9s ease 0.45s; | |
| } | |
| #splash.phase-text .splash-tag { opacity: 1; transform: none; letter-spacing: 0.34em; } | |
| /* ---------- logo morph (plane lands in the navbar) ---------- */ | |
| .splash-logochip { | |
| position: absolute; top: 14px; left: 22px; | |
| display: flex; align-items: center; gap: 10px; | |
| background: #fff; padding: 8px 16px 8px 9px; border-radius: 14px; | |
| box-shadow: 0 8px 30px rgba(22, 24, 29, 0.10); | |
| font-family: 'Plus Jakarta Sans', system-ui, sans-serif; | |
| font-weight: 800; font-size: 1.05rem; | |
| opacity: 0; transform: scale(0.4) translate(-12px, -12px); | |
| transform-origin: top left; | |
| } | |
| .splash-logochip .lm { | |
| width: 32px; height: 32px; border-radius: 10px; | |
| display: flex; align-items: center; justify-content: center; | |
| background: linear-gradient(135deg, #FF4D6D 0%, #DC143C 45%, #8E0B26 100%); | |
| box-shadow: 0 4px 12px rgba(220, 20, 60, 0.4); | |
| } | |
| .splash-logochip .lm svg { width: 16px; height: 16px; } | |
| .splash-logochip .lt { | |
| background: linear-gradient(120deg, #16181D 30%, #DC143C 100%); | |
| -webkit-background-clip: text; background-clip: text; color: transparent; | |
| } | |
| #splash.phase-logo .splash-logochip { | |
| animation: chip-land 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.35) forwards; | |
| } | |
| @keyframes chip-land { | |
| 0% { opacity: 0; transform: scale(0.4) translate(-12px, -12px); } | |
| 100% { opacity: 1; transform: none; } | |
| } | |
| /* ---------- AI activation pulse ---------- */ | |
| .splash-pulse { | |
| position: absolute; top: 30px; left: 60px; | |
| width: 18px; height: 18px; border-radius: 50%; | |
| border: 2.5px solid rgba(220, 20, 60, 0.55); | |
| opacity: 0; pointer-events: none; | |
| } | |
| #splash.phase-pulse .splash-pulse { animation: activation 0.9s cubic-bezier(0.1, 0.6, 0.3, 1) forwards; } | |
| .splash-pulse.p2 { border-width: 1.5px; } | |
| #splash.phase-pulse .splash-pulse.p2 { animation-delay: 0.18s; } | |
| @keyframes activation { | |
| 0% { opacity: 0.9; transform: scale(1); } | |
| 100% { opacity: 0; transform: scale(70); } | |
| } | |
| /* ---------- skip ---------- */ | |
| .splash-skip { | |
| position: absolute; bottom: 26px; right: 26px; | |
| border: 1.5px solid #E9EAEE; background: rgba(255, 255, 255, 0.7); | |
| backdrop-filter: blur(8px); | |
| border-radius: 999px; padding: 9px 18px; cursor: pointer; | |
| font-family: 'Plus Jakarta Sans', system-ui, sans-serif; | |
| font-size: 0.76rem; font-weight: 700; color: #6B7280; | |
| opacity: 0; animation: skip-in 0.6s ease 1.2s forwards; | |
| } | |
| .splash-skip:hover { color: #DC143C; border-color: #DC143C; } | |
| @keyframes skip-in { to { opacity: 1; } } | |
| @media (max-width: 820px) { | |
| .splash-glass { padding: 26px 30px; margin: 0 18px; } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| #splash { display: none; } | |
| } | |