/* =============================================================
   AGNI CRM — LOADING SCREEN
   Full-screen splash with the Agni flame animation.
   ============================================================= */

/* ── Container ──────────────────────────────────────────────── */
.loading-screen {
  position: fixed;
  inset: 0;
  background: var(--light-bg, #f2f2f7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 9999;
  transition: opacity 0.45s ease, visibility 0.45s ease;
  overflow: hidden;
  gap: 0.7rem;
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Wordmark ───────────────────────────────────────────────── */
.loading-logo {
  font-family: 'Pacifico', cursive;
  font-size: clamp(1.95rem, 2.9vw, 2.45rem);
  color: #ff8d2a;
  letter-spacing: 0.02em;
  margin: 0;
  z-index: 1;
}

/* ── Flame Animation ────────────────────────────────────────── */
.loader {
  width: 78px;
  height: 102px;
  position: relative;
  display: block;
  margin: 0 auto;
  isolation: isolate;
  animation: flameLift 1.7s ease-in-out infinite;
}

.loader::before,
.loader::after {
  content: '';
  position: absolute;
  left: 50%;
  transform-origin: 50% 100%;
}

.loader::before {
  width: 78px;
  height: 102px;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 52% 52% 44% 44% / 64% 64% 36% 36%;
  background: linear-gradient(
    180deg,
    #ffe0b2 0%,
    #ffc067 34%,
    #ff8c2d 68%,
    #dd4d0f 100%
  );
  clip-path: polygon(
    50% 0%, 66% 13%, 79% 31%, 82% 51%, 72% 71%,
    50% 100%, 28% 71%, 18% 51%, 21% 31%, 34% 13%
  );
  animation: flameSway 1.15s ease-in-out infinite;
}

.loader::after {
  width: 44px;
  height: 64px;
  bottom: 12px;
  transform: translateX(-50%);
  border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%;
  background: linear-gradient(
    180deg,
    rgba(255, 250, 227, 0.98) 0%,
    rgba(255, 216, 137, 0.96) 52%,
    rgba(255, 152, 72, 0.8) 100%
  );
  clip-path: polygon(
    50% 0%, 65% 18%, 72% 39%, 66% 63%,
    50% 100%, 34% 63%, 28% 39%, 35% 18%
  );
  animation: corePulse 0.92s ease-in-out infinite alternate;
  z-index: 1;
}

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes flameSway {
  0%   { transform: translateX(-50%) rotate(-2.8deg) scaleY(0.975); }
  50%  { transform: translateX(-50%) rotate(2.8deg)  scaleY(1.035); }
  100% { transform: translateX(-50%) rotate(-2.8deg) scaleY(0.975); }
}

@keyframes corePulse {
  0%   { transform: translateX(-50%) translateY(2px)  scale(0.94); opacity: 0.9; }
  100% { transform: translateX(-50%) translateY(-3px) scale(1.05); opacity: 1;   }
}

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