.releases-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: url("../../assets/gifs/releases-bg-noise.gif") center/cover no-repeat;
  overflow: hidden;
  z-index: 1;
}

.releases-gradient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 90; /* above hero elements, below nav (101) */
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, 0) 0%, black 100%);
  pointer-events: none; /* don't block clicks */
}

.releases-gradient{ pointer-events:none; }

.releases-nav {
  position: relative;
  width: 100%;
  height: clamp(120px, 12vh, 184px);
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 16%, black 72%);
  z-index: 101;
}

.nav-inner {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.nav-title {
  font-family: unixel, monospace;
  font-size: clamp(64px, 8vw, 128px);
  color: #fff;
  text-align: center;
  text-shadow: 9px 10px 5px rgba(0,0,0,1);
  margin: 0;
  line-height: 1;
  user-select: none;
}

.nav-back {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(72px, 8vw, 120px);
  height: clamp(72px, 8vw, 120px);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.nav-back img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.nav-cline {
  position: absolute;
  bottom: clamp(-20px, -1.5vw, -10px);
  left: 50%;
  transform: translateX(-50%);
  color: #808080;
  font-family: unixel, monospace;
  font-size: clamp(10px, 1vw, 14px);
  white-space: nowrap;
}

/* موبایل */
@media (max-width: 720px) {
  .nav-title {
    font-size: clamp(48px, 10vw, 96px);
  }
}

/* ===== Hero Selector ===== */
.rel-hero{
  position:relative;
  width:100%;
  height:calc(100vh - clamp(120px, 12vh, 184px)); /* full viewport minus nav */
  z-index: 5; /* keep hero under gradient (z=90) */
  overflow:hidden;
  --tilt: rotateX(20deg) rotateY(-20deg) rotateZ(7deg);
}

/* center cover */
.rel-cover{
  position:absolute;
  left:50%;
  top:50%;
  /* نزدیک‌تر به بالا، ولی فضای کافی برای تیتر */
  transform: translate(-50%, calc(-50% - 16vh)) var(--tilt);
  width: clamp(360px, 45vmin, 640px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  z-index: 3;
  animation-fill-mode: both;
}

/* arrows positioned around the cover’s vertical center */
.rel-arrow{
  position:absolute;
  top: calc(50% - 16vh);
  transform: translateY(-50%);
  font-family: Arapix, monospace;
  font-size: clamp(120px, 16vmin, 220px);
  line-height:1;
  color:#fff;
  background: transparent;
  border: none;
  cursor: pointer;
  user-select:none;
  z-index: 4;
  text-shadow: 0 8px 24px rgba(0,0,0,.8);
}
/* We'll place them using the cover width from JS via --coverW */
.rel-arrow--left{  left: calc(50% - var(--coverW, 420px)/2 - 80px); }
.rel-arrow--right{ right: calc(50% - var(--coverW, 420px)/2 - 80px); }

/* side previews (half out of screen, lower Y than center) */
.rel-preview{
  position:absolute;
  top: calc(50% - 22vh); /* بالاتر تا از کادر بیرون نزند */
  width: clamp(300px, 38vmin, 560px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: blur(.4px) saturate(.9);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  z-index:2;
  transform: var(--tilt);
}
.rel-prev{ left: -6vw; }
.rel-next{ right: -6vw; }

/* meta (title + subtitle) under cover */
.rel-meta{
  position:absolute;
  left:50%;
  top: calc(50% + clamp(160px, 22vmin, 300px) * .50);
  transform: translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
  z-index: 110;
}
.rel-title{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-family: "B Zar Bold", system-ui;
  font-size: clamp(28px, 4.2vw, 64px);
  line-height:1.05;
  text-shadow: 0 10px 24px rgba(0,0,0,.65);
}
.rel-title__exp{
  display:none; /* toggled by JS */
}
.rel-title__exp.active{
  display:inline-flex;
}
.rel-sub{
  color:#fff;
  font-family: "B Zar", system-ui;
  font-size: clamp(16px, 2.3vw, 36px);
  opacity:.95;
}

/* platform links */
.rel-links{
  position:absolute;
  left:50%;
  /* slightly below meta; tuned to your current spacing */
  top: calc(50% + clamp(200px, 28vmin, 340px));
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  gap: clamp(16px, 3vw, 28px);
  z-index: 200; /* higher than gradient/nav shadows */
  pointer-events: auto;
}
.rel-link{
  width: clamp(36px, 5vmin, 52px);
  height: clamp(36px, 5vmin, 52px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 2px solid rgba(255,255,255,.65);
  border-radius: 8px;
  padding: clamp(6px, 1vmin, 10px);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(4px);
  transition: transform .2s ease, opacity .2s ease, filter .2s ease, border-color .2s ease;
}
.rel-link img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
  /* make dark SVGs white on dark bg if needed */
  filter: invert(1);
}
.rel-link:hover{ transform: translateY(-2px); }
.rel-link.is-disabled{
  opacity:.35;
  filter: grayscale(1);
  pointer-events: none;
  border-color: rgba(255,255,255,.25);
}

/* mobile tweaks */
@media (max-width: 720px){
  .rel-cover{
    transform: translate(-50%, calc(-50% - 8vh)) var(--tilt);
    width: clamp(220px, 58vmin, 360px);
  }
  .rel-preview{
    top: calc(50% + 6vh);
    width: clamp(160px, 44vmin, 240px);
    /* کمی داخل‌تر بیایند تا از صفحه بیرون نزنند */
  }
  .rel-prev{ left: -10vw; }
  .rel-next{ right: -10vw; }

  .rel-arrow{
    font-size: clamp(56px, 16vmin, 88px);
    top: calc(50% - 8vh);
    transform: translateY(-50%);
  }
  .rel-arrow--left{  left: calc(50% - var(--coverW, 280px)/2 - 20px); }
  .rel-arrow--right{ right: calc(50% - var(--coverW, 280px)/2 - 20px); }

  .rel-meta{
    top: calc(50% + clamp(120px, 36vmin, 220px) * .52);
    gap: 6px;
  }
  .rel-links{
    top: calc(50% + clamp(160px, 44vmin, 280px));
    gap: 12px;
  }
}

.rel-hero {
  perspective: 1200px; /* عمق دید سه‌بعدی */
  --swipeMs: 500ms;    /* مدت انیمیشن سوئیچ */
}

.rel-cover,
.rel-preview,
.rel-meta {
  transition: all 0.5s ease;
}

/* keep gradient above everything but not block clicks */
.releases-gradient{ pointer-events: none; }

/* ===== Details sections (stacked under hero) ===== */
.rel-sections{
  position: relative;
  z-index: 5; /* above background and gradient, below nav if needed */
  background: transparent;
}
.rel-section{
  min-height: 100vh;
  width: 100%;
  background: rgba(0,0,0,0.85);
  color: #fff;
}

@media (max-height: 700px){
  .rel-cover{ transform: translate(-50%, calc(-50% - 4vh)) var(--tilt); width: clamp(260px, 32vmin, 420px); }
  .rel-preview{ top: calc(50% + 4vh); width: clamp(200px, 30vmin, 360px); }
  .rel-meta{ top: calc(50% + clamp(120px, 18vmin, 220px) * .5); }
  .rel-links{ top: calc(50% + clamp(160px, 24vmin, 260px)); }
}