/* ══════════════════════════════════════════════════════════════════════
   GALLERY V2 — Spotlight horizontal scroll
   Centered "viewport" frame — items slide right → left.
   Videos play only when overlapping the frame.
   Background stays transparent — outer site bg rhythm is preserved.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Section shell ────────────────────────────────────────────────── */
#gallery-v2 {
  position: relative;
  background: transparent;
  margin-top: -30vh;        /* same as legacy #gallery used — preserves BG transition scroll position */
  z-index: 1;
  color: #fff;
}

/* The pinned viewport — 100vh while the strip scrolls horizontally */
.gv2-pin {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: block;
}

/* ── Light-bg state (mirrors the site's bg transition) ─────────────── */
#gallery-v2.gv2-light .gv2-spotlight     { border-color: rgba(0,0,0,0.45); }
#gallery-v2.gv2-light .gv2-corner        { background: rgba(0,0,0,0.55); }
#gallery-v2.gv2-light .gv2-cap-title     { color: rgba(0,0,0,0.92); }
#gallery-v2.gv2-light .gv2-cap-sub       { color: rgba(0,0,0,0.55); }
#gallery-v2.gv2-light .gv2-cap-index     { color: rgba(0,0,0,0.45); }
#gallery-v2.gv2-light .gv2-hint-text     { color: rgba(0,0,0,0.5); }
#gallery-v2.gv2-light .gv2-hint-dot      { border-color: rgba(0,0,0,0.45); }
#gallery-v2.gv2-light .gv2-hint-dot::after{ background: rgba(0,0,0,0.7); }

/* ── Spotlight frame (centered, fixed) ────────────────────────────── */
.gv2-spotlight {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(280px, 26vw, 420px);
  aspect-ratio: 9 / 13;
  border: 1.5px dashed rgba(255,255,255,0.42);
  border-radius: 4px;
  z-index: 3;
  pointer-events: none;
  transition: border-color 0.4s ease;
}
.gv2-corner {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  transition: background 0.4s ease;
}
.gv2-corner--tl { top: -3px;    left: -3px; }
.gv2-corner--tr { top: -3px;    right: -3px; }
.gv2-corner--bl { bottom: -3px; left: -3px; }
.gv2-corner--br { bottom: -3px; right: -3px; }

/* ── Strip + items ────────────────────────────────────────────────── */
.gv2-strip {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  /* Force LTR layout so items[0] is always the leftmost in DOM order — even
     when the page is in RTL (Persian) mode. The strip slides right→left as
     a whole, independent of document direction. */
  direction: ltr;
  gap: clamp(28px, 3vw, 56px);
  padding: 0 clamp(20px, 5vw, 80px);
  width: max-content;
  will-change: transform;
  z-index: 2;
}

.gv2-item {
  position: relative;
  flex-shrink: 0;
  width: clamp(280px, 26vw, 420px);
  aspect-ratio: 9 / 13;
  border-radius: 4px;
  overflow: visible;
  background: transparent;
}

/* Default state — items outside the spotlight are dimmed */
.gv2-item .gv2-cover,
.gv2-item .gv2-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 4px;
}
.gv2-item .gv2-cover {
  opacity: 0.42;
  filter: brightness(0.7);
  transition: opacity 0.5s ease, filter 0.5s ease;
  z-index: 1;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.gv2-item .gv2-video {
  z-index: 2;
  opacity: 0;                       /* hidden by default; JS reveals when in spotlight */
  transition: opacity 0.25s ease;
  /* clip-path is set by JS in viewport space (relative to the element) */
  pointer-events: none;
}

/* When item overlaps spotlight → cover becomes fully visible too,
   because the part outside the clipped video should be the bright cover. */
.gv2-item.is-in-spot .gv2-cover {
  opacity: 1;
  filter: brightness(1);
}
.gv2-item.is-in-spot .gv2-video {
  opacity: 1;
}

/* ── Caption (below spotlight) ────────────────────────────────────── */
.gv2-caption {
  position: absolute;
  top: calc(50% + clamp(220px, 25vh, 320px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  text-align: center;
  pointer-events: none;
  font-family: 'DM Sans', sans-serif;
  width: min(80vw, 520px);
}
.gv2-cap-index {
  display: block;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: rgba(255,255,255,0.45);
  margin-bottom: 10px;
  transition: opacity 0.25s ease;
}
.gv2-cap-title {
  display: block;
  font-family: 'Cormorant', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 28px);
  color: rgba(255,255,255,0.95);
  margin-bottom: 6px;
  transition: opacity 0.25s ease;
}
.gv2-cap-sub {
  display: block;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  transition: opacity 0.25s ease;
}
html[lang="fa"] .gv2-cap-title { font-family: 'YekanBakh', sans-serif; font-style: normal; letter-spacing: 0; }
html[lang="fa"] .gv2-cap-sub   { font-family: 'YekanBakh', sans-serif; letter-spacing: 0; text-transform: none; }
html[lang="fa"] .gv2-cap-index { font-family: 'YekanBakh', sans-serif; letter-spacing: 0.1em; }

.gv2-caption.is-swapping .gv2-cap-title,
.gv2-caption.is-swapping .gv2-cap-sub,
.gv2-caption.is-swapping .gv2-cap-index { opacity: 0; }

/* Empty state — spotlight has no item in it yet (start of section) */
.gv2-caption.is-empty .gv2-cap-title,
.gv2-caption.is-empty .gv2-cap-sub,
.gv2-caption.is-empty .gv2-cap-index { opacity: 0; }

/* ── Scroll hint ──────────────────────────────────────────────────── */
.gv2-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vh, 38px);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  font-family: 'DM Sans', sans-serif;
}
.gv2-hint-dot {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.45);
  display: inline-block;
}
.gv2-hint-dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid rgba(255,255,255,0.75);
  border-bottom: 1.5px solid rgba(255,255,255,0.75);
  transform: translate(-50%, -65%) rotate(45deg);
  animation: gv2-bounce 1.6s ease-in-out infinite;
}
.gv2-hint-text {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
html[lang="fa"] .gv2-hint-text { letter-spacing: 0; text-transform: none; font-family: 'YekanBakh', sans-serif; }

@keyframes gv2-bounce {
  0%, 100% { transform: translate(-50%, -75%) rotate(45deg); opacity: 0.5; }
  50%      { transform: translate(-50%, -45%) rotate(45deg); opacity: 1; }
}

/* ── Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #gallery-v2 { margin-top: -4vh; }

  /* Smaller spotlight + items on mobile so they sit comfortably inside the viewport */
  .gv2-spotlight,
  .gv2-item { width: clamp(180px, 50vw, 260px); }

  /* Tighter gap between items on small screens */
  .gv2-strip {
    gap: clamp(20px, 5vw, 36px);
    padding: 0 clamp(16px, 5vw, 40px);
  }

  /* Caption sits just below the (smaller) spotlight */
  .gv2-caption {
    top: calc(50% + clamp(170px, 22vh, 240px));
    bottom: auto;
  }
  .gv2-hint { bottom: 16px; }
}

/* ── دکمه‌ی صدا روی هر کارت ──────────────────────────────────────── */
.gv2-sound {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.2s ease, transform 0.2s ease;
}
/* فقط روی کارتی که داخل spotlight هست دکمه دیده می‌شه */
.gv2-item.is-in-spot .gv2-sound {
  opacity: 1;
  pointer-events: auto;
}
.gv2-sound:hover {
  background: rgba(0,0,0,0.7);
  transform: scale(1.08);
}
.gv2-sound svg {
  width: 18px;
  height: 18px;
  display: block;
}
/* پیش‌فرض: آیکون mute (off) نمایش، آیکون on مخفی */
.gv2-sound .gv2-sound-icon-on  { display: none; }
.gv2-sound .gv2-sound-icon-off { display: block; }
/* وقتی data-on=true یعنی صدا فعاله */
.gv2-sound[data-on="true"] .gv2-sound-icon-on  { display: block; }
.gv2-sound[data-on="true"] .gv2-sound-icon-off { display: none; }
.gv2-sound[data-on="true"] {
  background: var(--lime, #c8ff00);
  color: #000;
  border-color: var(--lime, #c8ff00);
}

/* موبایل: دکمه کمی کوچیک‌تر */
@media (max-width: 768px) {
  .gv2-sound { width: 34px; height: 34px; top: 8px; right: 8px; }
  .gv2-sound svg { width: 16px; height: 16px; }
}