/* ═══════════════════════════════════════════════════════════════════════════
   Cloudzy boot splash — static, JS-free, CSP-safe.

   Loaded via <link> in index.html and styling the #boot-splash markup that
   ships inline in index.html BEFORE the React bundle: it covers bundle
   download + the loadPublicConfig() fetch, which used to be a blank page.
   src/components/BootSplash.tsx then drives the same node's exit once the
   app is mounted and the auth boot probe has settled.

   Rules this file must obey:
   - No JS, no inline handlers — global CSP is script-src 'self' (a <link>
     stylesheet is fine: style-src 'self' 'unsafe-inline').
   - Self-contained: it must render correctly BEFORE the bundle (and thus
     before index.css / Tailwind / @font-face arrive). Do not reference
     Tailwind utilities or assume Geist is registered — use fallbacks.
   - Scoped: every selector starts with .cz-splash so the post-mount app
     can never collide with it.
   - Always-LTR, always-dark navy (user decision 2026-10-22: the splash is
     LTR/English-only regardless of locale; brand navy matches --cz-navy).
   ═══════════════════════════════════════════════════════════════════════════ */

.cz-splash {
  position: fixed;
  inset: 0;
  z-index: 100; /* above the z-[60] PageLoader bar and app chrome */
  display: grid;
  place-items: center;
  /* Matches --cz-navy (#040b1a) from index.css but hardcoded: this file
     paints before the design tokens exist. */
  background: #040b1a;
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

/* Exit class added by BootSplash.tsx when the app is ready underneath. */
.cz-splash--exit {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

/* ── Ambient background ──────────────────────────────────────────────────── */

.cz-splash__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform, opacity;
  animation: cz-breathe 7s ease-in-out infinite;
}
.cz-splash__blob--a {
  width: 56vmax;
  height: 56vmax;
  top: -24vmax;
  right: -18vmax;
  background: radial-gradient(closest-side, rgba(0, 74, 255, 0.5), transparent 70%);
}
.cz-splash__blob--b {
  width: 48vmax;
  height: 48vmax;
  bottom: -20vmax;
  left: -14vmax;
  background: radial-gradient(closest-side, rgba(5, 242, 255, 0.22), transparent 70%);
  animation-delay: -3.5s;
}
@keyframes cz-breathe {
  0%, 100% { transform: scale(1); opacity: 0.45; }
  50%      { transform: scale(1.12); opacity: 0.65; }
}

/* Vignette to focus the center. */
.cz-splash::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(0, 0, 0, 0.55));
}

/* Rising particles — static <i> elements varied by nth-child (no JS
   available to randomize). 10 children ship in index.html. */
.cz-splash__particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.cz-splash__particles i {
  position: absolute;
  bottom: -3vh;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
  animation: cz-rise 12s linear infinite;
}
.cz-splash__particles i:nth-child(5n + 1) { left: 6%;  animation-delay: -1s;  animation-duration: 11s; background: #05f2ff; }
.cz-splash__particles i:nth-child(5n + 2) { left: 24%; animation-delay: -6s;  animation-duration: 14s; background: #4d8dff; }
.cz-splash__particles i:nth-child(5n + 3) { left: 47%; animation-delay: -3s;  animation-duration: 12s; background: #05f2ff; }
.cz-splash__particles i:nth-child(5n + 4) { left: 68%; animation-delay: -9s;  animation-duration: 15s; background: #4d8dff; }
.cz-splash__particles i:nth-child(5n + 5) { left: 88%; animation-delay: -12s; animation-duration: 10s; background: #05f2ff; }
.cz-splash__particles i:nth-child(2n) { transform: scale(0.7); }
.cz-splash__particles i:nth-child(3n) { animation-duration: 16s; }
.cz-splash__particles i:nth-child(4n + 1) { opacity: 0; }
@keyframes cz-rise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  8%   { opacity: 0.35; }
  55%  { transform: translate(24px, -55vh) scale(1); }
  92%  { opacity: 0.3; }
  100% { transform: translate(-10px, -105vh) scale(0.8); opacity: 0; }
}

/* ── Center stack ────────────────────────────────────────────────────────── */

.cz-splash__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 3.2vh, 28px);
  padding: 24px;
}

/* Cloud mark */
.cz-splash__mark {
  position: relative;
  width: clamp(140px, 24vw, 220px);
}
.cz-splash__mark-glow {
  position: absolute;
  inset: -22%;
  background: radial-gradient(closest-side, rgba(5, 242, 255, 0.2), rgba(0, 74, 255, 0.1) 55%, transparent 72%);
  filter: blur(12px);
  animation:
    cz-fade-in 0.9s ease 0.3s both,
    cz-breathe 5s ease-in-out 1.2s infinite;
}
.cz-splash__mark-in {
  animation: cz-mark-in 0.55s cubic-bezier(0.18, 0.89, 0.32, 1.18) 0.08s both;
}
.cz-splash__mark-float {
  animation: cz-float 4.5s ease-in-out 1.2s infinite;
}
.cz-splash__mark img {
  display: block;
  width: 100%;
  height: auto;
  animation: cz-surge 7s ease-in-out 1.6s infinite;
}
@keyframes cz-mark-in {
  from { opacity: 0; transform: scale(0.72) translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cz-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
/* Quiet glow with a periodic "energy surge" through the bolt. */
@keyframes cz-surge {
  0%, 86%, 94%, 100% {
    filter: drop-shadow(0 10px 34px rgba(5, 242, 255, 0.18)) drop-shadow(0 0 22px rgba(0, 74, 255, 0.22));
  }
  90% {
    filter: drop-shadow(0 0 44px rgba(5, 242, 255, 0.65)) drop-shadow(0 0 60px rgba(0, 74, 255, 0.45)) brightness(1.5);
  }
}

/* Wordmark */
.cz-splash__wordmark {
  width: clamp(160px, 28vw, 230px);
  clip-path: inset(-15% 102% -15% -2%);
  animation: cz-wipe 0.6s cubic-bezier(0.7, 0, 0.3, 1) 0.32s both;
}
.cz-splash__wordmark img {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes cz-wipe {
  to { clip-path: inset(-15% 0% -15% -2%); }
}

/* Tagline — brand copy, like the hardcoded <title>/meta text in index.html
   (pre-i18n by design; the splash is English-only per the 2026-10-22
   decision). Geist applies once the bundle registers it; the fallback
   stack covers the pre-bundle window. */
.cz-splash__tagline {
  font-family: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(10px, 1.5vw, 12px);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-indent: 0.34em; /* optically balance the tracking */
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(90deg, #9fe9ff, #6f9dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cz-fade-up 0.5s ease 0.6s both;
}

/* Indeterminate progress — boot duration is unknowable (bundle + config
   fetch + session probe), so an honest sweeping bar instead of a fake
   percentage. */
.cz-splash__load {
  width: min(320px, 68vw);
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  animation: cz-fade-up 0.5s ease 0.72s both;
}
.cz-splash__load::before {
  content: "";
  display: block;
  height: 100%;
  width: 38%;
  border-radius: inherit;
  background: linear-gradient(90deg, #05f2ff, #2f7dff 60%, #004aff);
  animation: cz-sweep 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes cz-sweep {
  from { transform: translateX(-110%); }
  to   { transform: translateX(370%); }
}

@keyframes cz-fade-in {
  from { opacity: 0; }
}
@keyframes cz-fade-up {
  from { opacity: 0; transform: translateY(8px); }
}

/* ── Reduced motion: keep the screen static, drop all loops ──────────────── */

@media (prefers-reduced-motion: reduce) {
  .cz-splash,
  .cz-splash--exit {
    transition-duration: 0.15s;
  }
  .cz-splash__blob,
  .cz-splash__particles,
  .cz-splash__mark-glow,
  .cz-splash__mark-float,
  .cz-splash__mark img,
  .cz-splash__load::before {
    animation: none !important;
  }
  .cz-splash__particles {
    display: none;
  }
  .cz-splash__mark-in,
  .cz-splash__wordmark,
  .cz-splash__tagline,
  .cz-splash__load {
    animation-duration: 0.01s !important;
    animation-delay: 0s !important;
  }
  .cz-splash__wordmark {
    clip-path: inset(-15% 0% -15% -2%);
  }
}