/* Slipstream - intro overlay (js/ui/intro.js). All classes are prefixed si-. */

.si-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #e8edf5;
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%, rgba(11, 15, 23, 0.36), rgba(7, 9, 13, 0.72)),
    rgba(7, 9, 13, 0.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  backdrop-filter: blur(24px) saturate(1.15);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-backdrop-filter 1.4s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.si-overlay.si-out {
  opacity: 0;
  -webkit-backdrop-filter: blur(0px) saturate(1);
  backdrop-filter: blur(0px) saturate(1);
  pointer-events: none;
}

.si-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 1.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease;
}

.si-out .si-stage {
  transform: scale(1.04);
  opacity: 0;
}

/* ---- mark ---- */

.si-mark {
  display: block;
  width: clamp(150px, 34vmin, 300px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 22px rgba(61, 224, 255, 0.28));
}

.si-foil {
  transform-box: fill-box;
  transform-origin: 40% 50%;
  animation: si-foil-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s both;
}

.si-line {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  animation: si-draw 0.95s cubic-bezier(0.55, 0.1, 0.35, 1) both;
}

.si-l3 { animation-delay: 0.15s; }
.si-l2 { animation-delay: 0.3s; }
.si-l1 {
  animation-delay: 0.45s;
  animation-duration: 0.8s;
  animation-timing-function: cubic-bezier(0.5, 0.05, 0.85, 0.6); /* keeps its speed into the vortex */
}

.si-spiral {
  animation-delay: 1.2s;
  animation-duration: 0.95s;
  animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1);
}

/* The vortex winds up one full clockwise turn while it draws, and docks onto the top streamline. */
.si-vortex {
  transform-box: fill-box;
  animation: si-spin 1.05s cubic-bezier(0.25, 0.6, 0.3, 1) 1.2s both;
}

/* ---- wordmark, tagline, hint ---- */

.si-word {
  display: block;
  height: clamp(40px, 8.5vmin, 76px);
  width: auto;
  margin-top: clamp(18px, 3.4vmin, 32px);
  overflow: visible;
  animation: si-rise 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) 1.5s both;
}

.si-tagline {
  margin: clamp(12px, 2.2vmin, 20px) 0 0;
  max-width: 34em;
  font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(15px, 2.3vmin, 20px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: #e8edf5;
  animation: si-fade-up 0.8s ease-out 1.9s both;
}

.si-tagline span {
  font-weight: 400;
  color: #8a94a6;
}

.si-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(28px, env(safe-area-inset-bottom));
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a94a6;
  animation: si-hint-in 0.6s ease-out 0.9s both;
}

.si-out .si-hint {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ---- keyframes ---- */

@keyframes si-draw {
  0% { stroke-dashoffset: 1; opacity: 0; }
  8% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes si-foil-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes si-spin {
  from { transform: rotate(-360deg); }
  to { transform: rotate(0deg); }
}

@keyframes si-rise {
  from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes si-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes si-hint-in {
  from { opacity: 0; }
  to { opacity: 0.75; }
}

/* ---- reduced motion: static logo, short fade, no blur animation ---- */

.si-reduced,
.si-reduced .si-stage {
  transition: opacity 0.5s ease;
}

.si-reduced.si-out {
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  backdrop-filter: blur(24px) saturate(1.15);
}

.si-reduced.si-out .si-stage {
  transform: none;
}

.si-reduced .si-foil,
.si-reduced .si-line,
.si-reduced .si-vortex,
.si-reduced .si-word,
.si-reduced .si-tagline,
.si-reduced .si-hint {
  animation: none;
  stroke-dashoffset: 0;
}

.si-reduced .si-hint {
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .si-overlay {
    transition: opacity 0.5s ease;
  }
}