/* =========================================================
   Shared Splash Design Tokens
   ========================================================= */

:root {
  --page_min_width: 360px;
  --first_view_height: 550px;
  --pastel_white: #fbfcf8;
  --splash_scale: 1;
}

.splash {
  --splash_neon: #22ef88;
  --splash_neon_bright: #78ffb8;
  --splash_neon_rgb: 34, 239, 136;
  --splash_neon_bright_rgb: 120, 255, 184;
  --splash_bloom_core_rgb: 52, 255, 147;
  --splash_ambient_rgb: 65, 255, 160;
  --splash_pastel_accent_rgb: 189, 255, 226;
  --splash_fill_alpha: 0.11;
  --splash_ambient_trace_opacity: 0.8;
  --splash_ambient_bloom_opacity: 1;
  --splash_glow_pool_alpha: 0.18;
  --splash_final_fill_duration: 520ms;
}

body.splash_active {
  overflow: hidden;
}

/* =========================================================
   Opaque Splash Shell
   ========================================================= */

.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  min-width: var(--page_min_width);
  min-height: var(--first_view_height);
  place-items: center;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background:
    radial-gradient(
      circle at 18% 84%,
      rgba(224, 203, 255, 0.52),
      transparent 38%
    ),
    radial-gradient(
      circle at 82% 20%,
      rgba(var(--splash_pastel_accent_rgb), 0.64),
      transparent 42%
    ),
    radial-gradient(
      circle at 50% 48%,
      rgba(255, 255, 255, 0.98),
      rgba(248, 252, 247, 0.92) 54%,
      rgba(243, 250, 248, 0.94) 100%
    );
  background-color: var(--pastel_white);
  transition:
    opacity 700ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 700ms linear;
}

.splash::before {
  position: absolute;
  inset: -20%;
  content: "";
  background:
    radial-gradient(
      circle,
      rgba(var(--splash_neon_rgb), 0.08),
      transparent 62%
    );
  opacity: 0.35;
  transform: scale(0.8);
  animation: background_breathe 2600ms ease-in-out infinite alternate;
}

.splash.is_exiting,
.splash.is_idle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* =========================================================
   Ambient Field
   ========================================================= */

.splash_ambient {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(90vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(var(--splash_ambient_rgb), 0.12);
  filter: blur(80px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition:
    opacity 900ms ease,
    transform 1200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.splash.is_tracing .splash_ambient {
  opacity: var(--splash_ambient_trace_opacity);
  transform: translate(-50%, -50%) scale(1);
}

.splash.is_blooming .splash_ambient {
  opacity: var(--splash_ambient_bloom_opacity);
  transform: translate(-50%, -50%) scale(1.18);
}

/* =========================================================
   360 x 550 Splash Design Stage
   ========================================================= */

.splash_stage {
  position: relative;
  width: 360px;
  height: 550px;
  transform: scale(var(--splash_scale));
  transform-origin: center;
}

.splash_logo_mount {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 292px;
  height: 292px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition:
    opacity 500ms ease,
    transform 1100ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 500ms ease;
}

.splash.is_ready .splash_logo_mount {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.splash.is_blooming .splash_logo_mount {
  filter:
    drop-shadow(0 0 5px rgba(var(--splash_bloom_core_rgb), 0.95))
    drop-shadow(0 0 17px rgba(var(--splash_neon_rgb), 0.72))
    drop-shadow(0 0 38px rgba(var(--splash_neon_rgb), 0.34));
}

.splash_logo_svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* =========================================================
   Shared Trace Animation
   ========================================================= */

.splash_logo_svg .is_trace_path {
  fill: transparent !important;
  stroke: var(--splash_neon) !important;
  stroke-width: 2.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 1;
  filter:
    drop-shadow(0 0 2px rgba(var(--splash_neon_bright_rgb), 0.95))
    drop-shadow(0 0 7px rgba(var(--splash_neon_rgb), 0.72));
  animation: none;
}

.splash.is_tracing .splash_logo_svg .is_trace_path {
  animation-name: trace_path;
  animation-duration: var(--trace_duration, 1600ms);
  animation-delay: var(--trace_delay, 0ms);
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  animation-fill-mode: forwards;
}

.splash_glow_pool {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: rgba(
    var(--splash_neon_rgb),
    var(--splash_glow_pool_alpha)
  );
  filter: blur(48px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72);
}

.splash.is_blooming .splash_glow_pool {
  animation: glow_bloom 850ms ease-out forwards;
}

/* =========================================================
   Shared Keyframes
   ========================================================= */

@keyframes trace_path {
  from {
    stroke-dashoffset: var(--path_length);
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes glow_bloom {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }

  48% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.26);
  }

  100% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes background_breathe {
  from {
    opacity: 0.24;
    transform: scale(0.78);
  }

  to {
    opacity: 0.5;
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash,
  .splash *,
  .splash::before,
  .splash::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}