static/css/splash.css

/* ============================================================
   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 !important;   /* 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 !important; }
@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; }
}