/* ── Loading Screen — Jinx style ── */

.status-loading {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 28px;
  background-image: linear-gradient(90deg, #1a1a1a 0%, #333333 100%);
  opacity: 1;
  animation: loaderFadeIn 0.4s ease both;
  transition: opacity 0.5s ease;
  pointer-events: all;
}

#app.loaded .status-loading { opacity: 0; pointer-events: none; }

/* ── Coffee cup ── */
.status-loading .loader {
  position: relative;
  width: 60px; height: 88px;
  animation: cupBob 2s ease-in-out infinite;
}

/* Cup body */
.status-loading .loader::before {
  content: '';
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  width: 54px; height: 50px;
  background: #626262;
  border-radius: 4px 4px 12px 12px;
  box-shadow:
    inset 0 3px 8px rgba(255,255,255,0.1),
    inset 0 -3px 8px rgba(0,0,0,0.3),
    0 4px 16px rgba(0,0,0,0.5);
}

/* Saucer */
.status-loading .loader::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 66px; height: 14px;
  background: #555;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Steam */
.steam {
  position: absolute;
  bottom: 66px;
  width: 3px;
  background: linear-gradient(to top, rgba(255,255,255,0.5), transparent);
  border-radius: 2px;
  animation: steamRise 1.8s ease-in-out infinite;
}

.steam:nth-child(1) { left: 16px; height: 16px; animation-delay: 0s; }
.steam:nth-child(2) { left: 27px; height: 22px; animation-delay: 0.3s; }
.steam:nth-child(3) { left: 38px; height: 14px; animation-delay: 0.6s; }

/* Text */
.status-loading > p {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-fa, 'Farang', sans-serif);
  font-size: clamp(0.85rem, 2.5vw, 0.95rem);
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  position: relative;
}

.status-loading > p::after {
  content: '⬤ ⬤ ⬤';
  display: block; margin-top: 8px;
  font-size: 0.3rem; letter-spacing: 5px;
  color: #a60b0b;
  animation: dotsPulse 1.4s ease-in-out infinite;
}

@keyframes loaderFadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes cupBob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes steamRise {
  0%   { opacity: 0; transform: translateY(0) scaleX(1); }
  30%  { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-18px) scaleX(1.4); }
}

@keyframes dotsPulse {
  0%, 80%, 100% { opacity: 0.25; }
  40%            { opacity: 1; }
}