/* ─────────────────────────────────────────────────────────────────────────
 * Initial splash — minimal fade-in + size breathe.
 *
 * Replaces the old bare "Loading…" text. Two states:
 *   .fi-splash                — idle: logo fades in then breathes (scale
 *                                 oscillation only — no rotation, no glow,
 *                                 no halo, no drop-shadow pulse)
 *   .fi-splash.fi-splash--out — dismissal: simple opacity fade out
 *
 * Karol B5 rev2: stripped glow / lightning / glass-shatter — keep it clean.
 * Honours prefers-reduced-motion.
 * ───────────────────────────────────────────────────────────────────── */

.fi-splash {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  /* Karol B5 rev3: match the main-page background texture (.app-shell::before
     in bg-paths.css) so the load → mount transition does not flash to a
     different surface. Base dark + 2 accent-tinted corner glows + diagonal
     hatch tile. */
  background-color: #0b1118;
  background-image:
    radial-gradient(55% 45% at 12% -5%,   rgba(0, 229, 160, 0.055) 0%, transparent 60%),
    radial-gradient(50% 45% at 105% 108%, rgba(0, 229, 160, 0.045) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M-1 21 L21 -1 M9 41 L41 9' stroke='%23ffffff' stroke-opacity='0.018' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 40px 40px;
  transition: opacity 320ms ease-out;
  opacity: 1;
  will-change: opacity;
}

.fi-splash__logo {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Intro: fade-in + small scale-up settle (one-shot, 520ms).
     Then idle: subtle size breathe (infinite, 3.2s). */
  animation:
    fi-splash-in 520ms cubic-bezier(.32, 0, .24, 1) both,
    fi-splash-breathe 3200ms ease-in-out 520ms infinite;
  will-change: transform, opacity;
}

.fi-splash__logo img {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes fi-splash-in {
  0%   { opacity: 0; transform: scale(0.86); }
  100% { opacity: 1; transform: scale(1.00); }
}

@keyframes fi-splash-breathe {
  0%, 100% { transform: scale(1.00); }
  50%      { transform: scale(1.06); }
}

.fi-splash__label {
  font-size: 11px;
  letter-spacing: 0.32em;
  color: #5a7a8c;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0;
  animation: fi-splash-label-in 600ms cubic-bezier(.32, 0, .24, 1) 180ms forwards;
}

@keyframes fi-splash-label-in {
  0%   { opacity: 0; transform: translateY(4px); }
  100% { opacity: 0.7; transform: translateY(0); }
}


/* ── Dismissal — plain opacity fade ─────────────────────────────────── */

.fi-splash.fi-splash--out {
  opacity: 0;
  pointer-events: none;
}


/* Reduced-motion: instant fade only. */
@media (prefers-reduced-motion: reduce) {
  .fi-splash__logo,
  .fi-splash__label {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .fi-splash {
    transition: opacity 120ms linear;
  }
  .fi-splash.fi-splash--out {
    opacity: 0;
  }
}