/* Smoke-cloud intro (SPLASH=smoke) and the matching dark sign-in theme.
   Timeline: figure rises (0–0.5s) → puffs leave the mouth (0.55–1.7s) → big cloud swells
   to fill the screen with the site name (1.4–2.4s) → cloud drifts apart and the sign-in
   page appears (2.6–3.8s). */

/* ---- Sign-in page theme ------------------------------------------------- */
body.theme-smoke {
  --bg: #140c26;
  --surface: #1d1433;
  --text: #f3eefe;
  --muted: #b9acd6;
  --border: #3b2c5c;
  --primary: #8b5cf6;
  --primary-hover: #7c3aed;
  background: radial-gradient(circle at 50% 25%, #3a2167 0%, #140c26 70%) fixed;
  color: var(--text);
}
.theme-smoke .auth-card {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.theme-smoke a { color: #c4b1ff; }

/* ---- Overlay ------------------------------------------------------------- */
.smoke-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
}
.splash-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, #3a2167 0%, #140c26 75%);
  animation: splash-bg-out 0.9s ease 2.8s forwards;
}

/* ---- Character ----------------------------------------------------------- */
.splash-figure {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(78vw, 46vh);
  transform: translateX(-50%);
  overflow: visible;
  animation: figure-in 0.5s ease-out both, figure-out 0.5s ease-in 2.3s forwards;
}

.puff {
  fill: #f3eefe;
  stroke: #2a1845;
  stroke-width: 5;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.p1 { animation: puff-1 1.1s ease-out 0.55s forwards; }
.p2 { animation: puff-2 1.1s ease-out 0.70s forwards; }
.p3 { animation: puff-3 1.1s ease-out 0.85s forwards; }
.p4 { animation: puff-4 1.1s ease-out 1.00s forwards; }
.p5 { animation: puff-5 1.1s ease-out 1.15s forwards; }
.p6 { animation: puff-6 1.1s ease-out 1.30s forwards; }

/* ---- Big cloud ----------------------------------------------------------- */
.splash-cloud {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 51% 78%;
  transform: scale(0.04);
  opacity: 0;
  animation: cloud-grow 1s cubic-bezier(0.2, 0.8, 0.2, 1) 1.4s forwards,
             cloud-vanish 1.2s ease-in 2.6s forwards;
}
.cloud-outline { fill: #2a1845; stroke: #2a1845; stroke-width: 28; }
.cloud-fill { fill: #f3eefe; }
.cloud-text {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(90vw, 1000px);
  transform: translate(-50%, -50%);
  text-align: center;
  font: 900 clamp(2.2rem, 9vw, 5.5rem)/1.05 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #2a1845;
  overflow-wrap: anywhere;
  opacity: 0;
  animation: text-in 0.4s ease-out 2s forwards, text-out 1.2s ease-in 2.6s forwards;
}

.splash-skip-hint {
  position: absolute;
  right: 16px;
  bottom: 12px;
  margin: 0;
  font-size: 0.8rem;
  color: rgba(243, 238, 254, 0.6);
  animation: figure-out 0.3s ease 2.3s forwards;
}

/* Skipping (click / key) fades everything out quickly. */
.smoke-splash.splash-skip,
.smoke-splash.splash-skip * {
  animation: none !important;
}
.smoke-splash.splash-skip {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Once the cloud is mostly gone, let clicks reach the form. */
.smoke-splash.splash-ending { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .smoke-splash { display: none; }
}

/* ---- Keyframes ----------------------------------------------------------- */
@keyframes figure-in {
  from { opacity: 0; transform: translate(-50%, 40px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes figure-out { to { opacity: 0; } }
@keyframes splash-bg-out { to { opacity: 0; } }
@keyframes text-in { to { opacity: 1; } }
@keyframes text-out {
  from { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; filter: blur(10px); transform: translate(-50%, -50%) scale(1.3); }
}

@keyframes cloud-grow {
  0%   { opacity: 1; transform: scale(0.04); }
  70%  { transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1.12); }
}
@keyframes cloud-vanish {
  0%   { opacity: 1; transform: scale(1.12); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.7); filter: blur(14px); }
}

@keyframes puff-1 { 0% { opacity: 1; transform: translate(0, 0) scale(0.3); } 100% { opacity: 1; transform: translate(45px, -70px) scale(1.8); } }
@keyframes puff-2 { 0% { opacity: 1; transform: translate(0, 0) scale(0.3); } 100% { opacity: 1; transform: translate(95px, -45px) scale(2.4); } }
@keyframes puff-3 { 0% { opacity: 1; transform: translate(0, 0) scale(0.3); } 100% { opacity: 1; transform: translate(15px, -150px) scale(3); } }
@keyframes puff-4 { 0% { opacity: 1; transform: translate(0, 0) scale(0.3); } 100% { opacity: 1; transform: translate(135px, -125px) scale(3.6); } }
@keyframes puff-5 { 0% { opacity: 1; transform: translate(0, 0) scale(0.3); } 100% { opacity: 1; transform: translate(60px, -235px) scale(4.2); } }
@keyframes puff-6 { 0% { opacity: 1; transform: translate(0, 0) scale(0.3); } 100% { opacity: 1; transform: translate(175px, -215px) scale(4.8); } }