/* Net Advice loading screen (lumev2 FP-367, FP-368, FP-371; NA-004)
   The container is a .brand-skin (media/brand/brand-skin.css): the theme chosen
   in System Settings → Appearance paints the base, layers and image, and its
   background (vector effect or video) sits behind the logo. The product logo
   is always Net Advice's own lockup (the glowing symbol plus the wordmark
   artwork, from the netadvice registry identity); a theme lends only its look.
   Glow, a subtle pulse and a light sweep across the symbol; an indeterminate
   progress bar; no spinner. Light mode (the app's theme switch)
   uses the theme's light variant. */

html {
  font-size: 13px;
  font-weight: 400;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.page-loading {
  margin: 0;
  height: 100%;
  overflow: hidden;
  transition: none !important;
}

/* ------------------------------------------------------------------
   Splash screen container
   - Always in the DOM but hidden via opacity/visibility so removing
     the `page-loading` body class fades it out smoothly (no hard cut).
   - `position: fixed` + `inset: 0` avoids scroll-offset glitches.
------------------------------------------------------------------ */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-body, "Inter"), "Segoe UI", Arial, sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

.page-loading .splash-screen {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* The moving layer fades away behind the logo */
.splash-screen > .brand-fx {
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, transparent 22%, #000 72%);
  mask-image: radial-gradient(70% 60% at 50% 50%, transparent 22%, #000 72%);
  animation-duration: 40s;
}

/* Content stack — logo and text never overflow */
.splash-screen .splash-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90vw;
}

/* Logo + soft halo behind the symbol that breathes with the pulse */
.splash-logo-wrap {
  position: relative;
  color: var(--text);
  animation: splash-pulse 2.4s ease-in-out infinite;
}

.splash-logo-wrap::before {
  content: "";
  position: absolute;
  left: -6%;
  top: 50%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--logo-glow2) 0%, transparent 68%);
  transform: translateY(-50%);
  filter: blur(6px);
  pointer-events: none;
  animation: splash-halo 2.4s ease-in-out infinite;
}

/* Inline SVG lockup (kept for themes that ship one) */
.splash-logo {
  position: relative;
  display: block;
  width: clamp(14rem, 62vw, 27rem);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 0.9rem var(--logo-glow1)) drop-shadow(0 0 2.2rem var(--logo-glow2));
}

/* Other themes: symbol + wordmark (artwork or the name in the logo font) */
.splash-lockup {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.splash-symbol,
.splash-full-logo {
  display: block;
  width: auto;
  filter: drop-shadow(0 0 0.9rem var(--logo-glow1)) drop-shadow(0 0 2.2rem var(--logo-glow2));
}

.splash-symbol {
  height: clamp(3.4rem, 9vw, 4.6rem);
}

.splash-full-logo {
  height: clamp(4.6rem, 14vw, 7.4rem);
  max-width: 80vw;
  object-fit: contain;
}

.splash-wordmark {
  /* outlined artwork with viewBox padding: sized as placehold .brand__wordmark */
  height: clamp(3.4rem, 9vw, 4.8rem);
  width: auto;
}

.splash-name {
  font-family: var(--font-logo, "Sora"), "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  text-shadow: var(--name-shadow);
}

/* Indeterminate progress bar (FP-371): the theme's accent gradient, the Net Advice
   lime → mint → cyan gradient when the theme has none */
.splash-screen .progress-track {
  width: min(60vw, 14rem);
  height: 0.25rem;
  margin-top: 1.75rem;
  border-radius: 0.5rem;
  background-color: color-mix(in srgb, var(--accent, #1f9d63) 18%, transparent);
  overflow: hidden;
}

.splash-screen .progress-bar {
  width: 40%;
  height: 100%;
  border-radius: 0.5rem;
  background: var(--accent-grad, linear-gradient(90deg, #1f9d63, #01b8e9));
  animation: progress-sweep 1.2s ease-in-out infinite;
}

.splash-screen .loading-text {
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: 1.075rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  animation: splash-text 2.4s ease-in-out infinite;
}

/* Animated ellipsis on "Loading" */
.splash-screen .loading-text::after {
  content: "";
  display: inline-block;
  width: 1.25rem;
  text-align: left;
  animation: loading-dots 1.4s linear infinite;
}

@keyframes splash-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025);
  }
}

@keyframes splash-halo {
  0%,
  100% {
    opacity: 0.55;
    transform: translateY(-50%) scale(0.92);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.08);
  }
}

@keyframes splash-text {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

@keyframes progress-sweep {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(280%);
  }
}

@keyframes loading-dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
  100% {
    content: "";
  }
}

/* Respect users who prefer reduced motion: still logo, no sweep, no drift */
@media (prefers-reduced-motion: reduce) {
  .splash-logo-wrap,
  .splash-logo-wrap::before,
  .splash-screen .progress-bar,
  .splash-screen .loading-text,
  .splash-screen .loading-text::after {
    animation: none;
  }

  .splash-logo .splash-shine {
    display: none;
  }

  .splash-screen {
    transition: none;
  }
}