/* ========== تنظیمات کلی و فونت ========== */
@font-face {
  font-family: 'PeydaFaNum';
  src: url('fonts/PeydaWebFaNum-Medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
:root{
  --bg: #e6d6ff; /* بنفش روشن */
  --accent: #4b0082;
  --control-bg: rgba(75,0,130,0.9);
  --control-hover: rgba(110,0,160,1);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'PeydaFaNum', system-ui, sans-serif;direction:rtl;background:linear-gradient(135deg,var(--bg),#f7e9ff);overflow:hidden}

/* Intro logo */
#intro{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:999;animation:introFade 4s ease forwards;
}
.logo{font-size:3.2rem;color:var(--accent);opacity:0;animation:fadeInOut 4s ease forwards}
@keyframes fadeInOut{0%{opacity:0;transform:scale(.95)}30%{opacity:1;transform:scale(1)}70%{opacity:1}100%{opacity:0;transform:scale(1.05)}}
@keyframes introFade{0%,80%{opacity:1}100%{opacity:0;visibility:hidden}}

/* Catalog container */
.catalog-container{position:relative;width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;}

/* Page view (تصویر تمام صفحه) */
.page-view{position:relative;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;perspective:2200px;overflow:hidden}
#flipOverlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  display: none;
  perspective: 2200px;
}


/* flip overlay: برای انیمیشن 3D (میان‌برشی که دوران انجام می‌دهد) */
#flipOverlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  display: none;
  perspective: 2200px;
}
/* Seek: معکوس ظاهری برای RTL */
.seekbar input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--accent), #b37be8);
  outline: none;
  /* این خط باعث می‌شود ظاهر اسلایدر معکوس شود (thumb از سمت راست شروع کند) */
  transform: scaleX(-1);
}

/* thumb را دوباره برگردانیم تا چرخش روی آن اعمال نشود */
.seekbar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transform: scaleX(-1); /* برگردانِ thumb زیرا container معکوس شده */
}

/* Firefox */
.seekbar input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transform: scaleX(-1);
}

/* ==== برای اسلاید شدن تصاویر ==== */
.page-view { position:relative; width:100vw; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.slide-layer {
  position: absolute;
  inset: 0;
  background-size: contain !important;  /* تصویر کامل بدون برش */
  background-repeat: no-repeat;
  background-position: center center;
  transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
  z-index: 1;
}

/* لایه فعلی در جلو */
.slide-layer.current { z-index:12; opacity:1; }
.slide-layer.next { z-index:11; opacity:1; }

/* حالت مخفی (قبل/بعد از انیمیشن) */
.slide-layer.off-left { transform: translateX(-100%); opacity:1; }
.slide-layer.off-right { transform: translateX(100%); opacity:1; }

/* Text overlay و Controls (هر چیزی که لازم بود بماند) */
/* ... (باقی استایل‌های قبلی) */

/* Seek: نمایش سمت راست→چپ */
.seekbar input[type="range"] {
  direction: ltr; /* نگه می‌داریم لایهٔ slider LTR ولی در JS مقدار را معکوس می‌کنیم */
  /* بقیه‌ی استایل قبلی */
}

/* کوچک‌شده برای موبایل اگر لازم بود (حفظ کن) */
@media (max-width:900px){
  .seekbar{width:90%}
}


/* Text overlay (عنوان + توضیح) */
.text-overlay{
  position:absolute;right:5%;bottom:8%;z-index:15;color:#fff;text-align:right;background:rgba(0,0,0,0.35);padding:18px 22px;border-radius:12px;backdrop-filter:blur(6px);
  max-width:44%;opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.2,.9,.3,1);
}
.text-overlay.show{opacity:1;transform:translateY(0)}
.text-overlay h2{margin:0;font-size:28px;color:#fff}
.text-overlay p{margin:8px 0 0;font-size:16px;color:#f6f6f6}

/* Controls positioned over image at bottom center */
.controls{position:absolute;left:50%;transform:translateX(-50%);bottom:30px;display:flex;gap:12px;z-index:20}
.controls button {
    font-family: PeydaFaNum !important;
    font-size: 18px;
    background: rgba(77, 32, 74, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(147, 45, 160, 0.3);
    padding: 10px 18px;
    border-radius: 12px;
    color: rgb(0, 0, 0);
    cursor: pointer;
    transition: 0.3s;
}

.controls button:hover {
    background: rgba(255,255,255,0.35);
}

/* Seek bar container */
.seekbar{position:absolute;left:50%;transform:translateX(-50%);bottom:92px;width:70%;max-width:1300px;z-index:18;display:flex;align-items:center;gap:12px}
.seekbar input[type="range"]{width:100%;appearance:none;height:10px;border-radius:10px;background:linear-gradient(90deg,var(--accent),#b37be8);outline:none}
.seekbar input[type="range"]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.3);cursor:pointer}
.seek-info{color:#fff;font-size:14px;min-width:120px;text-align:center}

/* Responsive tweaks */
@media (max-width:900px){
  .text-overlay{max-width:70%;right:6%;bottom:16%}
  .seekbar{width:90%}
  .controls button{padding:8px 14px;font-size:16px}
}