/* ═══════════════════════════════════════════════════════════
   EXSA Intro Splash — Glass Edition (matches index-new.html)
   Token-driven: recolors with the active theme. Loaded by
   site/intro-splash.php on any EXSA page. Shows once per session.
   ═══════════════════════════════════════════════════════════ */
#exsa-splash{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-bg, #f7f9fb);
  font-family:var(--font-family);
  animation:splashOut .5s ease-in 3.5s forwards;
  cursor:default;
}
/* -- Aurora backdrop -- */
#exsa-splash .s-aurora{
  position:absolute; inset:0;
  background:
    radial-gradient(60rem 40rem at 15% -10%, color-mix(in srgb, var(--color-link, #118bee) 16%, transparent), transparent 60%),
    radial-gradient(50rem 36rem at 110% 20%, color-mix(in srgb, var(--color-secondary, #920de9) 14%, transparent), transparent 60%),
    radial-gradient(46rem 34rem at 50% 120%, color-mix(in srgb, var(--color-success, #16a34a) 10%, transparent), transparent 60%),
    var(--color-bg, #f7f9fb);
}
#exsa-splash .s-blob{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.5;
  animation:sDrift 24s ease-in-out infinite alternate;
}
#exsa-splash .s-blob--1{ width:34rem; height:34rem; top:-12rem; left:-10rem;
  background:color-mix(in srgb, var(--color-link, #118bee) 26%, transparent); }
#exsa-splash .s-blob--2{ width:28rem; height:28rem; top:30%; right:-12rem; animation-delay:-8s;
  background:color-mix(in srgb, var(--color-secondary, #920de9) 22%, transparent); }
#exsa-splash .s-blob--3{ width:30rem; height:30rem; bottom:-14rem; left:30%; animation-delay:-16s;
  background:color-mix(in srgb, var(--color-success, #16a34a) 18%, transparent); }
@keyframes sDrift{
  from{ transform:translate(0, 0) scale(1); }
  to  { transform:translate(6rem, 4rem) scale(1.15); }
}
/* -- Centered content (no card — directly on the aurora) -- */
#exsa-splash .stage{
  position:relative; z-index:1;
  width:min(92vw, 720px);
  display:flex; flex-direction:column; align-items:center;
  gap:18px;
  opacity:0; animation:sStageIn .6s cubic-bezier(.22,.8,.3,1) .15s forwards;
}
@keyframes sStageIn{
  from{ opacity:0; transform:translateY(14px) scale(.97); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}
/* -- Version badge + pulse dot -- */
#exsa-splash .s-badge{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.76rem; font-weight:700; color:var(--color-link, #118bee);
  padding:6px 15px; border-radius:999px;
  background:color-mix(in srgb, var(--color-bg, #f7f9fb) 55%, transparent);
  border:1px solid color-mix(in srgb, var(--color-link, #118bee) 22%, transparent);
}
#exsa-splash .s-badge::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--color-success, #16a34a);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--color-success, #16a34a) 45%, transparent);
  animation:sPulse 2.2s ease-out infinite;
}
@keyframes sPulse{
  0%  { box-shadow:0 0 0 0 color-mix(in srgb, var(--color-success, #16a34a) 45%, transparent); }
  70% { box-shadow:0 0 0 9px color-mix(in srgb, var(--color-success, #16a34a) 0%, transparent); }
  100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--color-success, #16a34a) 0%, transparent); }
}
/* -- Logo + wordmark -- */
#exsa-splash .s-logo{ opacity:0; animation:sFadeIn .6s cubic-bezier(.22,.8,.3,1) .2s forwards; }
#exsa-splash .s-logo img{ width:clamp(72px, 14vw, 110px); height:auto; border-radius:16px; }
#exsa-splash .s-word{
  font-size:clamp(40px, 9vw, 76px); font-weight:800; line-height:1;
  letter-spacing:.04em;
  background:linear-gradient(120deg, var(--color-link, #118bee), var(--color-secondary, #920de9) 60%, var(--color-success, #16a34a));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; animation:sFadeIn .6s ease-out .35s forwards;
}
#exsa-splash .s-line{
  width:min(64vw, 340px); height:2px; border-radius:1px;
  background:linear-gradient(90deg,
    var(--color-link, #118bee) 0%, var(--color-secondary, #920de9) 26%, var(--color-success, #16a34a) 50%,
    var(--color-warning, #d97706) 72%, var(--color-danger, #dc2626) 100%);
  opacity:0; animation:sFadeIn .6s ease-out .45s forwards;
}
#exsa-splash .s-tagline{
  font-size:.98rem; line-height:1.7; color:var(--color-text-secondary, #757575);
  opacity:0; animation:sFadeUp .5s ease-out .55s forwards;
}
#exsa-splash .s-tagline b{ color:var(--color-text, #000); font-weight:700; }
#exsa-splash .s-term{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;
  font-family:var(--font-family-mono); font-size:.72rem;
  color:var(--color-text-secondary, #757575);
  padding:10px 16px; border-radius:999px;
  background:color-mix(in srgb, var(--color-text, #000) 5%, transparent);
  border:1px solid color-mix(in srgb, var(--color-text, #000) 8%, transparent);
  opacity:0; animation:sFadeUp .5s ease-out .75s forwards;
}
#exsa-splash .s-term .prompt{ color:var(--color-success, #16a34a); font-weight:700; }
#exsa-splash .s-term .cursor{
  display:inline-block; width:6px; height:13px; flex-shrink:0;
  background:var(--color-link, #118bee);
  animation:sBlink .8s step-end infinite;
}
@keyframes sBlink{ 50%{ opacity:0; } }
@keyframes sFadeIn{
  from{ opacity:0; filter:blur(6px); transform:scale(.94); }
  to  { opacity:1; filter:blur(0); transform:scale(1); }
}
@keyframes sFadeUp{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes splashOut{
  to{ opacity:0; visibility:hidden; }
}
/* -- Skip — ghost pill, matches g-btn--ghost -- */
#exsa-splash .skip{
  position:absolute; right:18px; bottom:18px; z-index:3;
  font-family:var(--font-family); font-size:.8rem; font-weight:700;
  color:var(--color-text, #000);
  border:1px solid color-mix(in srgb, var(--color-text, #000) 14%, transparent);
  background:color-mix(in srgb, var(--color-bg, #f7f9fb) 45%, transparent);
  padding:9px 18px; border-radius:999px; cursor:pointer;
  transition:transform .15s, border-color .2s, color .2s;
}
#exsa-splash .skip:hover{
  color:var(--color-link, #118bee);
  border-color:color-mix(in srgb, var(--color-link, #118bee) 40%, transparent);
  transform:translateY(-1px);
}
#exsa-splash .skip:focus-visible{ outline:2px solid var(--color-link, #118bee); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  #exsa-splash{ animation-delay:.4s; animation-duration:.25s; }
  #exsa-splash .s-blob{ animation:none; }
  #exsa-splash .s-badge::before{ animation:none; }
  #exsa-splash .stage,
  #exsa-splash .s-logo,
  #exsa-splash .s-word,
  #exsa-splash .s-line,
  #exsa-splash .s-tagline,
  #exsa-splash .s-term{ animation:none; opacity:1; }
}