/* ===== فونت اختصاصی ===== */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazir-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== متغیرها ===== */
:root {
  --wine: #8a191b;
  --wine-dark: #5f1012;
  --black: #0c0c0c;
  --white: #ffffff;
  --teal: #168c86;
  --cream: #f5f1eb;
}

/* ===== ریست ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  overflow: hidden;
  background: var(--cream);
  font-family: 'Vazirmatn', sans-serif;
  color: var(--black);
}

/* ===== لودر اصلی ===== */
.loader {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

/* ===== پس‌زمینه ===== */
.background {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(
      circle at 50% 35%,
      #ffffff 0%,
      #f8f5f0 28%,
      #e9e1d9 65%,
      #ddd2c8 100%
    );
}

/* ===== لکه‌های رنگی (blob) ===== */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .9;
  z-index: -2;
}

.blob.one {
  width: 420px;
  height: 420px;
  background: var(--wine);
  top: -230px;
  right: -130px;
}

.blob.two {
  width: 300px;
  height: 300px;
  background: var(--teal);
  bottom: -180px;
  left: -100px;
}

.blob.three {
  width: 160px;
  height: 160px;
  background: var(--wine);
  bottom: 12%;
  right: 8%;
  opacity: .12;
}

/* ===== خطوط تزئینی ===== */
.lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .08;
  background-image:
    linear-gradient(90deg, var(--black) 1px, transparent 1px),
    linear-gradient(var(--black) 1px, transparent 1px);
  background-size: 45px 45px;
  mask-image: linear-gradient(to bottom, transparent, black, transparent);
}

/* ===== محتوای اصلی ===== */
.content {
  width: min(90%, 430px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: entrance 1s cubic-bezier(.16, 1, .3, 1) forwards;
}

/* ===== لوگو کوچک ===== */
.logo {
  margin-bottom: 8px;
  position: relative;
}

.logo-small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--wine);
  text-transform: uppercase;
}

.logo-small::before,
.logo-small::after {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--wine);
}

/* ===== تایتل ===== */
.title {
  font-size: clamp(42px, 12vw, 68px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -3px;
  color: var(--black);
}

.title span {
  color: var(--wine);
}

/* ===== ساب‌تایتل با قهوه GIF ===== */
.subtitle {
  margin-top: 13px;
  color: #666;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.subtitle-coffee {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

/* ===== دایره دور GIF ===== */
.gif-wrapper {
  width: 190px;
  height: 190px;
  margin: 20px 0 18px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gif-wrapper::before {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 1px solid rgba(138, 25, 27, .18);
  animation: pulse 2s ease-in-out infinite;
}

.gif-wrapper::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px dashed rgba(22, 140, 134, .25);
  animation: rotate 14s linear infinite;
}

.gif {
  width: 145px;
  height: 145px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 15px 20px rgba(0, 0, 0, .15));
}

/* ===== بخش بارگذاری ===== */
.loading-info {
  width: 100%;
  max-width: 330px;
}

.loading-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 700;
  color: #555;
}

.loading-text .percent {
  color: var(--wine);
  font-variant-numeric: tabular-nums;
}

.progress {
  width: 100%;
  height: 7px;
  background: rgba(0, 0, 0, .09);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--wine),
    var(--wine-dark),
    var(--teal)
  );
  transition: width .1s linear;
}

.loading-message {
  margin-top: 17px;
  font-size: 11px;
  color: #777;
  min-height: 20px;
}

/* ===== فوتر با قلب GIF ===== */
.footer {
  position: fixed;
  bottom: 25px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: #888;
}

.footer-heart {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: inline-block;
}

/* ===== انیمیشن‌ها ===== */
@keyframes entrance {
  from {
    opacity: 0;
    transform: translateY(25px) scale(.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(.92);
    opacity: .5;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ===== ریسپانسیو موبایل ===== */
@media (max-width: 480px) {
  .title {
    font-size: 52px;
  }

  .gif-wrapper {
    width: 175px;
    height: 175px;
  }

  .gif {
    width: 135px;
    height: 135px;
  }

  .blob.one {
    width: 300px;
    height: 300px;
  }

  .footer-heart {
    width: 16px;
    height: 16px;
  }

  .subtitle-coffee {
    width: 18px;
    height: 18px;
  }
}