/* ============================================================
   Iran Ink Market — Homepage Redesign
   Street-style ink aesthetic. RTL Persian. Signature easing:
   cubic-bezier(.16,1,.3,1). Compositor-only animation.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');

:root {
  --iim-bg: #fbfaf8;
  --iim-ink: #111111;
  --iim-ink-soft: #141311;
  --iim-muted: #6b6862;
  --iim-badge-text: #3f3c37;
  --iim-border: #e6e3dd;
  --iim-border-2: #cfcac0;
  --iim-dot: #d9d5cc;
  --iim-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---- page wrapper ---- */
.iim {
  position: relative;
  background: var(--iim-bg);
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  color: var(--iim-ink-soft);
  overflow-x: clip;
  direction: rtl;
}
.iim *, .iim *::before, .iim *::after { box-sizing: border-box; }
.iim ::selection { background: var(--iim-ink); color: #fff; }
.iim a { text-decoration: none; }

/* keyframes */
@keyframes iim-fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes iim-brushIn { from { opacity: 0; } to { opacity: .9; } }
@keyframes iim-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes iim-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   GRAFFITI BACKGROUND LAYER
   ============================================================ */
.iim-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}
.iim-bg img { width: 100%; display: block; }
.iim-bg .bob { will-change: transform; }

/* ============================================================
   HERO
   ============================================================ */
.iim-hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px clamp(16px, 4vw, 40px) 24px;
  max-width: 1080px;
  margin: 0 auto;
  overflow: visible;
  text-align: center;
}

.iim-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--iim-border-2);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: clamp(12px, 2.2vw, 13px);
  color: var(--iim-badge-text);
  background: #fff;
  position: relative;
  z-index: 2;
}
.iim-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--iim-ink); flex-shrink: 0; }

.iim-h1 {
  font-size: clamp(26px, 5.2vw, 42px);
  line-height: 1.5;
  font-weight: 800;
  margin: 6px 0 0;
  color: var(--iim-ink);
  position: relative;
  z-index: 2;
}
.iim-h1 .brushword { position: relative; display: inline-block; }
.iim-h1 .brushword img {
  position: absolute;
  right: -10%;
  left: -10%;
  bottom: -6px;
  width: 120%;
  max-width: none;
  height: 16px;
  object-fit: fill;
  z-index: -1;
  opacity: .9;
}

/* entrance stagger — content is visible by default (progressive enhancement);
   the .loaded class (added synchronously by JS) plays the fade-up. If JS never
   runs, everything simply shows. */
.iim .fu { opacity: 1; }
.iim.loaded .fu { animation: iim-fadeUp .85s var(--iim-ease) both; }
/* safety net: once the entrance window has passed, force the final visible
   state regardless of whether animations ever advanced (frozen/background tab). */
.iim.entrance-done .fu { opacity: 1 !important; animation: none !important; }
.iim.loaded .fu-1 { animation-delay: .05s; }
.iim.loaded .fu-2 { animation-delay: .15s; }
.iim.loaded .fu-3 { animation-delay: .25s; }
.iim.loaded .fu-4 { animation-delay: .40s; }
.iim.loaded .fu-5 { animation-delay: .55s; }

/* ---- carousel stage ---- */
.iim-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  height: clamp(340px, 44vw, 490px);
  perspective: 1400px;
  overflow: hidden;
  margin-top: -6px;
  cursor: pointer;
}
.iim-tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .5s var(--iim-ease);
  will-change: transform;
}
.iim-glow {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 50%;
  transition: opacity 1s ease;
  z-index: 0;
  pointer-events: none;
}
.iim-bottle {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform-origin: bottom center;
  transform-style: preserve-3d;
  pointer-events: none;
  will-change: transform, opacity;
  transition: transform .7s var(--iim-ease), opacity .6s var(--iim-ease);
}
.iim-bottle .img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  pointer-events: none;
  z-index: 1;
}
.iim-bottle .shadow {
  position: absolute;
  left: 50%;
  bottom: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(17,17,17,.30), rgba(17,17,17,.10) 55%, transparent 72%);
  transition: transform .7s var(--iim-ease), opacity .7s var(--iim-ease);
  pointer-events: none;
  z-index: 0;
}
/* bottom fade so glow dissolves into page */
.iim-stage .fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px;
  background: linear-gradient(to bottom, rgba(251,250,248,0), var(--iim-bg) 92%);
  z-index: 50;
  pointer-events: none;
}
.iim-dots {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
}
.iim-dots .row { display: flex; gap: 8px; justify-content: center; direction: ltr; }
.iim-dots span {
  width: 7px; height: 7px;
  border-radius: 4px;
  background: var(--iim-dot);
  cursor: pointer;
  transition: all .4s var(--iim-ease);
}
.iim-dots span.active { width: 20px; background: var(--iim-ink); }

/* ---- CTA row ---- */
.iim-cta {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 2;
  margin-top: 34px;
}
.iim-btn {
  font-weight: 700;
  font-size: 15px;
  padding: 16px 32px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.iim-btn-primary {
  background: var(--iim-ink);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 0 rgba(17,17,17,0);
  transition: transform .45s var(--iim-ease), box-shadow .45s var(--iim-ease);
}
.iim-btn-primary::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
  transform: skewX(-18deg);
}
.iim-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -10px rgba(17,17,17,.4); }
.iim-btn-primary:hover::after { left: 135%; transition: left .7s var(--iim-ease); }
.iim-btn-secondary {
  background: transparent;
  color: var(--iim-ink);
  border: 1.5px solid var(--iim-border-2);
  transition: border-color .4s var(--iim-ease), background .4s var(--iim-ease), color .4s var(--iim-ease), transform .4s var(--iim-ease);
}
.iim-btn-secondary:hover { border-color: var(--iim-ink); background: var(--iim-ink); color: #fff; transform: translateY(-3px); }

/* ---- trust strip ---- */
.iim-trust {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  justify-content: center;
  border-top: 1px solid var(--iim-border);
  padding-top: 20px;
  margin-top: 24px;
  position: relative;
  z-index: 2;
  width: 100%;
}
.iim-trust .item { display: flex; align-items: center; gap: 10px; transition: transform .4s var(--iim-ease); }
.iim-trust .item:hover { transform: translateY(-4px); }
.iim-trust .item span { font-size: 13.5px; color: var(--iim-badge-text); }

/* ============================================================
   BRAND MARQUEE
   ============================================================ */
.iim-marquee {
  position: relative;
  z-index: 2;
  background: var(--iim-ink);
  overflow: hidden;
  padding: 13px 0;
  transform: rotate(-1.2deg) scale(1.02);
  margin: 34px 0 20px;
  box-shadow: 0 16px 38px -20px rgba(17,17,17,.55);
  direction: ltr;
}
.iim-marquee .track {
  display: flex;
  width: max-content;
  animation: iim-marquee 38s linear infinite;
  will-change: transform;
}
.iim-marquee .item {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  padding: 0 15px;
  font-family: 'Anton', sans-serif;
  font-size: clamp(14px, 2.2vw, 19px);
  letter-spacing: .14em;
  color: #f3f2ef;
  white-space: nowrap;
}
.iim-marquee .item .sep { width: 6px; height: 6px; border-radius: 50%; background: #57534a; }

/* ============================================================
   SECTION HEADING PATTERN
   ============================================================ */
.iim-section {
  position: relative;
  z-index: 2;
  padding: 46px clamp(16px, 4vw, 40px) 70px;
  max-width: 1440px;
  margin: 0 auto;
}
.iim-section.tight { padding-top: 20px; }
.iim-cv { content-visibility: auto; contain-intrinsic-size: auto 700px; }
.iim-head { text-align: center; margin-bottom: 44px; }
.iim-head .wrap { position: relative; display: inline-block; }
.iim-head h2 { font-size: clamp(24px, 4vw, 34px); font-weight: 800; margin: 0; color: var(--iim-ink); }
.iim-head .stroke {
  position: absolute;
  right: 0; left: 0; bottom: -10px;
  width: 100%;
  height: 14px;
  object-fit: fill;
  opacity: .85;
}
.iim-head .stroke.squiggle { right: -6%; left: -6%; bottom: -14px; width: 112%; height: 20px; object-fit: contain; }
.iim-head p { font-size: 15px; color: var(--iim-muted); margin: 22px 0 0; }

/* ---- generic card hover ---- */
.iim-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--iim-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: transform .5s var(--iim-ease), box-shadow .5s var(--iim-ease);
}
.iim-card:hover { transform: translateY(-8px) rotateX(3deg); box-shadow: 0 26px 44px -20px rgba(17,17,17,.34); }
.iim-zoom-wrap { overflow: hidden; }
.iim-zoom { transition: transform .8s var(--iim-ease); }
.iim-card:hover .iim-zoom { transform: scale(1.07); }

/* ============================================================
   CATEGORIES GRID
   ============================================================ */
.iim-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
  perspective: 1400px;
}
.iim-cats .thumb { width: 100%; aspect-ratio: 4/3; background: #fbfaf8; background-size: cover; background-position: center; }
.iim-cats .label { padding: 16px; text-align: center; }
.iim-cats .label span { font-size: 15px; font-weight: 700; color: var(--iim-ink-soft); }

/* ============================================================
   PRODUCTS GRID + PAGINATION
   ============================================================ */
.iim-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  perspective: 1400px;
}
@media (min-width: 560px) { .iim-products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .iim-products { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .iim-products { grid-template-columns: repeat(6, 1fr); } }
.iim-products .thumb { width: 100%; aspect-ratio: 4/3; background: #fbfaf8; background-size: cover; background-position: center; }
.iim-products .body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.iim-products .cat { font-size: 11.5px; color: #8a8680; }
.iim-products .name { font-size: 14px; font-weight: 700; color: var(--iim-ink-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.iim-products .price { font-size: 13.5px; font-weight: 700; color: var(--iim-ink); margin-top: auto; }
.iim-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; }
.iim-pager button {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--iim-border-2);
  background: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .3s, background .3s, opacity .3s;
}
.iim-pager button:hover:not(:disabled) { border-color: var(--iim-ink); background: var(--iim-ink); }
.iim-pager button:hover:not(:disabled) svg { stroke: #fff; }
.iim-pager button:disabled { opacity: .35; cursor: default; }
.iim-pager .label { font-size: 13.5px; color: var(--iim-badge-text); min-width: 70px; text-align: center; }

/* ============================================================
   BRANDS GRID
   ============================================================ */
.iim-brands { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.iim-brands .b {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: clamp(110px, 13vw, 140px);
  padding: 18px 10px;
  border: 1px solid var(--iim-border);
  border-radius: 8px;
  background: #fff;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .4s, opacity .4s, transform .4s var(--iim-ease);
}
.iim-brands .b:hover { filter: grayscale(0); opacity: 1; transform: translateY(-4px); }
.iim-brands .b .logo { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #f3f2ef; }
.iim-brands .b .logo img { width: 100%; height: 100%; object-fit: cover; }
.iim-brands .b span { font-size: 12.5px; font-weight: 700; color: var(--iim-ink-soft); text-align: center; }

/* ============================================================
   ABOUT
   ============================================================ */
.iim-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.iim-about-photo {
  display: block;
  width: 100%;
  aspect-ratio: 5/4;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  background: #f3f2ef;
  box-shadow: 0 26px 44px -24px rgba(17,17,17,.28);
  transition: box-shadow .5s var(--iim-ease);
}
.iim-about-photo:hover { box-shadow: 0 32px 52px -20px rgba(17,17,17,.4); }
.iim-about-photo img.photo { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--iim-ease); }
.iim-about-photo:hover img.photo { transform: scale(1.05); }
.iim-about h2 { font-size: clamp(22px, 3.6vw, 32px); line-height: 1.6; font-weight: 800; margin: 0 0 18px; color: var(--iim-ink); }
.iim-about h2 a { color: inherit; transition: color .3s; }
.iim-about h2 a:hover { color: var(--iim-muted); }
.iim-about .iim-badge { transition: transform .3s var(--iim-ease), box-shadow .3s var(--iim-ease); }
.iim-about .iim-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 18px -12px rgba(17,17,17,.3); }
.iim-about p { font-size: 15.5px; line-height: 2; color: #3a3733; margin: 0 0 30px; }
.iim-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; border-top: 1px solid var(--iim-border); padding-top: 26px; }
.iim-stats .v { font-family: 'Anton', sans-serif; font-size: clamp(22px, 3vw, 30px); color: var(--iim-ink); }
.iim-stats .l { font-size: 12.5px; color: var(--iim-muted); margin-top: 6px; }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.iim-reveal { transition: opacity .9s var(--iim-ease), transform .9s var(--iim-ease); }
.iim-reveal.armed:not(.in) { opacity: 0; transform: translateY(30px); }
.iim-reveal.in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .iim-about-grid { grid-template-columns: 1fr; gap: 28px; }
  .iim-bottle, .iim-card { /* hover-lift disabled on touch handled in JS via vw check */ }
}
@media (max-width: 560px) {
  .iim-trust { gap: 20px; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .iim *, .iim *::before, .iim *::after { animation: none !important; transition: none !important; }
  .iim-reveal { opacity: 1 !important; transform: none !important; }
  .iim .fu { opacity: 1 !important; }
}