/* =============================================
   LAMIM — SPLASH SCREEN
   Theme-aware premium reveal: logo, wordmark, loader.
   Background + brand colors follow the app theme and
   match the manifest so there is no color flash.
   All animations complete before the splash hides
   (800ms) so nothing animates unseen.
   ============================================= */

/* === THEME-AWARE BRAND TOKENS (dark = default, mirrors :root) === */
.splash {
  --splash-bg:            var(--color-bg-primary);
  --splash-halo-color:    rgba(139, 92, 246, 0.16);
  --splash-box-bg:        rgba(255, 255, 255, 0.05);
  --splash-box-border:    rgba(255, 255, 255, 0.12);
  --splash-box-shadow:    0 16px 40px rgba(0, 0, 0, 0.30),
                          0 4px 12px rgba(0, 0, 0, 0.16),
                          inset 0 2px 0 rgba(255, 255, 255, 0.08);
  --splash-wordmark-grad: linear-gradient(135deg, #c084fc 0%, #38bdf8 55%, #f472b6 100%);
  --splash-loader-track:  rgba(255, 255, 255, 0.14);
  --splash-loader-fill:   linear-gradient(90deg, #a855f7 0%, #3b82f6 100%);
}

[data-theme="light"] .splash {
  --splash-halo-color:    rgba(168, 85, 247, 0.12);
  --splash-box-bg:        #ffffff;
  --splash-box-border:    rgba(255, 255, 255, 0.95);
  --splash-box-shadow:    0 16px 40px rgba(99, 102, 241, 0.10),
                          0 4px 12px rgba(0, 0, 0, 0.03),
                          inset 0 2px 0 rgba(255, 255, 255, 1);
  --splash-wordmark-grad: linear-gradient(135deg, #a855f7 0%, #3b82f6 60%, #ec4899 100%);
  --splash-loader-track:  rgba(99, 102, 241, 0.10);
  --splash-loader-fill:   linear-gradient(90deg, #a855f7 0%, #3b82f6 100%);
}

/* === BASE CONTAINER === */
.splash {
  position: fixed;
  inset: 0;
  z-index: var(--z-splash, 99999);
  background: var(--splash-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  will-change: opacity, transform;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.3s ease;
}

.splash.hidden {
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none;
}

/* === LUXURY HALO (Subtle brand glow) === */
.splash-halo {
  position: absolute;
  width: 50vw;
  height: 50vw;
  max-width: 500px;
  max-height: 500px;
  background: radial-gradient(circle, var(--splash-halo-color) 0%, transparent 65%);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.95);
  animation: haloReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: opacity, transform;
  pointer-events: none;
}

@keyframes haloReveal {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 0.6; transform: scale(1); }
}

/* === MAIN CONTENT === */
.splash-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* === BRAND WRAP (Layout for logo + text) === */
.splash-brand-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* === LOGO (Clean Scale Reveal — no blur filter) === */
.splash-logo-box {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--splash-box-bg);
  border: 1px solid var(--splash-box-border);
  border-radius: 24px;
  box-shadow: var(--splash-box-shadow);
  opacity: 0;
  transform: scale(0.92) translateY(8px);
  animation: logoBoxReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
  will-change: opacity, transform;
}

.splash-logo-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

@keyframes logoBoxReveal {
  0% { opacity: 0; transform: scale(0.92) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* === WORDMARK (GSAP-style Mask Reveal) === */
.splash-text-mask {
  overflow: hidden;
  padding-bottom: 6px; /* Space for descenders */
  padding-top: 4px;
}

.splash-wordmark {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-style: italic;
  font-size: 46px;
  font-weight: 700;

  /* Premium brand gradient text — matches the app's auth wordmark palette */
  background: var(--splash-wordmark-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  letter-spacing: -0.04em;
  margin: 0;
  line-height: 1;
  transform: translateY(110%);
  opacity: 0;
  animation: textMaskReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
}

@keyframes textMaskReveal {
  0% { transform: translateY(110%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* The signature green dot — brand identity, kept consistent with the app */
.splash-wordmark .i-green-dot,
.splash-wordmark .i-dot {
  position: relative;
  display: inline-block;
  font-family: inherit;
  letter-spacing: 0 !important;
}

.splash-wordmark .i-green-dot::after,
.splash-wordmark .i-dot::after {
  content: "";
  position: absolute;
  top: 0.05em;
  left: 50%;
  transform: translateX(-50%);
  width: 0.2em;
  height: 0.2em;
  background-color: #97D84C;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(151, 216, 76, 0.8);
  animation: dotPulse 0.3s ease-out 0.45s both;
  pointer-events: none;
}

@keyframes dotPulse {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0.85; }
}

/* === MINIMALIST LOADER === */
.splash-loader-track {
  width: 160px;
  height: 3px;
  position: relative;
  background: var(--splash-loader-track);
  border-radius: 4px;
  overflow: hidden;
}

.splash-loader-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--splash-loader-fill);
  border-radius: 4px;
  animation: loaderProgress 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.15s forwards;
}

@keyframes loaderProgress {
  0% { width: 0%; }
  50% { width: 65%; }
  100% { width: 100%; }
}