/* ============================================================
   SPLASH SCREEN — cinematic one-time boot overlay
   Shown once per browsing session, before Smart Analysis. Fully
   self-contained: a fixed full-viewport layer painted on top of
   everything, using only the existing Sudegy tokens (obsidian ink,
   gold bloom, breathing-glow timing) so it reads as the same
   instrument the rest of the app is built from. Fades out and is
   removed by features/splash/splash.js — this file owns none of
   that timing logic, only the look.
   ============================================================ */

#splash-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--obsidian);
  overflow: hidden;
  direction: rtl; text-align: center;
  opacity: 1;
  transition: opacity .6s var(--ease-out);
}
#splash-screen.splash-hide { opacity: 0; pointer-events: none; }

/* Full-screen hero background — the same doctor portrait used
   throughout the splash, filling the viewport (cover, fixed/centered,
   no stretching, no margins) as an ambient backdrop rather than a
   second unrelated image. Isolated on its own layer (not the ::before
   below) so it can be softened with a blur — the source photo is
   landscape, so on tall/narrow mobile viewports "cover" alone would
   crop into an extreme, unflattering close-up; blurring it turns that
   same crop into soft atmospheric light at any aspect ratio, which
   also further protects text legibility on top of it. */
.splash-bg {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: url("https://res.cloudinary.com/dd9m8ypgl/image/upload/v1783010059/ChatGPT_Image_May_16_2026_03_32_15_AM_kgvkoi.png");
  background-size: cover;
  background-position: 50% 20%;
  background-repeat: no-repeat;
  filter: blur(14px) brightness(.72) saturate(.92);
  transform: scale(1.12); /* hides the soft edge the blur would otherwise reveal at the viewport bounds */
}

/* Dark premium overlay (≈60% opacity) so text stays readable over the
   background photo, plus the same warm off-center ambient pools —
   layered together so the scrim and the glow read as one field. */
#splash-screen::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 38% at 30% 22%, var(--ambient-warm), transparent 68%),
    radial-gradient(52% 42% at 74% 82%, var(--ambient-deep), transparent 70%),
    rgba(21,19,15,.6);
}

/* Very subtle floating particles — pure CSS, GPU-friendly (transform + opacity only) */
.splash-particle {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(221,184,104,.55), rgba(221,184,104,0) 70%);
  animation: splashFloat 7s ease-in-out infinite;
}
.splash-particle:nth-child(1) { width: 4px;  height: 4px;  left: 18%; top: 24%; animation-delay: 0s;    }
.splash-particle:nth-child(2) { width: 3px;  height: 3px;  left: 78%; top: 20%; animation-delay: 1.1s;  }
.splash-particle:nth-child(3) { width: 5px;  height: 5px;  left: 68%; top: 66%; animation-delay: 2.2s;  }
.splash-particle:nth-child(4) { width: 3px;  height: 3px;  left: 12%; top: 70%; animation-delay: 3.1s;  }
.splash-particle:nth-child(5) { width: 4px;  height: 4px;  left: 88%; top: 46%; animation-delay: 0.6s;  }
.splash-particle:nth-child(6) { width: 3px;  height: 3px;  left: 45%; top: 12%; animation-delay: 1.8s;  }
@keyframes splashFloat {
  0%, 100% { transform: translateY(0);    opacity: .18; }
  50%      { transform: translateY(-14px); opacity: .45; }
}

.splash-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 360px; padding: 24px 28px;
}

/* ---------- Portrait + halo ----------
   Much smaller than before: the full-screen background above now
   already shows the doctor, so this is a small confirming avatar,
   not the focal image. */
.splash-portrait-wrap {
  position: relative;
  width: clamp(56px, 15vw, 84px); height: clamp(56px, 15vw, 84px);
  margin-bottom: 14px;
}
.splash-halo {
  position: absolute; inset: -30%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(221,184,104,.42) 0%, rgba(196,154,74,.16) 42%, transparent 72%);
  animation: splashHaloBloom var(--breath) ease-in-out infinite;
}
@keyframes splashHaloBloom {
  0%, 100% { opacity: .55; transform: scale(.92); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
.splash-portrait {
  position: relative; z-index: 1;
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; object-position: top center;
  box-shadow: var(--edge-light-strong), var(--glow-gold-xl), 0 0 0 1.5px rgba(221,184,104,.35);
  background: var(--ink-raised);
}

.splash-name {
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(16px, 4.4vw, 20px);
  letter-spacing: -0.005em;
  margin-bottom: 5px;
}
.splash-title {
  font-size: clamp(11.5px, 3.1vw, 13px);
  color: var(--mist); line-height: 1.5;
  margin-bottom: 18px;
}

.splash-logo {
  height: clamp(38px, 10vw, 52px); width: auto; max-width: 140px;
  border-radius: var(--radius-sm);
  box-shadow: var(--edge-light), 0 0 0 1px rgba(221,184,104,.20), 0 4px 16px rgba(8,7,5,.4);
  margin-bottom: 26px;
}

/* ---------- Messages ---------- */
.splash-welcome {
  font-size: clamp(14.5px, 4vw, 17px); font-weight: 700; color: var(--snow);
  line-height: 1.5; margin-bottom: 8px;
}
.splash-sub {
  font-size: clamp(12px, 3.3vw, 14px); color: var(--mist);
  line-height: 1.55; margin-bottom: 14px;
}
.splash-footnote {
  font-size: 10.5px; color: var(--mist-dim); opacity: .75;
  line-height: 1.5; margin-bottom: 22px;
}

/* ---------- Progress — a gold glowing line, never a spinner ---------- */
.splash-progress {
  width: min(58vw, 190px); height: 3px; border-radius: 999px;
  background: var(--hairline-strong); overflow: hidden;
}
.splash-progress-fill {
  height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow: 0 0 12px rgba(221,184,104,.55);
  transform-origin: right center; /* fills toward the left, matching the RTL reading flow */
  transform: scaleX(.02);
  /* Smooth ease-in-out climb to ~95%, reaching there at ~4s. It then
     holds at 95% (never 100%) until splash.js confirms real
     readiness — see .splash-progress-fill.splash-waiting/.splash-complete. */
  animation: splashProgress 4s var(--ease-glide) forwards;
}
@keyframes splashProgress {
  0%   { transform: scaleX(.02); }
  85%  { transform: scaleX(.95); }
  100% { transform: scaleX(.95); }
}
/* If the real asset load runs past the 4s animation, swap to a slow,
   gentle creep around 93–96% instead of sitting frozen — still
   reads as "working", never as stalled at 100%. */
.splash-progress-fill.splash-waiting {
  animation: splashProgressCreep 1.6s ease-in-out infinite;
}
@keyframes splashProgressCreep {
  0%, 100% { transform: scaleX(.93); }
  50%      { transform: scaleX(.96); }
}
/* Only reaches 100% once splash.js confirms the real load is done. */
.splash-progress-fill.splash-complete {
  animation: none;
  transform: scaleX(1);
  transition: transform .3s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  #splash-screen, .splash-particle, .splash-halo, .splash-progress-fill { animation: none !important; }
  .splash-particle { opacity: .25; }
  .splash-progress-fill { transform: scaleX(.95); }
  .splash-progress-fill.splash-complete { transform: scaleX(1); transition: none; }
  #splash-screen.splash-hide { transition-duration: .15s; }
}