/* ═══════════════════════════════════════════════════════════
   MASOUD ZAREI PORTFOLIO — styles.css
   ═══════════════════════════════════════════════════════════ */

/* ── Custom Properties ── */
:root {
  --lime:       #C6F135;
  --lime-dark:  #a8d118;
  --dark:       #1A2210;
  --dark-2:     #232d14;
  --chalk:      #F0ECE3;
  --offwhite:   #F5F2EC;
  --black:      #0A0A0A;
  --gray-line:  rgba(0,0,0,0.055);
  --white:      #ffffff;
  --text-dark:  #0E0E0E;
  --text-mid:   #444;
  --text-light: #888;
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --header-h:   90px;
  --transition: 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ── Fonts ── */
/* Morabba */
@font-face {
  font-family: 'Morabba';
  src: url('../assets/fonts/Morabba-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Morabba';
  src: url('../assets/fonts/Morabba-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* IRANSansWeb */
@font-face {
  font-family: 'IRANSans';
  src: url('../assets/fonts/IRANSansWeb_Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'IRANSans';
  src: url('../assets/fonts/IRANSansWeb_Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IRANSans';
  src: url('../assets/fonts/IRANSansWeb.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* IRANYekan */
@font-face {
  font-family: 'IRANYekan';
  src: url('../assets/fonts/IRANYekanBold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'IRANYekan';
  src: url('../assets/fonts/IRANYekanMedium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IRANYekan';
  src: url('../assets/fonts/IRANYekanRegular_0.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* YekanBakh */
@font-face {
  font-family: 'YekanBakh';
  src: url('../assets/fonts/YekanBakh-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'YekanBakh';
  src: url('../assets/fonts/YekanBakh-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'YekanBakh';
  src: url('../assets/fonts/YekanBakh-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; overflow-x: hidden; background: var(--offwhite); }
body {
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 16px;
  background: transparent;
  color: var(--text-dark);
  overflow-x: hidden;
  cursor: none;
  /* iOS: lock to vertical scroll, kill rubber-band chaining, smooth momentum */
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
@media (hover: none) and (pointer: coarse) {
  body { cursor: auto; }
}

/* ── Global background canvas ── */
#bg-canvas-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
#bg-canvas-wrap canvas { display: block; }
img { display: block; max-width: 100%; height: auto; }
a  { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font: inherit; }

/* ── Custom cursor ── */
.cursor {
  position: fixed;
  width: 12px; height: 12px;
  background: var(--lime);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width 0.2s, height 0.2s, background 0.35s ease;
}
.cursor-follower {
  position: fixed;
  width: 36px; height: 36px;
  border: 1px solid rgba(198,241,53,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%);
  transition: transform 0.15s, width 0.25s, height 0.25s, border-color 0.35s ease;
}
body:has(a:hover) .cursor,
body:has(button:hover) .cursor { width: 20px; height: 20px; }


/* ═══════════════════════════════════ LOADER ═══ */
#loader {
  position: absolute; inset: 0;
  background: var(--lime);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
  overflow: hidden;
}
#loader-triangles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.loader-monogram {
  position: relative;
  display: flex; gap: 8px;
  font-family: 'Cormorant', serif;
  font-size: clamp(60px, 30vw, 124px);
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -4px;
}
.loader-monogram span { display: inline-block; }

/* ═══════════════════════════════════ NAV OVERLAY ═══ */
/* ════════════════════════════════════════════════════════════
   MENU BAR — CONFIG  ✏️  تنظیمات اینجاست
   ════════════════════════════════════════════════════════════

   --mb-x:          جابجایی افقی از مرکز  (مثبت = راست، منفی = چپ)
   --mb-y:          جابجایی عمودی از مرکز  (مثبت = پایین، منفی = بالا)
   --mb-font:       اندازه متن
   --mb-pad-v:      فاصله بالا/پایین داخل هر آیتم
   --mb-pad-h:      فاصله چپ/راست داخل هر آیتم
   --mb-icon:       اندازه آیکون
   --mb-gap:        فاصله بین آیتم‌ها
   --mb-radius:     گوشه گرد هر آیتم
   --mb-hide-dur:   زمان محو شدن وقتی از Hero خارج می‌شیم (ثانیه)
   --mb-hide-slide: مقدار جابجایی هنگام محو (پیکسل)
   ════════════════════════════════════════════════════════════ */
:root {
  /* ── Desktop position ── */
  --mb-x:          0px;
  --mb-y:          0px;

  /* ── Desktop size ── */
  --mb-font:       14px;
  --mb-pad-v:      8px;
  --mb-pad-h:      16px;
  --mb-icon:       18px;
  --mb-gap:        4px;
  --mb-radius:     14px;

  /* ── Hide/show timing ── */
  --mb-hide-dur:   0.5s;
  --mb-hide-slide: 5px;
}

/* ── Mobile override ── */
@media (max-width: 768px) {
  :root {
    /* ── Mobile position ── */
    --mb-x:        60px;
    --mb-y:        0px;

    /* ── Mobile size ── */
    --mb-font:     6px;
    --mb-pad-v:    6px;
    --mb-pad-h:    11px;
    --mb-icon:     15px;
    --mb-gap:      2px;
    --mb-radius:   11px;
  }
}

/* ═══════════════════════════════════ MENU BAR ═══ */
.menu-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  padding: 6px;
  border-radius: 20px;
  background: linear-gradient(to bottom,
    rgba(20,20,20,0.82),
    rgba(10,10,10,0.68));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35),
              inset 0 1px 0 rgba(255,255,255,0.05);
  isolation: isolate;
  opacity: 1;
  pointer-events: all;
  transform: translate(calc(-50% + var(--mb-x)), calc(-50% + var(--mb-y)));
  transition: opacity var(--mb-hide-dur) cubic-bezier(0.4,0,0.2,1),
              transform var(--mb-hide-dur) cubic-bezier(0.4,0,0.2,1);
}
.menu-bar.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(-50% + var(--mb-x)), calc(-50% + var(--mb-y) - var(--mb-hide-slide)));
}

/* nav-level radial glow */
.menu-bar-nav-glow {
  position: absolute;
  inset: -8px;
  background: radial-gradient(ellipse at center,
    transparent 0%,
    rgba(99,102,241,0.18) 30%,
    rgba(168,85,247,0.14) 60%,
    rgba(249,115,22,0.10) 90%,
    transparent 100%);
  opacity: 0;
  pointer-events: none;
  border-radius: 28px;
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1);
}
.menu-bar:hover .menu-bar-nav-glow { opacity: 1; }

.menu-bar-list {
  display: flex;
  align-items: center;
  gap: var(--mb-gap);
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
  z-index: 1;
}

.menu-bar-item { position: relative; }

.menu-bar-link {
  display: block;
  position: relative;
  border-radius: var(--mb-radius);
  text-decoration: none;
  perspective: 600px;
  overflow: hidden; /* clip glow to item bounds */
}

/* per-item gradient glow — stays within the item box */
.menu-bar-glow {
  position: absolute;
  inset: 0;
  background: var(--item-glow, transparent);
  border-radius: var(--mb-radius);
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1),
              transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.menu-bar-link:hover .menu-bar-glow {
  opacity: 1;
  transform: scale(1);
}

/* shared face styles */
.menu-bar-face {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--mb-pad-v) var(--mb-pad-h);
  border-radius: var(--mb-radius);
  font-size: var(--mb-font);
  font-weight: 500;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.5);
  transform-style: preserve-3d;
  transition: color 0.3s;
}
.menu-bar-link:hover .menu-bar-face { color: #fff; }

/* front face */
.menu-bar-face--front {
  transform-origin: center bottom;
  transform: rotateX(0deg);
  opacity: 1;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
              opacity  0.5s cubic-bezier(0.4,0,0.2,1),
              color    0.3s;
}
.menu-bar-link:hover .menu-bar-face--front {
  transform: rotateX(-90deg);
  opacity: 0;
}

/* back face */
.menu-bar-face--back {
  position: absolute;
  inset: 0;
  padding: var(--mb-pad-v) var(--mb-pad-h);
  transform-origin: center top;
  transform: rotateX(90deg);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
              opacity  0.5s cubic-bezier(0.4,0,0.2,1),
              color    0.3s;
}
.menu-bar-link:hover .menu-bar-face--back {
  transform: rotateX(0deg);
  opacity: 1;
}

/* icon */
.menu-bar-face .mb-icon {
  width: var(--mb-icon);
  height: var(--mb-icon);
  flex-shrink: 0;
  transition: color 0.3s;
}
.menu-bar-link:hover .mb-icon {
  color: var(--icon-color, currentColor);
}

/* hamburger — completely removed */
.btn-menu { display: none !important; }

/* ── Instagram dropdown ── */
.mb-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 190px;
  background: linear-gradient(to bottom, rgba(22,22,22,0.96), rgba(14,14,14,0.92));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s cubic-bezier(0.4,0,0.2,1),
              transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 200;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
.mb-dropdown::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 9px;
  height: 9px;
  background: rgba(22,22,22,0.96);
  border-left: 1px solid rgba(255,255,255,0.1);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.menu-bar-item--has-dropdown:hover .mb-dropdown {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0px);
}
.mb-dropdown-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 11px;
  text-decoration: none;
  color: rgba(255,255,255,0.65);
  transition: background 0.18s, color 0.18s;
}
.mb-dropdown-item:hover {
  background: rgba(230,104,60,0.12);
  color: #fff;
}
.mb-dd-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: rgba(230,104,60,0.7);
  transition: color 0.18s;
}
.mb-dropdown-item:hover .mb-dd-icon { color: #e6683c; }
.mb-dd-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mb-dd-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
}
.mb-dd-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.38);
  line-height: 1;
  font-family: 'Morabba', sans-serif;
}

/* ═══════════════════════════════════ HEADER ═══ */
#main-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 48px);
  z-index: 700;
  mix-blend-mode: normal;
  transition: background 0.4s;
}
#main-header.is-dark {
  /* handled by JS adding class */
}
.logo-wrap { display: flex; align-items: flex-start; }
.logo-text {
  display: flex; flex-direction: row; gap: 0.35em;
  font-family: 'Cormorant', serif;
  font-size: clamp(22px, 1.8vw, 30px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dark);
  transition: color 0.4s;
  margin-top: 5px;
}
[lang="fa"] .logo-text {
  font-family: 'YekanBakh' !important;
  font-weight: 700;
}
.header-dark .logo-text { color: white; }
.header-monogram {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--text-dark);
  transition: color 0.4s;
}
.header-dark .header-monogram { color: white; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.btn-work {
  display: flex; align-items: center; gap: 8px;
  background: var(--lime);
  color: var(--dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 4px;
  transition: var(--transition);
}
.btn-work:hover { background: var(--lime-dark); transform: scale(0.97); }
.lang-toggle { display: flex; align-items: center; }
.lang-checkbox { display: none; }
.lang-checkbox + .lang-estado {
  display: block;
  width: 100px;
  height: 38px;
  background-color: var(--lime);
  border-radius: 19px;
  box-shadow: 0 0 20px -3px rgba(0,0,0,0.15);
  transition: background-color 300ms cubic-bezier(0.79,-0.01,0.36,1);
  cursor: pointer;
  position: relative;
}
.lang-checkbox + .lang-estado span {
  position: absolute;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  pointer-events: none;
}
.lang-checkbox + .lang-estado .lang-label-active {
  top: 50%;
  transform: translateY(-50%);
  left: 14px;
  color: var(--dark);
}
.lang-checkbox + .lang-estado .lang-label-inactive {
  top: 50%;
  transform: translateY(-50%);
  right: 12px;
  display: none;
  color: white;
}
.lang-checkbox + .lang-estado::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0 0 15px -3px rgba(0,0,0,0.2);
  top: 50%;
  transform: translateY(-50%);
  left: 66px;
  transition: left 300ms cubic-bezier(0.79,-0.01,0.36,1);
}
.lang-checkbox:checked + .lang-estado { background-color: var(--dark); }
.lang-checkbox:checked + .lang-estado .lang-label-active { display: none; }
.lang-checkbox:checked + .lang-estado .lang-label-inactive { display: block; }
.lang-checkbox:checked + .lang-estado::before { left: 4px; }
.btn-menu {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  transition: var(--transition);
}
.btn-menu span {
  display: block;
  width: 14px; height: 1.5px;
  background: var(--text-dark);
  transition: var(--transition);
}
.header-dark .btn-menu { border-color: rgba(255,255,255,0.3); }
.header-dark .btn-menu span { background: white; }
.btn-menu.is-open span:first-child { transform: rotate(45deg) translate(2px, 3px); }
.btn-menu.is-open span:last-child  { transform: rotate(-45deg) translate(2px, -3px); }

/* ═══════════════════════════════════ HERO STICKY TRACK ═══ */
.hero-sticky-track {
  position: relative;
}
.hero-sticky-item {
  position: relative;
  overflow: visible;
}

/* ═══════════════════════════════════ HERO ═══ */
#hero {
  position: relative;
  height: 100svh; min-height: 600px;
  background: transparent;
  overflow: visible;
}
@supports not (height: 100svh) {
  #hero { height: 100vh; }
}

/* WebGL background container — z-index auto, first in DOM → behind all siblings */
.gl-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gl-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Hero Info Card (reference "Next Race" card) ── */
.hero-info-card {
  position: absolute;
  left: clamp(20px, 4vw, 48px);
  bottom: clamp(24px, 4vh, 48px);
  z-index: 8;
  width: 7.4375rem;
  height: 15.25rem;
  color: rgba(0,0,0,0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.15rem 0.8rem 1rem;
}

.hero-info-card-border {
  position: absolute;
  inset: 0;
  z-index: -1;
  color: rgba(0,0,0,0.8);
  transition: color 0.5s ease;
}
.hero-info-card-border svg { width: 100%; height: 100%; display: block; }

.hero-info-eyebrow {
  font-size: 0.44rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
  align-self: flex-start;
  margin-top: 0.8rem;
  margin-bottom: auto;
  transition: color 0.5s ease;
}

.hero-info-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-info-row--main {
  flex: 1;
  gap: 0.28rem;
  padding: 0.2rem 0;
}
.hero-info-monogram {
  font-family: 'Cormorant', serif;
  font-size: 2.55rem;
  font-weight: 700;
  color: var(--lime);
  line-height: 1;
  letter-spacing: -0.01em;
}
.hero-info-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.04rem;
  font-size: 0.39rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
}

/* ── Hero Info Card MZ Monogram ─────────────────────────────────────────── */
.hero-info-mz {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.02rem;
  flex: 1;
  padding: 0.2rem 0;
}
.mz-letter {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: rgba(0,0,0,0.82);
  transition: color 0.6s ease;
  opacity: 0;
  transform: translateY(14px) scale(0.8);
  animation: mz-letter-in 0.65s cubic-bezier(0.23,1,0.32,1) 1.2s forwards;
}
.mz-z { animation-delay: 1.38s; }
@keyframes mz-letter-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Hero card turns lime on dark background ────────────────────────────── */
.hero-info-card {
  transition: color 0.5s ease;
}
.hero-info-card.card-light {
  color: var(--lime);
}
.hero-info-card.card-light .hero-info-card-border {
  color: var(--lime);
  transition: color 0.5s ease;
}
.hero-info-card.card-light .hero-info-eyebrow {
  color: var(--lime) !important;
}
.hero-info-card.card-light .mz-letter {
  color: var(--lime) !important;
}
.hero-info-card.card-light .mz-z {
  color: var(--lime) !important;
}
.hero-info-card.card-light .hero-info-divider {
  background: var(--lime) !important;
}
.hero-info-card.card-light .hero-info-row--sub,
.hero-info-card.card-light .hero-info-row--sub span {
  color: var(--lime) !important;
}

.hero-info-divider {
  width: 72%;
  height: 0.0625rem;
  background: rgba(255,255,255,0.15);
  margin: 0.45rem 0;
}
.hero-info-row--sub {
  font-size: 0.38rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
  margin-bottom: 0.15rem;
  transition: color 0.5s ease;
}
/* ── Hero Card 3D wrap ── */
.hero-card-3d-wrap {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  margin: 0.12rem 0;
}
.hero-card-3d-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.hero-photo-wrap {
  position: absolute;
  inset: -30px;
  z-index: 3;
  will-change: transform;

}
.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════ MARQUEE / SIG ═══ */
.marquee-bg {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: center; gap: 0;
  pointer-events: none;
  direction: ltr;
  z-index: 1;
}
.marquee-row {
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  padding: 8px 0;
  direction: ltr;
}
.mq-inner {
  display: inline-block;
  white-space: nowrap;
  animation: marquee-fwd 18s linear infinite;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 9vw, 140px);
  color: white;
  letter-spacing: 0.02em;
  direction: ltr;
  unicode-bidi: isolate;
}
[lang="fa"] .mq-inner {
  font-family: 'YekanBakh';
  font-weight: 700;   /* بولد */
}
.mq-inner.mq-reverse {
  animation: marquee-rev 18s linear infinite;
  color: var(--lime);
}
@keyframes marquee-fwd {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.white-panel {
  position: absolute; inset: 0;
  background: var(--offwhite);
  display: flex; align-items: center; justify-content: center;
  transform-origin: center center;
  will-change: opacity;
  isolation: auto;
  overflow: hidden;
  z-index: 3;
}
.panel-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* ══ HUD Visor Scan ══
   ─────────────────────────────────────────────────────────────
   ★ DESKTOP تنظیمات
   top      = فاصله از بالای کارت
   width    = عرض (نسبت به white-panel)
   height   = ارتفاع (نسبت به white-panel)
   ───────────────────────────────────────────────────────────── */
.hud-visor-overlay {
  position: absolute;
  top: 2%;              /* ★ DESKTOP — فاصله از بالا */
  left: 50%;
  transform: translateX(-50%);
  width: 80%;           /* ★ DESKTOP — عرض */
  height: 96%;          /* ★ DESKTOP — ارتفاع */
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.hud-visor-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
}

.sig-overlay {
  position: absolute; inset: 0;
  background: rgba(10, 10, 10, 0.55);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}
.hero-tint-overlay {
  position: absolute; inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
}
.sig-draw-wrap {
  pointer-events: none;
  overflow: visible;
}
.signature-svg {
  position: absolute;
  width: 55%;
  height: auto;
  overflow: visible;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sig-label {
  position: absolute;
  top: 20px; left: 20%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}

/* ── Mobile Hero Name Overlay (hidden on desktop) ── */
.hero-mobile-overlay { display: none; }

/* ── Hero Marquee Overlay (ref home-marquee: absolute over hero) ── */
.hero-marquee-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

/* ── Scroll Trackers (ref pattern) ── */
.hero-eyebrow-tracker,
.hero-rive-tracker {
  pointer-events: none;
  position: absolute;
  width: 1px;
  height: 0;
  overflow: hidden;
}

/* ── Nav Theme Anchors ── */
.hero-nav-theme {
  pointer-events: none;
  position: absolute;
  inset: 0 auto auto 0;
}
.hero-nav-theme.is-1 { height: 10vh; }
.hero-nav-theme.is-2 { height: 90vh; top: 10vh; }

/* ═══════════════════════════════════ TEXT REVEAL ═══ */
#text-reveal {
  background: transparent;
  padding: clamp(80px, 12vh, 160px) clamp(20px, 5vw, 80px);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.reveal-badge {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.45);
  margin-bottom: clamp(40px, 6vh, 80px);
}
.reveal-text-wrap { overflow: visible; }
.reveal-headline {
  display: flex; flex-direction: column; gap: 0;
  align-items: center;
  font-family: 'YekanBakh', sans-serif;
  font-size: clamp(72px, 14vw, 200px);
  line-height: 0.92;
  letter-spacing: 0.01em;
}
html[lang="fa"] .rv-en-only { display: none; }
html[lang="fa"] .reveal-headline { line-height: 1.15; }
html[lang="fa"] .rv-line { padding-top: 0.08em; }
.rv-line {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 0.3em;
  padding-bottom: 0.05em;
}
.rv-word {
  display: inline-block;
  color: white;
  will-change: clip-path;
}
.rv-word.rv-lime { color: var(--lime); }

/* Wipe bar (CodePen Sicontis-style reveal) */
.tr-wipe-bar {
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%) rotateZ(12deg);
  width: 12px;
  height: 200%;
  z-index: 5;
  pointer-events: none;
}
.tr-wipe-inner {
  width: 100%;
  height: 100px;
  border-radius: 100px;
  background: var(--lime);
  transform-origin: top center;
}




/* ══ Split & PG reveal — wrapper must be block so overflow:hidden clips the wipe ══ */
.split-reveal,
.pg-reveal {
  display: block;
  overflow: hidden;
}
/* The wipe bars inside split/pg need right/left origin depending on LTR/RTL */
.split-reveal.animation-ltr.animate-in::before,
.pg-reveal.animation-ltr.animate-in::before   { left: 0; right: auto; }
.split-reveal.animation-rtl.animate-in::before { right: 0; left: auto; }

/* ═══════════════════════════════════ SPLIT ═══ */
.split-fs-wrapper {
  position: relative;
}
#split-section {
  background: transparent;
  height: 100svh;
  display: flex; align-items: center;
  position: sticky;
  top: 0;
  z-index: 1;
  overflow: hidden;
}
.split-img-left,
.split-img-right {
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(360px, 44vw, 680px);
  overflow: hidden;
}
.split-img-left  { left: 0; }
.split-img-right { right: 0; }
.split-img-left img,
.split-img-right img,
.split-img-left video,
.split-img-right video {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
/* Desktop browsers play the alpha video (webm + HEVC alpha).
   Mobile gets an animated WebP with TRUE alpha (iOS Safari 14+ plays animated
   WebP natively, including the alpha channel). The whole point of animated
   WebP here is that we avoid HEVC alpha decoding, which iOS does inconsistently. */
.split-anim-mobile { display: none; }
/* ویدیوی چپ بزرگ‌تر از راست رندر می‌شه چون محتوای داخلش فریم رو بیشتر پر می‌کنه — اسکیلش رو کم می‌کنیم */
.split-img-left video {
  transform: scale(0.78);
  transform-origin: bottom center;
}
.split-center-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(80px, 22vw, 380px);
  margin: 0 auto;
  padding: 0 clamp(200px, 26vw, 400px);
  width: 100%;
  padding-top: 20vh;
}
.split-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.split-col-center h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(54px, 8vw, 120px);
  line-height: 0.95;
  letter-spacing: 0.08em;
  color: #000000;
  text-align: center;
}
.split-col-center .pe-reveal { display: block; }
.split-col-center .pe-reveal + .pe-reveal {
  margin-top: clamp(20px, 3.5vh, 56px);
}
.split-col-left p,
.split-col-right p {
  font-size: clamp(12px, 1.2vw, 14px);
  color: var(--text-mid);
  line-height: 1.6;
}
.btn-round {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--lime);
  color: var(--dark);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.btn-round:hover { background: var(--dark); color: var(--lime); transform: scale(1.1); }

/* ═══════════════════════════════════ FULLSCREEN REVEAL ═══ */
#fullscreen-reveal {
  position: relative;
  z-index: 2;
  height: 100svh;
  overflow: hidden;
  background: transparent;
}
.fs-inner {
  position: absolute; inset: 0;
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}
.fs-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  background: linear-gradient(160deg, #1a2210, #2a3220);
}

/* ═══════════════════════════════════ PROJECTS GRID ═══ */
#projects-grid {
  background: transparent;
  padding: clamp(80px,12vh,140px) clamp(20px,5vw,80px);
}
.pg-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: clamp(40px, 6vh, 80px);
  text-align: center;
}
.pg-header h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 7vw, 100px);
  color: white;
  line-height: 0.9;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pg-sub { color: var(--lime); }
/* Expandable cards */
.cards {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: clamp(320px, 42vh, 480px);
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: 0 26px 70px rgba(0,0,0,0.55);
}
.card {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  cursor: pointer;
  transition: flex 0.5s ease;
  overflow: hidden;
  position: relative;
  will-change: flex;
}
.card:hover { flex: 3; }
.card a {
  display: block;
  width: 100%; height: 100%;
  text-decoration: none;
  color: inherit;
}
.card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: grayscale(100%);
  will-change: transform, filter;
  background: linear-gradient(90deg, #1a2210 25%, #2a3220 50%, #1a2210 75%);
  background-size: 200% 100%;
  animation: pg-shimmer 1.5s infinite;
}
@keyframes pg-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.card:hover img {
  transform: scale(1.1);
  filter: grayscale(0%);
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;
}
.card:hover::after { opacity: 1; }
.card-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.65);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
  z-index: 2;
}
.card:hover .card-title {
  background: rgba(255,255,255,0.85);
  color: #000;
  transform: translate(-50%, -50%) scale(1.05);
}
.card-desc {
  position: absolute;
  z-index: 3;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  padding: 8px 14px;
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  letter-spacing: 0.1em;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}
.card:hover .card-desc { transform: translateY(0); }
.card a:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.card a:focus-visible img { filter: grayscale(0%); }
@media (prefers-reduced-motion: reduce) {
  .card, .card img, .card-title, .card-desc, .card::after { transition: none; }
  .card img { animation: none; }
}

/* ── Card Video (hover preview) ── */
.card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.card:hover .card-video { opacity: 1; }

/* ── Card Play Badge ── */
.card-play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1.5px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.card-play-badge svg {
  width: 16px;
  height: 16px;
  margin-left: 3px;
}
/* badge fades out when video starts playing on hover */
.card:hover .card-play-badge { opacity: 0; }

/* ── Video Modal ── */
.vm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.vm-overlay.is-open {
  pointer-events: auto;
  opacity: 1;
}
.vm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.vm-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  transform: scale(0.94) translateY(20px);
  transition: transform 0.35s cubic-bezier(.22,1,.36,1);
}
.vm-overlay.is-open .vm-inner {
  transform: scale(1) translateY(0);
}
.vm-close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.vm-close:hover {
  background: rgba(255,255,255,0.18);
  transform: scale(1.1);
}
.vm-close svg { width: 18px; height: 18px; }
.vm-video-wrap {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
  aspect-ratio: 16 / 9;
}
.vm-video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}
.vm-caption {
  margin-top: 16px;
  text-align: center;
}
.vm-title {
  font-family: 'Cormorant', serif;
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,0.9);
  margin-bottom: 4px;
}
.vm-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
html[lang="fa"] .vm-title { font-family: 'YekanBakh', sans-serif; font-style: normal; letter-spacing: 0; }
html[lang="fa"] .vm-sub   { font-family: 'YekanBakh', sans-serif; letter-spacing: 0; text-transform: none; }
@media (max-width: 600px) {
  .vm-close { top: -42px; }
  .vm-video-wrap { border-radius: 6px; }
}
.pg-cta {
  margin-top: clamp(40px, 6vh, 60px);
  text-align: center;
}
.btn-view {
  display: inline-block;
  padding: 14px 36px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-sm);
  color: white;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: var(--transition);
}
.btn-view:hover { background: var(--lime); color: var(--dark); border-color: var(--lime); }

/* ═══════════════════════════════════ FEATURED ═══ */
#featured {
  background: transparent;
  padding: clamp(80px,12vh,140px) clamp(80px,12vw,200px);
  position: relative;
  overflow: visible;
}
.feat-canvas-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}
#featured-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.feat-inner {
  position: relative;
  z-index: 1;
}
.feat-top-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  margin-top: clamp(20px, 3vh, 40px);
  margin-bottom: clamp(40px, 6vh, 60px);
}
.feat-icon { font-size: 18px; }
.feat-layout {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
}
.feat-text { flex: 1; min-width: 240px; }
.feat-tag {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 16px;
}
.feat-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(80px, 16vw, 160px);
  line-height: 1.3;
  letter-spacing: 0em;
  margin-bottom: clamp(20px, 3vh, 32px);
  color: #000000;
}
.feat-text p {
  font-size: clamp(14px, 1.2vw, 16px);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
  margin-bottom: clamp(24px, 3.5vh, 40px);
}
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--dark);
  color: white;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: var(--transition);
}
.btn-primary:hover { background: var(--lime); color: var(--dark); }
.feat-img {
  flex: 1.4;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius-md);
  position: relative;
}
.feat-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  background: linear-gradient(135deg, #e0d8c8, #c8c0b0);
  transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}
.feat-img:hover img { transform: scale(1.04); }
.feat-detail-row { display: none; }

/* ═══════════════════════════════════ PARTNERS ═══ */
#partners {
  background: transparent;
  padding: clamp(80px,12vh,140px) 0;
  overflow: hidden;
}
.partners-inner { position: relative; }
.partners-text {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(30px, 5vw, 80px);
  padding: 0 clamp(80px,12vw,200px);
  margin-bottom: clamp(40px, 6vh, 60px);
}
.partners-text h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(84px, 12vw, 160px);
  line-height: 0.9;
  letter-spacing: 0.18em;
  text-align: center;
  width: 100%;
}
.pt-sub { color: var(--text-mid); }
.feat-sig-outer {
  position: absolute;
  bottom: clamp(-150px, -18vh, -80px);
  right: clamp(20px, 4vw, 60px);
  left: auto;
  pointer-events: none;
  z-index: 4;
  direction: ltr;
  overflow: visible;
}
.feat-sig-svg {
  width: 58vw;
  height: auto;
  display: block;
  overflow: visible;
}

.partners-text p {
  font-size: clamp(13px, 1.2vw, 15px);
  color: var(--text-mid);
  line-height: 1.7;
  max-width: 380px;
  padding-top: 12px;
}
.partners-logos-outer { overflow: hidden; direction: ltr; }
.partners-logos-inner {
  display: flex;
  align-items: center;
  width: max-content;
  direction: ltr;
  white-space: nowrap;
  animation: logos-scroll 22s linear infinite;
  padding: 20px 0;
}
.pt-logo {
  font-size: clamp(11px, 1.2vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mid);
  font-weight: 500;
  flex-shrink: 0;
  padding: 0 22px;
  margin: 0 clamp(15px, 2.5vw, 30px);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 4px;
  height: 38px;
  display: inline-flex; align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease, border-color 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease;
}
.pt-logo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
  z-index: -1;
}
.pt-logo:hover::before { transform: scaleX(1); }
.pt-logo:hover {
  color: var(--white);
  border-color: var(--dark);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.13);
}
@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

/* ═══════════════════════════════════ SOCIAL ═══ */
#social-section {
  background: transparent;
  padding: clamp(80px,12vh,140px) clamp(20px,5vw,10px);
  text-align: center;
  overflow: visible;
}
.social-camera {
  color: var(--text-mid);
  margin-bottom: 20px;
  display: flex; justify-content: center;
}
.social-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(56px, 9vw, 120px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  margin-bottom: clamp(40px, 7vh, 80px);
}
.wrapper {
  --card-trans-duration: 3800ms;
  --card-trans-easing: linear(0, 0.01 0.8%, 0.038 1.6%, 0.154 3.4%, 0.781 9.7%, 1.01 12.5%, 1.089 13.8%, 1.153 15.2%, 1.195 16.6%, 1.219 18%, 1.224 19.7%, 1.208 21.6%, 1.172 23.6%, 1.057 28.6%, 1.007 31.2%, 0.969 34.1%, 0.951 37.1%, 0.953 40.9%, 0.998 50.4%, 1.011 56%, 0.998 74.7%, 1);
  --card-border-radius: 10px;
  --card-width: 25vmin;
  --radius: 70vmin;
  --cards: 5;
  --arc-size: 0;
  --arc-center: 0.75;
  --arc-start: calc(var(--arc-center) - var(--arc-size) / 2);
  --arc-shift: 0;
  --arc-shift-delta: 0.005;

  position: relative;
  width: var(--card-width);
  aspect-ratio: 4/6;
  margin: 480px auto clamp(240px, 40vmin, 360px);
}
.wrapper.fan-open { --arc-size: 0.38; }
.wrapper > div {
  --card-i: 1;
  --arc-step: calc(var(--arc-size) / (var(--cards) - 1));

  position: absolute;
  width: var(--card-width);
  aspect-ratio: 4/6;
  background: white;
  border-radius: var(--card-border-radius);
  overflow: hidden;

  offset-path: circle(var(--radius) at 50% 100%);
  offset-distance: calc(
    (var(--arc-start) + (var(--card-i) - 1) * var(--arc-step) + var(--arc-shift)) * 100%
  );
  offset-rotate: auto;
  offset-anchor: 50% 0%;
  transition: all var(--card-trans-duration) var(--card-trans-easing);
}
.wrapper.is-animating > div { transition: none; }
.wrapper > div:nth-child(1) { --card-i: 1; z-index: 1; }
.wrapper > div:nth-child(2) { --card-i: 2; z-index: 3; }
.wrapper > div:nth-child(3) { --card-i: 3; z-index: 4; }
.wrapper > div:nth-child(4) { --card-i: 4; z-index: 3; }
.wrapper > div:nth-child(5) { --card-i: 5; z-index: 1; }
.wrapper > div:hover {
  offset-anchor: 50% 10%;
}
.wrapper > div:hover + div             { --arc-shift: calc(var(--arc-shift-delta) * 2); }
.wrapper > div:hover + div + div       { --arc-shift: calc(var(--arc-shift-delta) * 1); }
.wrapper > div:has(+ *:hover)          { --arc-shift: calc(var(--arc-shift-delta) * -2); }
.wrapper > div:has(+ * + *:hover)      { --arc-shift: calc(var(--arc-shift-delta) * -1); }
.wrapper > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.social-follow-text {
  font-size: clamp(13px, 1.3vw, 16px);
  color: var(--text-mid);
  margin-bottom: 20px;
}
.social-links {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3vw, 48px);
}
.social-links a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dark);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}
.social-links a:hover { border-color: var(--dark); }

/* ═══════════════════════════════════ FOOTER ═══ */
#footer {
  background: transparent;
  color: white;
  position: relative;
  overflow: hidden;
}
.footer-wrap { padding: 0; }
.footer-tagline-block {
  position: relative;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(60px,8vh,100px) clamp(20px,5vw,80px);
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 100%, rgba(198,241,53,0.18) 0%, transparent 65%);
}
.footer-hero-img {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: clamp(220px, 30vw, 420px);
  object-fit: cover;
  object-position: top;
  opacity: 0.25;
  pointer-events: none;
}
.footer-logo-mark {
  position: absolute;
  top: clamp(30px, 4vh, 50px); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.footer-mz {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.4);
}
.footer-sig-svg { width: 50px; opacity: 0.4; }
.footer-tagline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 1;
  letter-spacing: 0.02em;
  position: relative; z-index: 1;
  text-align: center;
  width: 100%;
}
.footer-tagline-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(14px, 1.5vw, 20px);
  color: rgba(255,255,255,0.55);
  text-align: center;
  /* ── Position control ──────────────────────────
     margin-top  → فاصله از خط بالا
     margin-bottom → فاصله تا پایین
  ─────────────────────────────────────────────── */
  margin-top: 34px;
  margin-bottom: 0;
  letter-spacing: 0.04em;
  width: 100%;
}
html[lang="fa"] .footer-tagline-sub {
  font-family: 'Morabba', sans-serif;
  direction: rtl;
}
.footer-ticker-outer {
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 10px 0;
  background: rgba(0,0,0,0.3);
}
.footer-ticker-inner {
  display: flex; align-items: center; gap: 40px;
  white-space: nowrap;
  animation: logos-scroll 22s linear infinite;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.footer-ticker-inner span { flex-shrink: 0; }
.footer-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  padding: clamp(80px,14vh,160px) clamp(20px,5vw,80px);
  min-height: 60vh;
}
.footer-nav-col {
  display: flex; flex-direction: column; gap: 10px;
}
.footer-nav-right { align-items: flex-end; text-align: right; }
.fn-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 8px;
  display: block;
}
.footer-nav-col a {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(24px, 3.5vw, 52px);
  letter-spacing: 0.02em;
  color: white;
  transition: color 0.2s;
  line-height: 1;
}
.footer-nav-col a:hover { color: var(--lime); }
.footer-hero-center {
  width: clamp(120px, 16vw, 220px);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 2/3;
}
.footer-center-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  filter: grayscale(0.3);
}
.btn-enquiry {
  display: block;
  margin: 0 auto clamp(30px, 4vh, 50px);
  width: fit-content;
  background: var(--lime);
  color: var(--dark);
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: var(--transition);
}
.btn-enquiry:hover { background: white; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px clamp(20px,5vw,80px);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.06em;
}
.footer-bottom div { display: flex; gap: 24px; }
.footer-bottom a { color: rgba(255,255,255,0.3); transition: color 0.2s; }
.footer-bottom a:hover { color: white; }

/* ═══════════════════════════════════ WIPE REVEAL ANIMATION ═══ */
.has-animation {
  position: relative;
  display: block;
  overflow: hidden;
}
.has-animation > h2,
.has-animation > .feat-title {
  opacity: 0;
}
.has-animation.animate-in > h2,
.has-animation.animate-in > .feat-title {
  animation: wipeTextReveal 0.1s 1.1s forwards;
}
.has-animation.animate-in::before,
.has-animation.animate-in::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}
.has-animation.animate-in::before { background-color: var(--lime); }
.has-animation.animate-in::after  { background-color: var(--dark); animation-delay: 0.5s; }
.has-animation.animation-ltr.animate-in::before { animation: wipeRevealLTR 1.8s ease; }
.has-animation.animation-ltr.animate-in::after  { animation: wipeRevealLTR 1s 0.6s ease; }
.has-animation.animation-rtl.animate-in::before { animation: wipeRevealRTL 1.8s ease; }
.has-animation.animation-rtl.animate-in::after  { animation: wipeRevealRTL 1s 0.6s ease; }

@keyframes wipeRevealRTL {
  0%   { width: 0;    right: 0; }
  65%  { width: 100%; right: 0; }
  100% { width: 0;    right: 100%; }
}
@keyframes wipeRevealLTR {
  0%   { width: 0;    left: 0; }
  65%  { width: 100%; left: 0; }
  100% { width: 0;    left: 100%; }
}
@keyframes wipeTextReveal {
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .has-animation > h2,
  .has-animation > .feat-title { opacity: 1; }
  .has-animation.animate-in::before,
  .has-animation.animate-in::after { display: none; }
}

/* ═══════════════════════════════════ PERSIAN (RTL) ═══ */
html[lang="fa"] {
  direction: rtl;
}
html[lang="fa"] body {
  font-family: 'YekanBakh', -apple-system, sans-serif;
}
html[lang="fa"] .logo-text,
html[lang="fa"] .nav-big-link,
html[lang="fa"] .reveal-headline,
html[lang="fa"] .feat-title,
html[lang="fa"] .footer-tagline,
html[lang="fa"] .social-heading,
html[lang="fa"] .pg-header h2,
html[lang="fa"] .partners-text h2,
html[lang="fa"] .split-col-left h2,
html[lang="fa"] .split-col-right h2 {
  font-family: 'YekanBakh', sans-serif;
}
html[lang="fa"] .split-col-center h2 {
  font-family: 'IRANSans', sans-serif;
  font-weight: 700;
}
html[lang="fa"] .header-monogram,
html[lang="fa"] .footer-mz,
html[lang="fa"] .pt-sig-svg text { font-family: 'Dancing Script', cursive; }
html[lang="fa"] .gallery-quote-wrap { text-align: left; margin-left: 0; margin-right: auto; }
html[lang="fa"] .split-col-right { text-align: left; align-items: flex-start; }
html[lang="fa"] .footer-nav-right { align-items: flex-start; text-align: left; }

/* ── My Works / My Life — more spacing + white text in Persian ── */
html[lang="fa"] .split-col-left,
html[lang="fa"] .split-col-right {
  gap: clamp(32px, 6vh, 56px);
}
html[lang="fa"] .split-col-left h2,
html[lang="fa"] .split-col-right h2 {
  line-height: 1.05;
  color: #000000;
}
/* خطوط متن وسط در فارسی — line-height مناسب چون فاصله مشترک بالا اعمال می‌شه */
html[lang="fa"] .split-col-center h2 {
  line-height: 1.6;
  color: #000000;
}
/* جلوگیری از کراپ‌شدن ascender حروف فارسی توسط overflow:hidden در pe-reveal */
html[lang="fa"] .split-col-center .pe-reveal {
  line-height: 1.6;
  padding-top: 0.15em;
}
/* per-line scaling for Persian — equal visual width per column */
html[lang="fa"] .split-col-left  .pe-reveal-line-1 { font-size: 1em;    }   /* واقعیت */
html[lang="fa"] .split-col-left  .pe-reveal-line-2 { font-size: 1em;    }   /* افزوده */
html[lang="fa"] .split-col-right .pe-reveal-line-1 { font-size: 1em;    }   /* اتوماسیون */
html[lang="fa"] .split-col-right .pe-reveal-line-2 { font-size: 1.55em; }   /* سیستم */
html[lang="fa"] .split-col-left p,
html[lang="fa"] .split-col-right p {
  color: rgba(255,255,255,0.75);
}

/* ── Featured title — consistent sizing, prevent top clipping ── */
html[lang="fa"] .feat-title {
  line-height: 0.6;
  color: #000000;
}
html[lang="fa"] .feat-title span {
  display: block;
  white-space: nowrap;
}
html[lang="fa"] #featured .has-animation {
  padding-top: 44px;
}


/* ── Partners / Clients heading — prevent top clipping ── */
html[lang="fa"] #partners .has-animation {
  padding-top: 36px;
}
html[lang="fa"] .partners-text h2 {
  letter-spacing: 0;
  word-break: keep-all;
  white-space: nowrap;
  font-size: clamp(48px, 8vw, 160px);
}
html[lang="fa"] .pt-logo {
  letter-spacing: 0;
  white-space: nowrap;
}


/* ── Social heading — prevent top clipping ── */
html[lang="fa"] #social-section .has-animation {
  padding-top: 48px;
}

/* ── Footer tagline — smaller size for single-line Persian + fix top clipping ── */
html[lang="fa"] .footer-tagline {
  font-size: clamp(36px, 6vw, 90px);
}
html[lang="fa"] #footer .has-animation {
  padding-top: 32px;
}
html[lang="fa"] .footer-tagline-block {
  overflow: visible;
  padding-top: clamp(80px, 14vh, 140px);
}

/* ─── Mobile Image Accordion — hidden on desktop ─── */
.feat-accordion-mobile { display: none; }

/* ════════════════════════════════════════════════════════════════════
   ★ ★ ★  FEATURED — تنظیمات موبایل  ★ ★ ★
   ══ هر دو زبان: فارسی و انگلیسی ═══════════════════════════════════
   ─────────────────────────────────────────────────────────────────
   باکس نمونه طراحی سایت
   --mob-box-w      عرض باکس        مثال: 42% | 170px | 45vw
   --mob-box-ar     نسبت ارتفاع     مثال: 3/4 | 4/5 | 1/1
   --mob-box-top    فاصله از بالا   مثال: 30px  ← بیشتر = پایین‌تر
   --mob-box-right  فاصله از راست   مثال: 0px | auto
   --mob-box-left   فاصله از چپ    مثال: auto | 0px
   --mob-box-order  ترتیب نمایش    1 = چپ | 2 = راست
   ─────────────────────────────────────────────────────────────────
   عنوان (سطح جهانی طراحی سایت)
   --mob-ttl-fs     اندازه فونت انگلیسی   مثال: clamp(32px, 11vw, 50px)
   --mob-ttl-fs-fa  اندازه فونت فارسی     مثال: clamp(28px, 8vw, 44px)
   --mob-ttl-top    فاصله از بالا         مثال: 0px
   --mob-ttl-order  ترتیب نمایش          1 = چپ | 2 = راست

   نکته: برای نوشتن چند کلمه در یک خط، می‌توانید در HTML داخل هر
   <span> چند کلمه بنویسید — متن دیگر به یک کلمه محدود نیست.
   ══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════ MOBILE ═══ */
@media (max-width: 768px) {
  :root {
    /* ─ باکس نمونه طراحی سایت ─ */
    --mob-box-w:     90%;          /* عرض باکس */
    --mob-box-ar:    4/3;          /* نسبت ارتفاع به عرض */
    --mob-box-top:   30px;         /* فاصله از بالا */
    --mob-box-right: auto;         /* فاصله از راست */
    --mob-box-left:  auto;         /* فاصله از چپ */
    --mob-box-order: 2;            /* 1=چپ | 2=راست */

    /* ─ عنوان سطح جهانی ─ */
    --mob-ttl-fs:    clamp(32px, 11vw, 50px); /* اندازه فونت EN */
    --mob-ttl-fs-fa: clamp(28px, 8vw, 44px);  /* اندازه فونت FA */
    --mob-ttl-top:   0px;          /* فاصله از بالا */
    --mob-ttl-order: 1;            /* 1=چپ | 2=راست */

    /* ─ فونت عنوان موبایل ─ */
    /* انتخاب کن: 'YekanBakh' | 'Morabba' | 'IRANSans' | 'IRANYekan' | 'Bebas Neue' | 'DM Sans' */
    --mob-ttl-font-fa: 'moraba', sans-serif;  /* فونت FA */
    --mob-ttl-font-en: 'Bebas Neue', sans-serif; /* فونت EN */
  }

  /* Canvas runs on mobile — sections are transparent, background comes from canvas */
  body { background: transparent; }

  body { cursor: auto; }
  .cursor, .cursor-follower { display: none; }
  button { cursor: pointer; }

  .logo-wrap { display: none; }
  .header-monogram { display: none; }
  .btn-work span:last-child { display: none; }
  /* Keep hamburger at right edge */
  .header-actions { margin-left: auto; }
  /* Move lang toggle to left side (where logo was) */
  .lang-toggle { position: absolute; left: clamp(20px, 4vw, 48px); top: 50%; transform: translateY(-50%); }

  #hero { height: 100svh; }
  .hero-photo-wrap { inset: 0; width: 100%; height: 100%; }
  .hero-info-card { display: none; }
  #sig-label { display: none; }

  /* Mobile hero name overlay */
  .hero-mobile-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 16%;
    left: 0; right: 0;
    z-index: 7;
    text-align: center;
    pointer-events: none;
  }
  .hero-mobile-monogram {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 30px;
    color: rgba(26, 34, 16, 0.8);
    letter-spacing: 0.1em;
    line-height: 1;
    margin-bottom: 4px;
  }
  .hero-mobile-name {
    font-family: 'Morabba', sans-serif;
    font-size: clamp(40px, 12vw, 64px);
    color: rgba(26, 34, 16, 0.92);
    letter-spacing: 0em;
    line-height: 1;
  }
  .hero-mobile-subtitle {
    margin-top: 4px;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    letter-spacing: 0em;
    text-transform: uppercase;
    color: rgba(26, 34, 16, 0.5);
  }

  /* White panel: use same absolute positioning as desktop so GSAP scale behaves identically */
  .white-panel { position: absolute; inset: 0; }
  /* Image: anchor face area so clip reveals center square around the face */
  /* Center face in the scaled-down card */
  .panel-photo { object-position: center 30%; }
  /* ══════════════════════════════════════════════════════════
     ★ ★ ★  HUD Visor — تنظیمات موبایل  ★ ★ ★
     ══════════════════════════════════════════════════════════ */
  .hud-visor-overlay {
    top: 30%;           /* ★ MOBILE — فاصله از بالا */
    left: 50%;          /* ★ MOBILE — موقعیت افقی (50% = وسط‌چین) */
    width: 260%;         /* ★ MOBILE — عرض */
    height: 72%;        /* ★ MOBILE — ارتفاع */
  }
  /* ══════════════════════════════════════════════════════════ */
  /* Signature scales with panel — reduce base size */
  .signature-svg { width: 200%; max-width: 600px; top: 62%; }
  /* Show marquee text rows at bottom of screen (revealed as panel shrinks) */
  .marquee-bg { display: flex; justify-content: flex-end; padding-bottom: 4svh; }
  #transition-section { height: auto; min-height: 100svh; }

  /* ── SPLIT: فاصله متن MY WORK/MY LIFE از بالا — عدد را تغییر بده ── */
  /* ارتفاع رو کم می‌کنیم تا فضای سفید پایین حذف بشه — موبایل */
  #split-section {
    position: sticky; top: 0;
    height: 70svh;       /* ← ارتفاع split در موبایل (پیش‌فرض 100svh بود) */
    min-height: unset;
    flex-direction: row; padding: 0; align-items: flex-start;
    padding-top: 60px;
    overflow: hidden;
  }

  /* ── FULLSCREEN: ارتفاع موبایل با svh ── */
  #fullscreen-reveal {
    height: 100svh;
  }

  /* ── SPLIT: تنظیمات پوزیشن عکس چپ ── */
  .split-img-left {
    display: block;
    width: 66vw;
    --split-left-top:    clamp(150px, 22svh, 220px); /* ↕ فاصله از بالا   */
    --split-left-bottom: auto;                        /* ↕ فاصله از پایین */
    --split-left-left:   0px;                         /* ↔ فاصله از چپ    */
    --split-left-right:  auto;                        /* ↔ فاصله از راست  */
    top:    var(--split-left-top);
    bottom: var(--split-left-bottom);
    left:   var(--split-left-left);
    right:  var(--split-left-right);
  }

  /* ── SPLIT: تنظیمات پوزیشن عکس راست ── */
  .split-img-right {
    display: block;
    width: 66vw;
    --split-right-top:    clamp(150px, 22svh, 220px); /* ↕ فاصله از بالا   */
    --split-right-bottom: auto;                        /* ↕ فاصله از پایین */
    --split-right-left:   auto;                        /* ↔ فاصله از چپ    */
    --split-right-right:  0px;                         /* ↔ فاصله از راست  */
    top:    var(--split-right-top);
    bottom: var(--split-right-bottom);
    left:   var(--split-right-left);
    right:  var(--split-right-right);
  }
  /* اگر کانتینر شامل ویدیو بود، عرض کمتر — موبایل */
  .split-img-right:has(video) { width: 48vw; }
  .split-img-left:has(video)  { width: 48vw; }
  .split-img-left img, .split-img-right img,
  .split-img-left video, .split-img-right video { object-position: top center; }
  /* Swap: animated WebP plays on mobile (true alpha), desktop alpha-video hides */
  .split-img-left .split-video-desktop,
  .split-img-right .split-video-desktop { display: none; }
  .split-img-left .split-anim-mobile,
  .split-img-right .split-anim-mobile {
    display: block;
    /* Container has bottom:auto on mobile → height is content-driven. The
       inherited "height: 100%" of replaced elements resolves to 0 in iOS
       Safari when parent height is undefined, so the img would collapse and
       look like an empty white box. Let intrinsic dimensions drive height. */
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
  }
  .split-center-content { padding: 0 20px; flex-direction: row; gap: 0; justify-content: center; align-items: center; position: relative; z-index: 2; }
  .split-col-left { max-width: 48%; align-items: flex-start; text-align: left; }
  .split-col-right { max-width: 48%; align-items: flex-end; text-align: right; }
  .split-col-center h2 { font-size: clamp(28px, 7vw, 56px); }
  html[lang="fa"] .split-col-left h2, html[lang="fa"] .split-col-right h2,
  html[lang="fa"] .split-col-center h2 { font-size: clamp(22px, 7vw, 36px); }

  /* ════════════════════════════════════════════════════════
     FEATURED SECTION — موبایل (انگلیسی)
     هر خط یک المان مستقل است — فقط همان خط را تغییر دهید
     ════════════════════════════════════════════════════════ */

  /* ── کانتینر اصلی بخش ── */
  #featured {
    padding-top:    clamp(20px, 10vh, 50px); /* ↕ فاصله از بالای بخش    */
    padding-bottom: clamp(60px, 10vh, 100px); /* ↕ فاصله از پایین بخش   */
    padding-left:   clamp(16px, 4vw, 32px);  /* ↔ فاصله از چپ بخش      */
    padding-right:  clamp(16px, 4vw, 32px);  /* ↔ فاصله از راست بخش    */
  }

  /* ── لایه‌بندی — موبایل: عنوان بالا (تمام عرض)، accordion پایین ── */
  .feat-layout {
    flex-direction: column;   /* column = زیر هم */
    align-items:    flex-start;
    gap:            10px;
  }

  /* ── کانتینر عنوان — تمام عرض، ردیف اول، وسط‌چین ── */
  .feat-text {
    flex:         0 0 auto;
    width:        100%;
    min-width:    0;
    order:        -1;
    margin-top:   0px;
    margin-bottom: 8px;
    text-align:   center;     /* وسط‌چین کل کانتینر */
    display:      flex;
    justify-content: center;
  }

  /* ── عنوان اصلی — یک خط، وسط‌چین ── */
  .feat-title {
    font-size:      clamp(18px, 4.8vw, 28px);
    font-family:    var(--mob-ttl-font-en);    /* ← از --mob-ttl-font-en */
    line-height:    1.2;
    letter-spacing: 0em;
    word-spacing:   -0.05em;                   /* فاصله کمتر بین کلمات */
    margin-bottom:  0;
    margin-top:     0px;
    white-space:    nowrap;
    text-align:     center;                    /* وسط‌چین */
    width:          100%;
  }
  .feat-title span {
    display:     inline;
    white-space: nowrap;
  }
  /* فاصله کوچک بین span‌ها (جای <br>) */
  .feat-title span::after { content: '\2009'; } /* thin space */
  .feat-title span:last-child::after { content: ''; }
  .feat-title br { display: none; }

  /* ── دکمه VIEW THE WORK (کنار عنوان) — پنهان در موبایل ── */
  .feat-text > .btn-primary {
    display: none; /* none=پنهان | inline-flex=نمایش                       */
  }

  /* ── پاراگراف زیر عنوان (کنار عنوان) — پنهان در موبایل ── */
  .feat-text p {
    display: none; /* none=پنهان | block=نمایش                             */
  }

  /* ── عکس اصلی (ستون راست) — پنهان در موبایل، جای آن accordion ── */
  .feat-img {
    display: none;
  }

  /* ── Mobile Image Accordion ── */
  .feat-accordion-mobile {
    display:        flex;
    flex-direction: row;
    gap:            3px;
    height:         260px;
    overflow:       hidden;
    border-radius:  12px;
    flex:           0 0 auto;
    width:          100%;     /* تمام عرض چون زیر عنوان است */
    margin-top:     0px;
    margin-right:   0;
    margin-left:    0;
    margin-bottom:  0px;
    order:          1;
  }
  .fam-item {
    position:        relative;
    flex:            0 0 13px;
    height:          100%;
    border-radius:   8px;
    overflow:        hidden;
    cursor:          pointer;
    background-size: cover;
    background-position: center;
    transition:      flex 0.55s cubic-bezier(0.25,0.46,0.45,0.94);
  }
  .fam-item.fam-active {
    flex: 1;
  }
  .fam-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%);
    pointer-events: none;
  }
  .fam-item:not(.fam-active) .fam-overlay {
    background: rgba(0,0,0,0.35);
  }
  .fam-caption {
    position:   absolute;
    bottom:     10px;
    left:       50%;
    transform:  translateX(-50%);
    color:      white;
    font-size:  10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    opacity:    0;
    transition: opacity 0.35s ease 0.2s;
    pointer-events: none;
  }
  .fam-item.fam-active .fam-caption {
    opacity: 1;
  }

  /* ── ردیف جزئیات پایین (توضیح + عکس‌های کوچک) ── */
  .feat-detail-row {
    display:     flex;        /* flex=نمایش | none=پنهان                   */
    flex-direction: row;      /* row=کنار هم | column=زیر هم               */
    gap:         16px;        /* فاصله بین ستون توضیح و عکس‌ها             */
    align-items: flex-start;
    margin-top:  28px;        /* ↕ فاصله از بالای ردیف                    */
  }

  /* ── کانتینر متن توضیح (در ردیف پایین) ── */
  .feat-detail-text {
    flex:      1;             /* عرض نسبی                                  */
    min-width: 0;
  }

  /* ── پاراگراف توضیح (در ردیف پایین) ── */
  .feat-detail-text p {
    font-size:     13px;      /* اندازه فونت                               */
    line-height:   1.65;      /* فاصله بین خطوط                            */
    color:         var(--text-mid);
    margin-bottom: 18px;      /* فاصله زیر پاراگراف                        */
    margin-top:    0px;       /* فاصله بالای پاراگراف                      */
  }

  /* ── دکمه VIEW THE WORK (در ردیف پایین) ── */
  .feat-detail-btn {
    font-size:   11px;        /* اندازه فونت دکمه                          */
    padding:     10px 18px;   /* فضای داخلی دکمه                           */
    margin-top:  0px;         /* فاصله از بالای دکمه                       */
  }

  /* ── کانتینر عکس‌های کوچک (در ردیف پایین) ── */
  .feat-detail-images {
    flex:           0 0 42%;  /* عرض ستون عکس‌ها                           */
    display:        flex;
    flex-direction: column;
    gap:            8px;      /* فاصله بین دو عکس کوچک                    */
  }

  /* ── عکس‌های کوچک (در ردیف پایین) ── */
  .feat-detail-images img {
    width:        100%;       /* عرض هر عکس                                */
    aspect-ratio: 4/3;        /* نسبت ارتفاع به عرض                        */
    object-fit:   cover;
    border-radius: 8px;       /* گوشه‌های گرد                              */
  }

  /* ── عکس کوچک دوم — پنهان ── */
  .feat-detail-images img:nth-child(2) {
    display: none; /* none=پنهان | block=نمایش                             */
  }

  /* ════════════════════════════════════════════════════════
     FEATURED SECTION — موبایل فارسی (RTL)
     این بلاک فقط در حالت فارسی اعمال می‌شود
     ════════════════════════════════════════════════════════ */

  /* ── wrapper انیمیشن — overflow را باز می‌کند تا حروف کات نشوند ── */
  html[lang="fa"] #featured .has-animation {
    overflow: visible;
  }

  /* ── کانتینر اصلی — فارسی موبایل ── */
  html[lang="fa"] #featured {
    padding-top:    clamp(60px, 10vh, 100px);
    padding-bottom: clamp(60px, 10vh, 100px);
    padding-right:  clamp(16px, 4vw, 32px);  /* ↔ راست (=شروع در RTL)    */
    padding-left:   clamp(16px, 4vw, 32px);  /* ↔ چپ                      */
  }

  /* ── لایه‌بندی — فارسی موبایل: عنوان بالا، accordion پایین ── */
  html[lang="fa"] .feat-layout {
    flex-direction: column;
    gap:            10px;
  }

  /* ── عنوان — فارسی موبایل: یک خط، وسط‌چین ── */
  html[lang="fa"] .feat-title {
    font-size:      clamp(18px, 4.8vw, 28px);
    font-family:    var(--mob-ttl-font-fa);   /* ← از --mob-ttl-font-fa */
    line-height:    1.2;
    letter-spacing: 0em;
    word-spacing:   -0.05em;                  /* فاصله کمتر بین کلمات */
    padding-bottom: 0;
    overflow:       visible;
    margin-bottom:  0;
    margin-top:     0px;
    text-align:     center;                   /* وسط‌چین */
    white-space:    nowrap;
  }
  html[lang="fa"] .feat-title span {
    display:     inline;
    white-space: nowrap;
  }

  /* ── accordion — فارسی موبایل: تمام عرض ── */
  html[lang="fa"] .feat-accordion-mobile {
    width:  100%;
    order:  1;
  }

  /* ── ردیف جزئیات — فارسی موبایل ── */
  html[lang="fa"] .feat-detail-row {
    display:        flex;
    flex-direction: row-reverse; /* فارسی: ترتیب معکوس                    */
    gap:            16px;
    margin-top:     28px;
  }

  /* ── پاراگراف توضیح — فارسی موبایل ── */
  html[lang="fa"] .feat-detail-text p {
    font-size:     13px;
    line-height:   1.75;      /* فارسی نیاز به line-height بیشتر دارد     */
    text-align:    right;
    margin-bottom: 18px;
  }

  .partners-text { flex-wrap: wrap; }
  .feat-sig-svg { width: clamp(300px, 88vw, 560px); }
  .feat-sig-outer { bottom: clamp(20px, 4vh, 60px); }

  .footer-nav { grid-template-columns: 1fr; }
  .footer-hero-center { display: none; }
  .footer-nav-right { align-items: flex-start; text-align: left; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  #text-reveal { min-height: auto; padding-bottom: 40px; }

  .wrapper {
    --card-width: 30vmin;
    --radius: 75vmin;
    margin-top: calc(var(--radius) - var(--card-width) * 1.5 - clamp(30px, 4vh, 50px));
    margin-bottom: clamp(40px, 8vmin, 80px);
  }
  .wrapper.fan-open { --arc-size: 0.46; }
  .social-follow-text { display: none; }
  .social-links { display: none; }
}

@media (max-width: 480px) {
  .reveal-headline { font-size: 38px; }
  .social-heading { font-size: 52px; }
  .footer-tagline { font-size: 28px; }
  html[lang="fa"] .footer-tagline { font-size: 26px; }
  .pg-header { text-align: center; }
  .pg-header h2 { font-size: 28px; white-space: nowrap; }
  html[lang="fa"] .pg-header h2 { font-size: 26px; }
}

/* ══════════════════════════════ WAVE PATH ══ */
.wave-path-wrap {
  position: relative;
  width: 70vw;
  height: 1px;
  margin: 24px 0 0;
  align-self: center;
  color: rgba(255,255,255,0.35);
}
.wave-path-hover {
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 10;
  cursor: ns-resize;
  transition: top 0.15s ease, height 0.15s ease;
}
.wave-path-wrap:hover .wave-path-hover {
  top: -150px;
  height: 300px;
}
.wave-path-svg {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 300px;
  overflow: visible;
}

/* ═══════════════════════════════════ UTIL ═══ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   HERO WAVE — تنظیمات اصلی (اینجا ویرایش کن)
   ══════════════════════════════════════════════════════════════ */
:root {
  /* ── فونت‌ها ── */
  --hw-font-en:        'DM Sans', sans-serif;   /* فونت انگلیسی */
  --hw-font-fa:        'YekanBakh', sans-serif; /* فونت فارسی   */

  /* ── عنوان انگلیسی ── */
  --hw-title-en-size:  clamp(22px, 5vw, 40px); /* اندازه */
  --hw-title-en-weight:600;                     /* وزن    */
  --hw-title-en-color: #ffffff;                 /* رنگ    */

  /* ── عنوان فارسی ── */
  --hw-title-fa-size:  clamp(22px, 4.5vw, 42px);
  --hw-title-fa-weight:700;
  --hw-title-fa-color: #ffffff;

  /* ── زیرعنوان انگلیسی ── */
  --hw-sub-en-size:    clamp(13px, 1.4vw, 16px);
  --hw-sub-en-weight:  400;
  --hw-sub-en-color:   rgba(255,255,255,0.6);

  /* ── زیرعنوان فارسی ── */
  --hw-sub-fa-size:    clamp(12px, 1.3vw, 15px);
  --hw-sub-fa-weight:  400;
  --hw-sub-fa-color:   rgba(255,255,255,0.6);

  /* ── textarea ── */
  --hw-input-size-en:  14px;
  --hw-input-size-fa:  14px;
  --hw-input-color:    #ffffff;
}
/* ══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════ HERO WAVE OVERLAY ═══ */
.hero-wave-section { min-height: 60vh; }

.hero-wave-title {
  color:        var(--hw-title-en-color);
  font-size:    var(--hw-title-en-size);
  font-weight:  var(--hw-title-en-weight);
  font-family:  var(--hw-font-en);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  text-shadow: 0 1px 24px rgba(31,61,188,0.3);
}

.hero-wave-subtitle {
  color:       var(--hw-sub-en-color);
  font-size:   var(--hw-sub-en-size);
  font-weight: var(--hw-sub-en-weight);
  font-family: var(--hw-font-en);
  margin: 0 0 32px;
}

.hero-wave-form { display: flex; justify-content: center; }

.hero-wave-input-wrap {
  position: relative;
  width: 100%;
  max-width: 720px;
}

.hero-wave-input-border {
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04), rgba(0,0,0,0.2));
}

.hero-wave-textarea {
  width: 100%;
  height: 140px;
  resize: none;
  border-radius: 14px;
  background: rgba(15,15,20,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  padding: 16px 60px 16px 16px;
  outline: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.hero-wave-textarea::placeholder { color: rgba(255,255,255,0.35); }

.hero-wave-textarea:focus {
  border-color: rgba(31,61,188,0.5);
  box-shadow: 0 0 0 2px rgba(31,61,188,0.2);
}

.hero-wave-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f0f2ff;
  color: #111;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.hero-wave-btn:hover { background: #fff; }

.hero-wave-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

/* ════════════════════════════════════════════════════════════
   HERO WAVE — تنظیمات متن (انگلیسی و فارسی)
   ════════════════════════════════════════════════════════════

   عنوان اصلی (انگلیسی)
   فایل: styles.css → .hero-wave-title
     font-size  : clamp(32px, 5vw, 56px)   ← اندازه (min, preferred, max)
     font-weight: 600
     color      : #fff

   زیرعنوان (انگلیسی)
   فایل: styles.css → .hero-wave-subtitle
     font-size  : clamp(13px, 1.4vw, 16px)
     color      : rgba(255,255,255,0.6)

   ════════════════════════════════════════════════════════════ */

/* فارسی — عنوان */
html[lang="fa"] .hero-wave-title {
  font-size:   var(--hw-title-fa-size);
  font-weight: var(--hw-title-fa-weight);
  color:       var(--hw-title-fa-color);
  font-family: var(--hw-font-fa);
  letter-spacing: 0;
}

/* فارسی — زیرعنوان */
html[lang="fa"] .hero-wave-subtitle {
  font-size:   var(--hw-sub-fa-size);
  font-weight: var(--hw-sub-fa-weight);
  color:       var(--hw-sub-fa-color);
  font-family: var(--hw-font-fa);
}

/* فارسی — textarea */
html[lang="fa"] .hero-wave-textarea {
  font-family: var(--hw-font-fa);
  font-size:   var(--hw-input-size-fa);
  direction: rtl;
  text-align: right;
}

/* ═══════════════════════════════════ ABOUT ═══ */
#about-section {
  padding: clamp(80px, 12vw, 160px) clamp(24px, 6vw, 120px);
  overflow: hidden;
}
.about-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
.about-left { display: flex; flex-direction: column; gap: 32px; }
.about-eyebrow {
  display: none;
}
.about-eyebrow-line { width: 32px; height: 1px; background: var(--lime); }
.about-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(64px, 8vw, 110px);
  line-height: 1;
  color: var(--text-dark);
  margin: 0;
  padding-bottom: 0.1em;
}
.about-heading span { color: var(--lime); }
.about-bio {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.8;
  color: var(--text-mid);
  max-width: 480px;
  margin: 0;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.about-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4vw, 52px);
  color: var(--lime-dark);
  line-height: 1;
  margin: 0 0 4px;
}
.about-stat-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
}
.about-right { position: relative; }
.about-img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3/4;
}
.about-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.about-img-badge {
  position: absolute;
  bottom: 24px; left: 24px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  display: flex; flex-direction: column; gap: 2px;
}
.about-img-badge-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px; color: var(--text-dark); letter-spacing: 0.05em;
}
.about-img-badge-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px; color: var(--text-light);
  letter-spacing: 0.1em; text-transform: uppercase;
}
#about-section .ab-fade {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
#about-section.ab-visible .ab-fade { opacity: 1; transform: translateY(0); }
#about-section.ab-visible .ab-fade:nth-child(2) { transition-delay: 0.1s; }
#about-section.ab-visible .ab-fade:nth-child(3) { transition-delay: 0.2s; }
#about-section.ab-visible .ab-fade:nth-child(4) { transition-delay: 0.3s; }
#about-section.ab-visible .about-right         { transition-delay: 0.15s; }
html[lang="fa"] .about-bio { font-family: 'YekanBakh', sans-serif; direction: rtl; text-align: right; color: #000; }
html[lang="fa"] .about-eyebrow { flex-direction: row-reverse; font-family: 'YekanBakh', sans-serif; color: #000; }
html[lang="fa"] .about-stat-label { font-family: 'YekanBakh', sans-serif; letter-spacing: 0; color: #000; }
html[lang="fa"] .about-stat-num { font-family: 'YekanBakh', sans-serif; color: #000; }
/* ── About Stats Number Position Control ───────────────────
   فقط عدد جابجا میشه، متن زیرش ثابت میمونه
   padding-left = به راست  |  padding-right = به چپ
   ─────────────────────────────────────────────────────── */
/* EN */
html:not([lang="fa"]) .about-stats > div:nth-child(1) .about-stat-num { padding-left: 16px; }   /* EN +5   */
html:not([lang="fa"]) .about-stats > div:nth-child(2) .about-stat-num { padding-right: 14px; }  /* EN +200 */
html:not([lang="fa"]) .about-stats > div:nth-child(3) .about-stat-num { padding-left: 18px; }   /* EN 7    */
/* FA */
html[lang="fa"] .about-stats > div:nth-child(1) .about-stat-num { padding-right: 0px; }  /* FA ۵+   */
html[lang="fa"] .about-stats > div:nth-child(2) .about-stat-num { padding-right: 0px; }  /* FA ۲۰۰+ */
html[lang="fa"] .about-stats > div:nth-child(3) .about-stat-num { padding-right: 0px; }  /* FA ۷    */
html[lang="fa"] .about-heading {
  color: #000;
  font-family: 'Morabba', sans-serif;
  font-size: clamp(44px, 5.5vw, 76px);
  line-height: 1.2;
}
html[lang="fa"] .about-left .has-animation {
  overflow: visible;
  padding-top: 0.15em;
}
/* تمام متن‌های بخش درباره من — رنگ مشکی (هر دو زبان) */
.about-bio { color: #000 !important; }
.about-eyebrow { color: #000 !important; }
.about-stat-label { color: #000 !important; }
.about-stat-num { color: #000 !important; }
.about-heading { color: #000 !important; }
.about-heading span { color: #000 !important; }
@media (max-width: 768px) {
  .about-inner { grid-template-columns: 1fr; }
  .about-right { order: -1; }
  .about-img-wrap { aspect-ratio: 4/3; }
  .about-heading { font-size: clamp(52px, 14vw, 80px); }
}

/* ═══════════════════════════════════ SERVICES ═══ */
#services-section {
  padding: clamp(80px, 12vw, 160px) clamp(24px, 6vw, 120px);
  overflow: hidden;
}
.sv-inner { max-width: 1280px; margin: 0 auto; }
.sv-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: clamp(48px, 6vw, 80px);
  gap: 24px; flex-wrap: wrap;
}
.sv-heading {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.9; color: #fff; margin: 0;
}
.sv-heading span { color: var(--lime-dark); }
.sv-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13px, 1.2vw, 15px);
  color: #fff;
  max-width: none; line-height: 1.6; text-align: right; white-space: nowrap;
}
.sv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2px;
}
.sv-card {
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(198,241,53,0.35);
  padding: clamp(28px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 16px;
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
#services-section.sv-visible .sv-card { opacity: 1; transform: translateY(0); }
#services-section.sv-visible .sv-card:nth-child(1) { transition-delay: 0.00s; }
#services-section.sv-visible .sv-card:nth-child(2) { transition-delay: 0.08s; }
#services-section.sv-visible .sv-card:nth-child(3) { transition-delay: 0.16s; }
#services-section.sv-visible .sv-card:nth-child(4) { transition-delay: 0.24s; }
#services-section.sv-visible .sv-card:nth-child(5) { transition-delay: 0.32s; }
#services-section.sv-visible .sv-card:nth-child(6) { transition-delay: 0.40s; }
#services-section.sv-visible .sv-card:nth-child(7) { transition-delay: 0.48s; }
.sv-card-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px; color: #fff; letter-spacing: 0.15em;
}
.sv-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(22px, 2.2vw, 28px);
  color: #fff; margin: 0; letter-spacing: 0.02em;
}
.sv-card-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; line-height: 1.7;
  color: rgba(255,255,255,0.75); margin: 0;
  flex: 1;
}
.sv-card-tag {
  display: inline-block;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lime-dark); background: rgba(168,209,24,0.12);
  border-radius: 4px; padding: 3px 8px; align-self: flex-start;
}
html[lang="fa"] .sv-card-title,
html[lang="fa"] .sv-card-desc { font-family: 'YekanBakh', sans-serif; direction: rtl; text-align: right; color: #fff; }
html[lang="fa"] .sv-sub { font-family: 'YekanBakh', sans-serif; direction: rtl; text-align: right; color: #fff; max-width: none; white-space: nowrap; }
html[lang="fa"] .sv-heading { font-family: 'YekanBakh', sans-serif; color: #fff; font-size: clamp(36px, 4.5vw, 64px); line-height: 1; padding-bottom: 0.15em; overflow: visible; }
html[lang="fa"] .sv-heading br { display: none; }
/* در حالت فارسی، خط دوم (I DO انگلیسی) مخفی می‌شه چون
   کل عبارت "چیکار میکنم" در خط اول قرار می‌گیره — یک باکس انیمیشن */
html[lang="fa"] .sv-heading-en-only { display: none !important; }
html[lang="fa"] .sv-card-num { font-family: 'YekanBakh', sans-serif; color: #fff; }
@media (max-width: 768px) {
  .sv-header { flex-direction: column; align-items: flex-start; }
  .sv-sub { text-align: left; max-width: 100%; white-space: normal; }
  .sv-grid { grid-template-columns: 1fr; gap: 1px; }
  .sv-heading { font-size: clamp(36px, 10vw, 56px); }
  .sv-card { padding: 18px 16px; gap: 10px; }
  .sv-card-title { font-size: clamp(16px, 4.5vw, 22px); }
  .sv-card-desc { font-size: 12px; line-height: 1.6; }
  .sv-card-num { font-size: 11px; }
  .sv-card-tag { font-size: 9px; padding: 2px 6px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PSEUDO-ELEMENT TEXT REVEAL (CodePen "Simple text reveal" pattern)
   ─────────────────────────────────────────────────────────────────
   Applied to inline-level span "lines" inside a headline. Two pseudo
   layers slide out left-to-right, revealing the text underneath.
   Each .pe-reveal element exposes --pe-bg (section bg) for the back
   layer and --pe-accent (default white) for the front layer.
   Animation starts only when .is-revealed is added (via IO in JS).
   ═══════════════════════════════════════════════════════════════════ */
.pe-reveal {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1.2;
  --pe-bg: var(--dark);
  --pe-accent: #ffffff;
  --pe-duration: 1.6s;
  --pe-delay: 0s;
  --pe-ease: cubic-bezier(.77,0,.18,1);
}
/* Block-level container — when a heading wraps multiple .pe-reveal spans */
h1.pe-reveal, h2.pe-reveal, h3.pe-reveal { display: block; }
/* Preserve original flex layout for #text-reveal lines */
#text-reveal .rv-line.pe-reveal { display: flex; }
/* English-only line must be fully hidden in Persian (overrides .pe-reveal display:flex) */
html[lang="fa"] #text-reveal .rv-line.rv-en-only.pe-reveal { display: none !important; }

.pe-reveal::before,
.pe-reveal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.pe-reveal::before {
  background: var(--pe-bg);
  transform: translateX(0);
}
.pe-reveal::after {
  background: var(--pe-accent);
  transform: translateX(-101%);
}
.pe-reveal.is-revealed::before {
  animation: pe-ltr-before var(--pe-duration) var(--pe-ease) forwards;
  animation-delay: var(--pe-delay);
}
.pe-reveal.is-revealed::after {
  animation: pe-ltr-after var(--pe-duration) var(--pe-ease) forwards;
  animation-delay: var(--pe-delay);
}
@keyframes pe-ltr-before {
  0%   { transform: translateX(0); }
  100% { transform: translateX(200%); }
}
@keyframes pe-ltr-after {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(101%); }
}

/* Split section: each line is its own block so wipe runs per-line */
.split-h { display: block; }
.split-h .pe-reveal { display: block; }
html[lang="fa"] .split-h .split-h-fa-hide { display: none; }

/* Per-section back-layer colors so the wipe matches each section bg */
#text-reveal       .pe-reveal { --pe-bg: var(--dark);     --pe-accent: var(--lime); }
#split-section     .pe-reveal { --pe-bg: var(--offwhite); --pe-accent: var(--lime); }
#projects-grid     .pe-reveal { --pe-bg: var(--offwhite); --pe-accent: var(--lime); }
#featured          .pe-reveal { --pe-bg: var(--offwhite); --pe-accent: var(--lime); }
#partners          .pe-reveal { --pe-bg: var(--offwhite); --pe-accent: var(--lime); }
#services-section  .pe-reveal { --pe-bg: var(--dark);     --pe-accent: var(--lime); }
#footer            .pe-reveal { --pe-bg: var(--dark);     --pe-accent: var(--lime); }

/* Stagger lines within a heading: each subsequent span gets +0.18s delay */
.pe-reveal-line-1 { --pe-delay: 0.10s; }
.pe-reveal-line-2 { --pe-delay: 0.28s; }
.pe-reveal-line-3 { --pe-delay: 0.46s; }
.pe-reveal-line-4 { --pe-delay: 0.64s; }

/* Neutralize the older clip-path / wipe-bar reveal for headings we now
   drive via .pe-reveal — keeps lines visible at rest, lets pseudo do the work */
#text-reveal .rv-line { clip-path: none !important; }
.tr-wipe-bar { display: none; }
/* Disable the old .has-animation wipe + opacity gate when a pe-reveal
   host is inside, so pe-reveal runs cleanly without overlay rectangles. */
.has-animation:has(.pe-reveal-host) { overflow: visible !important; }
.has-animation:has(.pe-reveal-host) > h2,
.has-animation:has(.pe-reveal-host) > .feat-title { opacity: 1 !important; animation: none !important; }
.has-animation:has(.pe-reveal-host).animate-in::before,
.has-animation:has(.pe-reveal-host).animate-in::after { content: none !important; display: none !important; animation: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   GALLERY-V2 CAPTION — match marquee font (Bebas Neue) for English
   ═══════════════════════════════════════════════════════════════════ */
.gv2-cap-sub {
  font-family: 'Bebas Neue', sans-serif !important;
  letter-spacing: 0.18em !important;
  font-size: clamp(13px, 1.1vw, 16px) !important;
}
.gv2-cap-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-style: normal !important;
  letter-spacing: 0.04em !important;
}
html[lang="fa"] .gv2-cap-title,
html[lang="fa"] .gv2-cap-sub { font-family: 'YekanBakh', sans-serif !important; letter-spacing: 0 !important; }

/* ═══════════════════════════════════════════════════════════════════
   SPLIT IMAGES — وضعیت اولیه و انیمیشن، هردو با GSAP کنترل می‌شن
   (CSS فقط will-change برای پرفورمنس)
   ═══════════════════════════════════════════════════════════════════ */
.split-img-left,
.split-img-right {
  will-change: transform;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE TWEAKS — requested fixes
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── حذف انیمیشن pe-reveal فقط در بخش FEATURED (WORLD CLASS WEB DESIGN) ── */
  #featured .pe-reveal::before,
  #featured .pe-reveal::after {
    display: none !important;
    animation: none !important;
    content: none !important;
  }

  /* CLIENTS English headline gets cropped — scale down for mobile */
  .partners-text h2 { font-size: clamp(56px, 16vw, 96px); letter-spacing: 0.12em; white-space: nowrap; }
  html[lang="fa"] .partners-text h2 { font-size: clamp(48px, 14vw, 80px); white-space: normal; }

  /* WHAT I DO cards — smaller on mobile */
  #services-section .sv-card { padding: 14px 12px; gap: 6px; min-height: auto; }
  #services-section .sv-card-title { font-size: clamp(14px, 3.8vw, 18px); }
  #services-section .sv-card-desc  { font-size: 11px; line-height: 1.55; }
  #services-section .sv-card-num   { font-size: 10px; }
  #services-section .sv-card-tag   { font-size: 8px; padding: 2px 5px; }

  /* Testimonials — shrink the cards (image + text block) */
  #testimonials-section { padding: 48px 16px; }
  #testimonials-section .ct-wrap { max-width: 36rem; }
  #testimonials-section .ct-grid { gap: 1.5rem; }
  #testimonials-section .ct-images { max-width: 240px; margin: 0 auto; }
  #testimonials-section .ct-img { border-radius: 1rem; }
  #testimonials-section .ct-name  { font-size: 18px; }
  #testimonials-section .ct-desig { font-size: 12px; }
  #testimonials-section .ct-quote { font-size: 13px; line-height: 1.6; }
  #testimonials-section .ct-voice { padding: 8px 12px; margin-top: 1rem; border-radius: 14px; }
  #testimonials-section .ct-voice-btn { width: 34px; height: 34px; }
  #testimonials-section .ct-voice-btn svg { width: 13px; height: 13px; }
  #testimonials-section .ct-arrow { width: 2.2rem; height: 2.2rem; }
}

/* ─── Accessibility: honor reduced-motion preference ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  video[autoplay] { display: none; }
}