/* ═══════ Kirish animatsiyalari — Navoiy AI ═══════ */

/* ---------- UMUMIY OVERLAY ---------- */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: radial-gradient(circle at center, #14100a 0%, #060504 75%);
  transition: opacity 0.9s ease, visibility 0.9s ease;
}
.intro-overlay.intro-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════
   1) F5 / SAHIFA YUKLANGANDA — KITOB OCHILISHI
   ═══════════════════════════════════════════════════════ */
.book-scene {
  perspective: 1400px;
  width: 220px;
  height: 160px;
  position: relative;
}
.book-glow {
  position: absolute;
  inset: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.55) 0%, rgba(212,175,55,0) 70%);
  opacity: 0;
  animation: bookGlow 2.6s ease-in-out forwards;
}
.book-spine {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 100%;
  margin-left: -3px;
  background: linear-gradient(#8a6a1f, #d4af37, #8a6a1f);
  border-radius: 3px;
  box-shadow: 0 0 18px rgba(212,175,55,0.6);
}
.book-cover {
  position: absolute;
  top: 0;
  width: 110px;
  height: 160px;
  background: linear-gradient(135deg, #1c130a, #2c1d0e);
  border: 2px solid #d4af37;
  box-shadow: inset 0 0 20px rgba(212,175,55,0.25);
  border-radius: 2px 10px 10px 2px;
}
.book-cover::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(212,175,55,0.5);
  border-radius: 2px 8px 8px 2px;
}
.book-cover-left {
  left: 50%;
  transform-origin: right center;
  animation: openLeft 2.6s ease-in-out forwards;
}
.book-cover-right {
  right: 50%;
  transform-origin: left center;
  border-radius: 10px 2px 2px 10px;
  animation: openRight 2.6s ease-in-out forwards;
}
.book-cover-right::after { border-radius: 8px 2px 2px 8px; }

.intro-title {
  margin-top: 44px;
  color: #d4af37;
  font-size: 22px;
  letter-spacing: 4px;
  opacity: 0;
  font-family: Georgia, 'Times New Roman', serif;
  animation: titleFade 2.6s ease forwards;
}

@keyframes bookGlow {
  0%   { opacity: 0; transform: scale(0.4); }
  55%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0.35; transform: scale(1.15); }
}
@keyframes openLeft {
  0%   { transform: rotateY(0deg); }
  60%  { transform: rotateY(-155deg); }
  100% { transform: rotateY(-150deg); }
}
@keyframes openRight {
  0%   { transform: rotateY(0deg); }
  60%  { transform: rotateY(155deg); }
  100% { transform: rotateY(150deg); }
}
@keyframes titleFade {
  0%, 40% { opacity: 0; transform: translateY(10px); }
  70%     { opacity: 1; transform: translateY(0); }
  100%    { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════
   2) LOGIN QILGANDA — SEHRLI SIYOH
   ═══════════════════════════════════════════════════════ */
.ink-drop {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d4af37;
  box-shadow: 0 0 30px 10px rgba(212,175,55,0.5);
  animation: inkDrop 0.7s ease-out forwards;
}
@keyframes inkDrop {
  0%   { transform: scale(0.3); opacity: 0.9; }
  70%  { transform: scale(14); opacity: 0.15; }
  100% { transform: scale(18); opacity: 0; }
}

.ink-text {
  margin-top: -10px;
  display: flex;
  gap: 2px;
}
.ink-letter {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 30px;
  color: #d4af37;
  opacity: 0;
  filter: blur(6px);
  animation: inkLetter 0.55s ease forwards;
}
.ink-letter.space { width: 10px; }

@keyframes inkLetter {
  0%   { opacity: 0; filter: blur(8px); transform: translateY(6px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.ink-subtitle {
  margin-top: 14px;
  color: #b9925a;
  font-size: 13px;
  letter-spacing: 3px;
  opacity: 0;
  animation: titleFade 1s ease 1.1s forwards;
}