/* ============================================================
   HOWZIT PORTAL — Splash Screen
   ============================================================
   Reuses webbot-demo animation principles (wb_robot.css):
     - Floating particles (wb-float)
     - Twinkling starfield (wb-twinkle)
     - Gradient glow #00c6ff → #0072ff
     - wb-pop / wb-slide reveal keyframes
     - Pulsing glow dot (wb-pulse)
   Non-blocking: splash is an overlay that removes itself.
   Never prevents page load — safe-timeout + reduced-motion + returning-user.
   ============================================================ */

:root{
  --hzp-splash-bg-0:#050816;
  --hzp-splash-bg-1:#0a0f2c;
  --hzp-splash-glow:#00c6ff;
  --hzp-splash-glow-2:#0072ff;
  --hzp-splash-accent-2:#7b5cff;
  --hzp-splash-text:#eaf2ff;
  --hzp-splash-text-dim:#9fb3d6;
}

/* ---------- Overlay container ---------- */
#howzitSplash{
  position:fixed;
  inset:0;
  z-index:2147483647;            /* always on top, above everything */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(123,92,255,.25), transparent 60%),
    radial-gradient(1000px 800px at 110% 20%, rgba(0,198,255,.18), transparent 55%),
    linear-gradient(160deg,var(--hzp-splash-bg-0),var(--hzp-splash-bg-1) 55%,#0e1538);
  overflow:hidden;
  opacity:1;
  transition:opacity .45s ease;
}
#howzitSplash.hzp-splash-hiding{opacity:0;pointer-events:none}
#howzitSplash.hzp-splash-hidden{display:none!important}

/* ---------- Twinkling starfield (reuse wb-twinkle) ---------- */
.hzp-splash-stars{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hzp-splash-stars span{
  position:absolute;border-radius:50%;background:#fff;
  animation:hzp-splash-twinkle 3s ease-in-out infinite alternate;
}
@keyframes hzp-splash-twinkle{from{opacity:.12}to{opacity:.75}}

/* ---------- Floating particles (reuse wb-float) ---------- */
.hzp-splash-particle{
  position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(1px);opacity:.45;
  animation:hzp-splash-float 14s linear infinite;
}
@keyframes hzp-splash-float{
  0%{transform:translateY(0) translateX(0)}
  100%{transform:translateY(-110vh) translateX(40px)}
}

/* ---------- Logo mark (mini robot-inspired antenna glow) ---------- */
.hzp-splash-logo{
  position:relative;width:64px;height:64px;margin-bottom:28px;
  animation:hzp-splash-float-bot 4s ease-in-out infinite;
}
@keyframes hzp-splash-float-bot{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.hzp-splash-logo::before{              /* antenna glow dot — reuse wb-pulse */
  content:'';position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--hzp-splash-glow);
  box-shadow:0 0 18px 5px var(--hzp-splash-glow);
  animation:hzp-splash-pulse 1.6s ease-in-out infinite;
}
@keyframes hzp-splash-pulse{
  0%,100%{transform:translateX(-50%) scale(1);opacity:1}
  50%{transform:translateX(-50%) scale(1.4);opacity:.6}
}

.hzp-splash-logo-ring{
  width:64px;height:64px;border-radius:50%;
  border:2.5px solid transparent;
  border-top-color:var(--hzp-splash-glow);
  border-right-color:var(--hzp-splash-glow-2);
  animation:hzp-splash-spin 1.1s linear infinite;
}
@keyframes hzp-splash-spin{to{transform:rotate(360deg)}}

/* ---------- HOWZIT wordmark — letter-by-letter reveal ---------- */
.hzp-splash-wordmark{
  font-family:'Onest',system-ui,-apple-system,sans-serif;
  font-size:clamp(2.2rem,8vw,5.2rem);
  font-weight:900;
  letter-spacing:.08em;
  line-height:1.05;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:baseline;
  gap:.02em;
  margin:0;
  max-width:92vw;
  text-align:center;
  white-space:nowrap;
}
/* Each WORD is an unbreakable unit: the browser may only wrap BETWEEN
   words, never in the middle of one. Letters inside a word stay inline so
   the letter-by-letter reveal animation is preserved. */
.hzp-splash-wordmark .hzp-word{
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
  /* A little breathing room between words (replaces the old space span). */
  margin-right:.28em;
}
.hzp-splash-wordmark .hzp-word:last-child{ margin-right:0; }
.hzp-splash-wordmark .hzp-letter{
  display:inline-block;
  background:linear-gradient(135deg,var(--hzp-splash-glow),var(--hzp-splash-glow-2));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  opacity:0;transform:translateY(24px) scale(.8);
  animation:hzp-splash-letter-in .42s cubic-bezier(.22,1,.36,1) forwards;
  filter:drop-shadow(0 0 18px rgba(0,198,255,.45));
}
/* The space between "Howzit" and "Portal" must keep its width so the
   FULL name is visibly displayed (a plain space collapses in flex). */
.hzp-splash-wordmark .hzp-letter-space{
  width:.35em;
  background:none;
  -webkit-text-fill-color:currentColor;
  filter:none;
}
@keyframes hzp-splash-letter-in{
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Long business/person names (wildcard splash) — shrink so they fit. */
.hzp-splash-wordmark.hzp-splash-wordmark-long{
  font-size:clamp(1.5rem,5.2vw,3.2rem);
  letter-spacing:.04em;
}
.hzp-splash-wordmark.hzp-splash-wordmark-xlong{
  font-size:clamp(1.1rem,3.8vw,2.3rem);
  letter-spacing:.02em;
  white-space:normal;
}

/* ---------- Tagline (wb-slide reveal) ---------- */
.hzp-splash-tagline{
  margin-top:18px;
  font-family:'Onest',system-ui,sans-serif;
  font-size:clamp(.78rem,3vw,1.1rem);
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--hzp-splash-text-dim);
  opacity:0;transform:translateY(16px);
  animation:hzp-splash-slide .5s ease .9s forwards;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:90vw;
}
@keyframes hzp-splash-slide{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

/* ---------- Loading bar with percentage counter ---------- */
.hzp-splash-progress-wrap{
  margin-top:26px;width:280px;max-width:80vw;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;animation:hzp-splash-pop .3s ease .3s forwards;
}
.hzp-splash-bar{
  width:100%;height:5px;border-radius:5px;
  background:rgba(255,255,255,.08);overflow:hidden;
  position:relative;
}
.hzp-splash-bar-fill{
  width:0;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--hzp-splash-glow),var(--hzp-splash-glow-2));
  box-shadow:0 0 12px var(--hzp-splash-glow);
  transition:width .12s linear;
  position:relative;
}
.hzp-splash-bar-fill::after{
  content:'';position:absolute;top:0;right:0;width:30px;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4));
  animation:hzp-splash-shimmer 1.2s ease-in-out infinite;
}
@keyframes hzp-splash-shimmer{
  0%{opacity:0}50%{opacity:1}100%{opacity:0}
}
.hzp-splash-percent{
  font-family:'Onest',system-ui,sans-serif;
  font-size:.95rem;font-weight:700;
  color:var(--hzp-splash-glow);
  letter-spacing:.05em;
  text-shadow:0 0 10px rgba(0,198,255,.5);
  min-width:48px;text-align:center;
}
@keyframes hzp-splash-pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

/* ---------- Reduced-motion: skip animations, show instantly ---------- */
@media (prefers-reduced-motion: reduce){
  #howzitSplash .hzp-splash-particle,
  #howzitSplash .hzp-splash-stars span,
  .hzp-splash-logo,
  .hzp-splash-logo::before,
  .hzp-splash-logo-ring{
    animation:none!important;
  }
  .hzp-splash-wordmark .hzp-letter,
  .hzp-splash-wordmark .hzp-letter-space{
    opacity:1;transform:none;animation:none;
  }
  .hzp-splash-tagline{opacity:1;transform:none;animation:none;}
  .hzp-splash-progress-wrap{opacity:1;animation:none;}
  .hzp-splash-bar-fill{width:100%;animation:none;transition:none;}
  .hzp-splash-bar-fill::after{display:none;}
}

/* ---------- Returning-user (shortened) — JS adds .hzp-returning ---------- */
#howzitSplash.hzp-returning .hzp-splash-logo,
#howzitSplash.hzp-returning .hzp-splash-logo::before,
#howzitSplash.hzp-returning .hzp-splash-logo-ring{
  animation-duration:.6s;
}
#howzitSplash.hzp-returning .hzp-splash-wordmark .hzp-letter{
  animation-duration:.22s;
}
#howzitSplash.hzp-returning .hzp-splash-tagline{
  animation-delay:.25s;animation-duration:.3s;
}
#howzitSplash.hzp-returning .hzp-splash-progress-wrap{display:none}