/* Pulsetext splash overlay.
 *
 * Paints during HTML parse (linked from <head> in index.html, before
 * any JS evaluates) so the user sees the brand instantly rather than
 * a blank page during the React mount window.
 *
 * Stays up through the ENTIRE boot sequence, not just the React mount
 * window — HealthGate's /ready check, then (embed launches) the
 * Zoho SSO handshake, or (normal visits) the session check all run
 * behind this overlay. Each phase updates `.pulse-splash-sub` via
 * `setSplashStatus()` (lib/pwa-bootstrap.js) instead of the app
 * flashing its own plain spinner underneath. `markReactReady()` is
 * only called once the app has something real to show — see
 * `useRevealApp()` in the same file for the call sites.
 *
 * Inside Zoho the existing embed bootstrap already renders its own
 * spinner; index.html short-circuits the splash by adding the
 * `pulse-zoho` body class at parse time so this overlay never paints.
 */

#pulse-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483646; /* sit above every framework overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(10, 132, 255, 0.22) 0%, transparent 60%),
    radial-gradient(90% 70% at 85% 100%, rgba(56, 189, 248, 0.10) 0%, transparent 60%),
    linear-gradient(160deg, #0b1220 0%, #0a0f1a 55%, #060a12 100%);
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 320ms ease;
}

#pulse-splash .pulse-splash-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px;
  text-align: center;
}

/* Soft ambient halo breathing behind the mark — reads as "alive" during
 * a longer wait instead of a static logo just sitting there. */
#pulse-splash .pulse-splash-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(180px, 46vw, 260px);
  height: clamp(180px, 46vw, 260px);
  transform: translate(-50%, -62%);
  background: radial-gradient(circle, rgba(10, 132, 255, 0.35) 0%, transparent 70%);
  filter: blur(6px);
  animation: pulse-splash-breathe 2600ms ease-in-out infinite;
  pointer-events: none;
}

#pulse-splash .pulse-splash-icon {
  position: relative;
  width: clamp(92px, 26vw, 132px);
  height: clamp(92px, 26vw, 132px);
  border-radius: 27%;
  background: linear-gradient(135deg, #0a84ff 0%, #2563eb 55%, #0369a1 100%);
  display: grid;
  place-items: center;
  box-shadow:
    0 24px 60px -16px rgba(10, 132, 255, 0.55),
    0 8px 24px -8px rgba(3, 105, 161, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: pulse-splash-pop 640ms cubic-bezier(0.2, 0.85, 0.3, 1.1) both;
}

#pulse-splash .pulse-splash-icon svg {
  width: 56%;
  height: 56%;
  color: #ffffff;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}

#pulse-splash .pulse-splash-title {
  font-size: clamp(21px, 5.2vw, 29px);
  font-weight: 650;
  letter-spacing: -0.015em;
  background: linear-gradient(90deg, #ffffff 0%, #cfe6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#pulse-splash .pulse-splash-sub {
  min-height: 16px;
  font-size: 13px;
  color: rgba(226, 238, 255, 0.6);
  letter-spacing: 0.015em;
  transition: opacity 180ms ease;
}

/* Slim indeterminate progress rail instead of a spinner — reads as
 * "working through steps" rather than "stuck", which fits better now
 * that this screen covers multi-second auth/health work, not just a
 * React-mount flash. */
#pulse-splash .pulse-splash-progress {
  width: clamp(120px, 34vw, 180px);
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-top: 4px;
}
#pulse-splash .pulse-splash-progress::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0a84ff 0%, #7cc4ff 100%);
  animation: pulse-splash-progress 1300ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes pulse-splash-progress {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

@keyframes pulse-splash-breathe {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -62%) scale(0.92); }
  50%      { opacity: 1;    transform: translate(-50%, -62%) scale(1.06); }
}

@keyframes pulse-splash-pop {
  from { transform: scale(0.86); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

body.pulse-ready #pulse-splash {
  opacity: 0;
  pointer-events: none;
}

body.pulse-faded #pulse-splash {
  display: none;
}

/* Zoho-context: hide the splash before paint. The inline boot script
 * in <head> stamps `<html data-pulse-zoho="1">` when running inside
 * *.zappsusercontent.com or any cross-origin iframe. */
html[data-pulse-zoho] #pulse-splash {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #pulse-splash .pulse-splash-icon { animation: none; }
  #pulse-splash .pulse-splash-glow { animation: none; opacity: 0.6; }
  #pulse-splash .pulse-splash-progress::after { animation-duration: 2600ms; }
  #pulse-splash { transition: opacity 60ms linear; }
}