@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom scrollbar style */
.scrollbar-custom {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #A52A2A transparent; /* Firefox */
}

/* Chrome, Edge, Safari */
.scrollbar-custom::-webkit-scrollbar {
  height: 1px; /* for horizontal scroll */
  width: 1px; /* for vertical scroll (optional) */
}

.scrollbar-custom::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-custom::-webkit-scrollbar-thumb {
  background-color: #A52A2A;
  border-radius: 100%;
}

html {
  scroll-behavior: smooth;
}

/* #workTime {
  position: absolute;
  white-space: nowrap;
  right: -100%;
  animation: scroll-left 15s linear infinite;
  max-width: fit-content;
}

@keyframes scroll-left {
  0% {
    right: 100%;
  }
  100% {
    right: -100%;
  }
} */
/* تمام صفحه */
#preloader {
  position: fixed;
  inset: 0;
  background: #ffffff; /* اینجا رنگ برندت را بگذار */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  transition: opacity 0.5s ease;
}

/* انیمیشن لوگو */
.preloader-logo {
  width: 80px;
  height: 80px;
  animation: pulse 1.3s ease-in-out infinite;
}

/* اگر لوگو نباشد یک دایره می‌سازد */
.loader::before {
  content: "";
  width: 50px;
  height: 50px;
  border: 4px solid #A52A2A; /* رنگ برند */
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin 1s linear infinite;
}

.loader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  direction: ltr;
  gap: 25px;
}

/* انیمیشن‌ها */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

body::before {
  content: "";
  position: fixed; /* ثابت موندن لوگو هنگام اسکرول */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* وسط چین کردن دقیق */
  width: 80%; /* سایز لوگو در بک‌گراند */
  height: 80%;

  /* آدرس عکس رو اینجا جایگزین کن */
  background-image: url("/uploads/bg.png");

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /* جادوی بلور و شفافیت */
  filter: blur(5px) brightness(0.7); /* تار کردن و کمی تیره کردن برای خوانایی متن */
  opacity: 0.5; /* خیلی محو که چشم رو اذیت نکنه و متن‌ها خونده بشن */

  z-index: -1; /* فرستادن به پشت همه‌ی المان‌ها */
  pointer-events: none; /* جلوگیری از کلیک شدن روی لوگو */
}