/* ════════════════════════════════════════════════════════════
   JoJo — Open The Legend | World Cup 2026
   style.css
   ════════════════════════════════════════════════════════════ */

/* ── فونت کلمه — متن عمومی ──────────────────────────────── */
@font-face { font-family:'Kalameh'; src:url('../fonts/KalamehWeb-Thin.woff2') format('woff2'); font-weight:100; font-display:swap; }
@font-face { font-family:'Kalameh'; src:url('../fonts/KalamehWeb-ExtraLight.woff2') format('woff2'); font-weight:200; font-display:swap; }
@font-face { font-family:'Kalameh'; src:url('../fonts/KalamehWeb-Light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Kalameh'; src:url('../fonts/KalamehWeb-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Kalameh'; src:url('../fonts/KalamehWeb-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Kalameh'; src:url('../fonts/KalamehWeb-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Kalameh'; src:url('../fonts/KalamehWeb-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Kalameh'; src:url('../fonts/KalamehWeb-ExtraBold.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Kalameh'; src:url('../fonts/KalamehWeb-Black.woff2') format('woff2'); font-weight:900; font-display:swap; }

/* ── فونت کلمه — اعداد فارسی (برای آمار) ────────────────── */
@font-face { font-family:'KalamehNum'; src:url('../fonts/KalamehWebFaNum-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'KalamehNum'; src:url('../fonts/KalamehWebFaNum-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'KalamehNum'; src:url('../fonts/KalamehWebFaNum-Black.woff2') format('woff2'); font-weight:900; font-display:swap; }

/* ── آیکون Material Design ───────────────────────────────── */
@font-face {
  font-family: 'Material-Design-Iconic-Font';
  src: url('../fonts/Material-Design-Iconic-Font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.zmdi {
  font-family: 'Material-Design-Iconic-Font';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.zmdi-play-circle-outline::before { content: '\f16a'; }
.zmdi-chevron-left::before        { content: '\f2fa'; }
.zmdi-close::before               { content: '\f135'; }

/* ── ریست ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── متغیرها ─────────────────────────────────────────────── */
:root {
  /* پالت برند */
  --cream:       #FAEDCD;
  --black:       #040404;
  --green:       #0B2D22;
  --gold:        #C9A84C;

  /* مشتقات */
  --cream-dim:   rgba(250,237,205,.6);
  --cream-mute:  rgba(250,237,205,.35);
  --black-2:     #0a0a0a;
  --black-3:     #111111;
  --black-4:     #1a1a1a;
  --green-light: #134534;
  --green-dark:  #071a14;
  --gold-light:  #E8C96A;
  --gold-dark:   #8A6D1E;

  /* alias های قدیمی برای سازگاری */
  --white:       #FAEDCD;
  --white-dim:   rgba(250,237,205,.6);
  --white-mute:  rgba(250,237,205,.35);

  --font:        'Kalameh', Tahoma, sans-serif;
  --font-num:    'KalamehNum', 'Kalameh', Tahoma, sans-serif;
  --ease-out:    cubic-bezier(.22,1,.36,1);
}


/* ── پایه ────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  direction: rtl;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── اسکرول‌بار ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--cream-dim); border-radius: 8px; }

/* ── تکسچر نویز ─────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  pointer-events: none; opacity: .35;
}

/* ── کمکی ────────────────────────────────────────────────── */
.gold-line {
  height: 1px; width: 60px;
  background: linear-gradient(90deg, transparent, var(--cream), transparent);
  margin: 0 auto;
}
.gold-line.wide { width: 120px; }

.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }


/* ════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════ */
#hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
}

.hero-bg {
  position: absolute; inset: 0; z-index: 0;
}
.hero-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.28) saturate(.5);
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 55% at 50% 40%, rgba(250,237,205,.07) 0%, transparent 65%),
    linear-gradient(to bottom, rgba(8,8,8,.1) 0%, rgba(8,8,8,.5) 60%, var(--black) 100%);
}

/* ذرات */
.particles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.particles span {
  position: absolute; border-radius: 50%;
  background: var(--cream); opacity: 0;
  animation: pFade var(--dur,4s) var(--delay,0s) infinite ease-in-out;
}
@keyframes pFade {
  0%,100% { opacity:0; transform:translateY(0); }
  50%     { opacity:.45; transform:translateY(-16px); }
}

/* نوار بالا */
.hero-nav {
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hero-nav .logo img {
    height: 72px;
    width: auto;
}
.hero-nav .badge {
  font-size: .65rem; font-weight: 700; letter-spacing: .12em;
  color: var(--white-dim);
  border: 1px solid rgba(250,237,205,.3);
  padding: 5px 12px; border-radius: 8px;
}

/* محتوا */
.hero-content {
  position: relative; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 0 20px;
  animation: heroIn 1.4s var(--ease-out) both;
}
@keyframes heroIn { from { opacity:0; transform:translateY(36px); } to { opacity:1; transform:translateY(0); } }

.hero-label {
  display: flex; align-items: center; gap: 12px;
  font-size: .7rem; font-weight: 700; letter-spacing: .25em; color: var(--cream);
}
.hero-label::before, .hero-label::after {
  content: ''; display: block; width: 28px; height: 1px; background: var(--cream); opacity: .5;
}

.hero-title {
    font-size: clamp(3.8rem, 11vw, 4rem);
    font-weight: 700;
    line-height: 1.15;
    background: linear-gradient(155deg, #fff 15%, var(--cream) 50%, var(--cream) 85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 40px rgba(250,237,205,.2));
}
.hero-sub {
    font-size: clamp(1.125rem, 3.2vw, 1.1rem);
    font-weight: 400;
    color: var(--white);
    line-height: 2;
    max-width: 360px;
} 

.hero-live {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(250,237,205,.28); padding: 6px 14px; border-radius: 8px;
}
.hero-live .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cream);
  animation: livePulse 2s infinite;
}
@keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} }
.hero-live span { font-size: .65rem; font-weight: 700; letter-spacing: .18em; color: var(--cream); }

.hero-cta {
  margin-top: 6px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 38px;
  border: 1px solid var(--cream); color: var(--cream);
  font-family: var(--font); font-size: .85rem; font-weight: 700; letter-spacing: .08em;
  text-decoration: none; background: transparent; cursor: pointer;
  position: relative; overflow: hidden; transition: color .35s;
}
.hero-cta::before {
  content: ''; position: absolute; inset: 0;
  background: var(--cream); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.hero-cta:hover { color: var(--black); }
.hero-cta:hover::before { transform: scaleX(1); }
.hero-cta span, .hero-cta i { position: relative; z-index: 1; }
.hero-cta i { font-size: 1.1rem; transition: transform .3s; }
.hero-cta:hover i { transform: translateX(-5px); }

/* اسکرول */
.hero-scroll {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.hero-scroll p {
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .28em;
    color: var(--cream-dim);
}
.hero-scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, var(--cream), transparent);
  animation: scrollAnim 2.2s infinite;
}
@keyframes scrollAnim { 0%,100%{opacity:.2;transform:scaleY(.7)} 50%{opacity:1;transform:scaleY(1)} }


/* ════════════════════════════════════════════════════════════
   MUSEUM
   ════════════════════════════════════════════════════════════ */
#museum {
  background: var(--black-2);
  padding: 80px 0 100px;
  position: relative;
}


.sec-head { text-align: center; padding: 0 24px 40px; }
.sec-label {
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .32em;
    color: var(--cream);
    margin-bottom: 12px;
}
.sec-title {
    font-size: clamp(2.25rem, 6vw, 3.2rem);
    font-weight: 700;
    background: linear-gradient(135deg, var(--white) 40%, var(--cream));
    -webkit-background-clip: text;
    list-style: upper-alpha;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
    margin: 12px 0 18px;
}
.sec-desc { font-size: .95rem; font-weight: 400; color: var(--white-dim); max-width: 440px; margin: 18px auto 0; line-height: 2; }

/* تب‌ها */
.tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    overflow: auto;
    margin: 0 20px 28px;
    padding-bottom: 8px;
}
.tabs::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.tab {
    padding: 8px 22px;
    font-family: var(--font);
    font-size: .8rem;
    font-weight: 700;
    background: transparent;
    border: 1px solid rgba(250,237,205,.22);
    color: var(--white-dim);
    cursor: pointer;
    transition: all .3s;
    border-radius: 8px;
    min-width: max-content;
}
.tab.active, .tab:hover { background: var(--cream); border-color: var(--cream); color: var(--black); }

/* گرید */
.museum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px; padding: 0 20px;
  max-width: 1100px; margin: 0 auto;
}

/* کارت ویدیو */
.v-card {
  background: #242424;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  transition: transform .4s var(--ease-out), box-shadow .4s;
  display: flex;
  flex-direction: column;
}
.v-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,0,0,.65);
}

/* تامبنیل — با margin کوچک اطراف، گوشه گرد */
.v-thumb {
  position: relative;
  padding-top: 58%;
  overflow: hidden;
  background: #111;
  border-radius: 8px;
  margin: 24px 24px 0;
}
.v-thumb video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out);
}
.v-card:hover .v-thumb video { transform: scale(1.05); }

.v-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(4,4,4,.65) 0%, transparent 55%);
  border-radius: 12px;
}

/* دکمه پلی — دایره کِرِم، مرکز */
.v-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  background: #FAEDCD;
  box-shadow: 0 4px 20px rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s, box-shadow .3s;
}
.v-play svg { width: 17px; height: 17px; fill: #040404; }
.v-card:hover .v-play {
  transform: translate(-50%,-50%) scale(1.12);
  box-shadow: 0 6px 28px rgba(0,0,0,.65);
}

/* متن — وسط‌چین مثل رفرنس */
.v-info {
  padding: 16px 16px 0;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
}
.v-tag {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  color: rgba(250,237,205,.45);
  margin-bottom: 8px;
}
.v-title {
  font-size: 1.05rem; font-weight: 700;
  color: #FAEDCD;
  line-height: 1.5; margin-bottom: 8px;
}
.v-desc {
  font-size: .8rem; font-weight: 400;
  color: rgba(250,237,205,.48);
  line-height: 1.85;
  flex: 1;
}

/* دکمه پایین — کِرِم، با margin کناری */
.v-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 16px;
  background: #FAEDCD;
  color: #040404;
  font-family: var(--font);
  font-size: .82rem; font-weight: 700;
  border: none; cursor: pointer;
  border-radius: 10px;
  transition: background .3s;
  width: 100%;
}
.col-v-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 16px 24px;
}
.v-cta svg { width: 15px; height: 15px; fill: #040404; }
.v-card:hover .v-cta { background: #f0e0b0; }


/* ════════════════════════════════════════════════════════════
   IMMORTALS  (بازیکنان بازنشسته)
   ════════════════════════════════════════════════════════════ */
#immortals {
  background: var(--black);
  padding: 100px 0 110px;
  position: relative; overflow: hidden;
}
#immortals::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 70px;
  background: linear-gradient(to bottom, var(--cream), transparent);
}


.bottles-wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

/* ── Spotlight container ─────────────────────────────── */
.bottles-frame {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding-top: 24px;
}

/* سایه زمینه زیر بطری‌ها */
.bottles-frame::before {
  content: '';
  position: absolute;
  bottom: -12px; left: 15%; right: 15%;
  height: 40px;
  background: radial-gradient(ellipse 70% 100% at 50% 50%, rgba(250,237,205,.2) 0%, transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}

.bottles-img {
    position: relative;
    z-index: 1;
    width: 100%;
    display: block;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,.85))
    drop-shadow(0 0 20px rgba(250,237,205,.1));
    transition: transform .8s var(--ease-out), filter .6s;
    animation: bottleFloat 5s ease-in-out infinite;
    border-radius: 8px;
    overflow: hidden;
}

/* شناوری ملایم دائمی */
@keyframes bottleFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

.bottles-img:hover {
  animation-play-state: paused;
  transform: translateY(-14px) scale(1.02);
  filter:
    drop-shadow(0 44px 65px rgba(0,0,0,.9))
    drop-shadow(0 0 40px rgba(250,237,205,.28));
}

/* کلاسیک — سپیای گرم */
#immortals .bottles-img {
  filter:
    drop-shadow(0 30px 50px rgba(0,0,0,.85))
    drop-shadow(0 0 20px rgba(250,237,205,.1))
    sepia(.15) contrast(1.06) brightness(.97);
}
#immortals .bottles-img:hover {
  filter:
    drop-shadow(0 44px 65px rgba(0,0,0,.9))
    drop-shadow(0 0 40px rgba(250,237,205,.3))
    sepia(.08) contrast(1.08);
}

/* مدرن — اشباع بالاتر */
#living-legends .bottles-img {
    filter: drop-shadow(0 30px 50px rgba(0,0,0,.8))
    drop-shadow(0 0 20px rgba(250,237,205,.08))
    saturate(1.15) brightness(1.04);
    aspect-ratio: 16/10;
    object-fit: cover;
}

#living-legends .bottles-img:hover {
  filter:
    drop-shadow(0 44px 65px rgba(0,0,0,.85))
    drop-shadow(0 0 40px rgba(250,237,205,.25))
    saturate(1.22) brightness(1.07);
}

/* خطوط دکوراتیو کنار تصویر */
.bottles-frame .frame-line {
  position: absolute;
  top: 10%; bottom: 10%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(250,237,205,.2), transparent);
  pointer-events: none;
}
.bottles-frame .frame-line--right { right: 0; }
.bottles-frame .frame-line--left  { left: 0; }

.bottles-copy { text-align: center; margin-top: 52px; padding: 0 20px; }
.bottles-copy h3 {
  font-size: clamp(1.1rem, 4vw, 1.9rem); font-weight: 700;
  color: var(--cream); margin-bottom: 12px;
}
.bottles-copy p {
  font-size: .98rem; font-weight: 400; color: var(--white-dim);
  line-height: 2; max-width: 420px; margin: 0 auto 28px;
}
.bottles-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 38px;
    background: var(--cream);
    color: var(--black);
    font-family: var(--font);
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .3s, transform .3s;
    border-radius: 8px;
}
.bottles-cta:hover { background: var(--cream); transform: translateY(-2px); }

/* تزئین گوشه‌ای برای بخش‌بندی بین دو سکشن */
.section-divider {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 0 24px;
  margin: 0;
}
.section-divider::before, .section-divider::after {
  content: ''; flex: 1; max-width: 200px; height: 1px;
  background: linear-gradient(to var(--dir, left), transparent, rgba(250,237,205,.2));
}
.section-divider::before { --dir: right; }
.section-divider .divider-icon {
  width: 44px; height: 44px; border: 1px solid rgba(250,237,205,.3); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--cream); font-size: 1.1rem;
}


/* ════════════════════════════════════════════════════════════
   BUBBLES — انیمیشن حباب‌های گاز
   ════════════════════════════════════════════════════════════ */
.bubbles-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.bubble {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 32%, rgba(250,237,205,.6), rgba(250,237,205,.06));
  border: 1px solid rgba(250,237,205,.18);
  opacity: 0;
  will-change: transform, opacity;
}


/* ════════════════════════════════════════════════════════════
   LIVING LEGENDS  (فوق‌ستاره‌های امروز)
   ════════════════════════════════════════════════════════════ */
#living-legends {
    background: var(--green);
    position: relative;
    overflow: hidden;
    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

#living-legends .sec-head,
#living-legends .bottles-wrap {
  position: relative;
  z-index: 2;
}
#living-legends::after {
  content: '';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse, rgba(250,237,205,.045) 0%, transparent 70%);
  pointer-events: none;
}


/* ════════════════════════════════════════════════════════════
   MOMENTS — ثانیه‌هایی که تاریخ شدند
   ════════════════════════════════════════════════════════════ */
#moments {
  background: var(--black);
  padding: 90px 0 100px;
  position: relative;
}
#moments::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 70px;
  background: linear-gradient(to bottom, var(--cream), transparent);
}

.moments-list {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.moment-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  border: 1px solid rgba(250,237,205,.1);
  overflow: hidden;
  position: relative;
  transition: border-color .4s;
}
.moment-card[data-video] { cursor: pointer; }
.moment-card:hover { border-color: rgba(250,237,205,.32); }

.moment-play-btn {
    position: absolute;
    top: 20%;
    left: 5%;
    transform: translate(-50%, -50%) scale(1);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(10,10,10,.55);
    border: 1.5px solid rgba(250,237,205,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold, #faedcd);
    font-size: 1.5rem;
    opacity: .45;
    transition: opacity .3s, transform .3s, background .3s, border-color .3s;
    pointer-events: none;
    z-index: 2;
}
.moment-card[data-video]:hover .moment-play-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.12);
  background: rgba(10,10,10,.82);
  border-color: rgba(250,237,205,.8);
}

.moment-year {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 700;
  color: var(--cream);
  background: rgba(250,237,205,.04);
  border-left: 1px solid rgba(250,237,205,.12);
  padding: 32px 12px;
  letter-spacing: .04em;
  position: relative;
  writing-mode: horizontal-tb;
}
.moment-card--alt .moment-year { background: rgba(250,237,205,.07); }

.moment-year::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -2px;
    transform: translateX(-50%);
    width: 5px;
    height: 0;
    background: var(--cream);
    transition: height .5s var(--ease-out);
}
.moment-card:hover .moment-year::after { height: 100%; }

.moment-body {
  padding: 28px 28px 28px 24px;
  background: var(--black-2);
  position: relative;
}
.moment-card--alt .moment-body { background: var(--black-3); }

.moment-tag {
  display: inline-block;
  font-size: .65rem; font-weight: 700; letter-spacing: .22em;
  color: var(--cream); border: 1px solid rgba(250,237,205,.28);
  padding: 3px 9px; margin-bottom: 10px;
}
.moment-title {
  font-size: clamp(1.2rem, 3vw, 1.65rem);
  font-weight: 700; line-height: 1.2; margin-bottom: 4px;
}
.moment-player {
  font-size: .78rem; font-weight: 700;
  color: var(--cream); letter-spacing: .06em;
  margin-bottom: 12px;
}
.moment-desc {
  font-size: .87rem; font-weight: 400;
  color: var(--white-dim); line-height: 2;
}
.moment-body::after {
  content: '';
  position: absolute; bottom: 10px; left: 10px;
  width: 12px; height: 12px;
  border-bottom: 1px solid rgba(250,237,205,.3);
  border-left: 1px solid rgba(250,237,205,.3);
}

@media (max-width: 500px) {
  .moment-card { grid-template-columns: 68px 1fr; }
  .moment-year { font-size: .95rem; padding: 22px 8px; }
  .moment-body { padding: 18px 16px; }
}


/* ════════════════════════════════════════════════════════════
   STATS — جام جهانی به روایت اعداد
   ════════════════════════════════════════════════════════════ */
#stats {
    background: var(--green);
    padding: 90px 0 100px;
    position: relative;
    overflow: hidden;
}

/* لوگوی WC2026 — بکگراند مرکزی */
#stats .stats-wc-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    pointer-events: none;
    user-select: none;
    animation: wcLogoPulse 5s ease-in-out infinite;
    z-index: 0;
    height: 100%;
    object-fit: contain;
}
@keyframes wcLogoPulse {
  0%,100% { opacity: .07; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity: .11; transform: translate(-50%,-50%) scale(1.04); }
}

/* خطوط زمین */
#stats::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(250,237,205,.03) 80px),
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(250,237,205,.03) 80px);
  pointer-events: none; z-index: 0;
}

/* دایره مرکزی زمین */
#stats::after {
  content: '';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(60vw, 420px); height: min(60vw, 420px);
  border-radius: 50%;
  border: 1px solid rgba(250,237,205,.05);
  pointer-events: none; z-index: 0;
}

/* توپ‌های فوتبال شناور */
.stats-ball {
  position: absolute;
  font-size: var(--size, 1.5rem);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  animation: ballFloat var(--dur, 8s) var(--delay, 0s) infinite ease-in-out;
  filter: grayscale(.4) brightness(.7);
}
@keyframes ballFloat {
  0%   { opacity: 0; transform: translate(0,0) rotate(0deg); }
  8%   { opacity: var(--op, .18); }
  50%  { transform: translate(var(--tx,20px), var(--ty,-40px)) rotate(180deg); opacity: var(--op,.18); }
  92%  { opacity: var(--op,.18); }
  100% { opacity: 0; transform: translate(var(--tx2,10px), var(--ty2,-80px)) rotate(360deg); }
}

.stats-header-wrap {
  position: relative; z-index: 2;
}

/* گرید کارت‌ها */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative; z-index: 2;
}

.stat-card {
    background: rgba(7,26,20,.55);
    border: 1px solid rgba(250,237,205,.1);
    padding: 32px 20px 28px;
    text-align: center;
    position: relative;
    backdrop-filter: blur(4px);
    transition: background .35s, transform .35s var(--ease-out), border-color .35s;
    border-radius: 8px;
    overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cream), transparent);
  opacity: 0; transition: opacity .35s;
}
.stat-card:hover {
  background: rgba(11,45,34,.8);
  transform: translateY(-4px);
  border-color: rgba(250,237,205,.25);
}
.stat-card:hover::before { opacity: 1; }

/* عدد */
.stat-num {
  font-family: var(--font-num);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 900; line-height: 1;
  color: var(--cream);
  margin-bottom: 10px;
  display: block;
  transition: text-shadow .35s;
}
.stat-card:hover .stat-num {
  text-shadow: 0 0 28px rgba(250,237,205,.5);
}

/* خط جداکننده کوچک */
.stat-card .stat-divider {
  width: 28px; height: 1px;
  background: rgba(250,237,205,.35);
  margin: 0 auto 10px;
}

.stat-label {
  font-size: .82rem; font-weight: 700;
  color: var(--cream); line-height: 1.6; margin-bottom: 5px;
}
.stat-sub {
  font-size: .63rem; font-weight: 400;
  color: rgba(250,237,205,.45); letter-spacing: .04em; line-height: 1.5;
}

@media (max-width: 640px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (max-width: 360px) {
  .stats-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════
   CLOSING MANIFESTO
   ════════════════════════════════════════════════════════════ */
#manifesto {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 100px 24px;
}

/* پس‌زمینه — عکس یا ویدیو سینمایی */
.manifesto-bg {
  position: absolute; inset: 0; z-index: 0;
  background: var(--black-3);       /* placeholder تا عکس اضافه شود */
}
/* عکس یا ویدیو داخل div */
.manifesto-bg img,
.manifesto-bg video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.28) saturate(.5);
  z-index: 0;
}
/* لایه رنگی روی عکس/ویدیو */
.manifesto-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(250,237,205,.07) 0%, transparent 65%),
    linear-gradient(to bottom, rgba(8,8,8,.1) 0%, rgba(8,8,8,.10) 50%, rgba(8,8,8,0.2) 140%);
    opacity: 0.4;
}

/* placeholder گرافیکی — فقط وقتی عکس نیست */
.manifesto-placeholder {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(250,237,205,.08) 0%, transparent 60%),
    linear-gradient(160deg, #0a0a0a 0%, #111 40%, #0d0d0d 100%);
}
.manifesto-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(255,255,255,.018) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255,255,255,.018) 80px);
}
/* وقتی عکس هست placeholder پنهان بشه */
.manifesto-bg.has-image .manifesto-placeholder { display: none; }

.manifesto-content {
  position: relative; z-index: 3;
  max-width: 680px;
}
.manifesto-icon {
  font-size: 2.5rem; color: var(--cream); opacity: .5; margin-bottom: 24px;
  display: block; line-height: 1;
}
.manifesto-text {
  font-size: clamp(1.15rem, 4.5vw, 2rem); font-weight: 700;
  line-height: 1.75; margin-bottom: 22px;
}
.manifesto-text em { font-style: normal; color: var(--cream); }
.manifesto-sub {
  font-size: .95rem; font-weight: 400; color: var(--white-dim);
  line-height: 2.1; max-width: 420px; margin: 22px auto 0;
}

/* نشانه عکس مورد نیاز */
.img-needed-hint {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  font-size: .55rem; font-weight: 700; letter-spacing: .22em;
  color: rgba(250,237,205,.3); white-space: nowrap;
  z-index: 3;
}


/* ════════════════════════════════════════════════════════════
   SITE HEADER — sticky
   ════════════════════════════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 24px;
  transition: background .35s, backdrop-filter .35s, box-shadow .35s;
}
.site-header.scrolled {
  background: rgba(4,4,4,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(250,237,205,.08);
}
.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__logo img {
  height: 48px;
  width: auto;
  display: block;
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* دکمه‌های هدر */
.sh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 8px;
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .2s, transform .15s, background .2s;
}
.sh-btn:hover { opacity: .85; transform: translateY(-1px); }

.sh-btn--primary {
  background: var(--gold);
  color: #000;
}
.sh-btn--ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(250,237,205,.35);
}
.sh-btn--ghost:hover {
  border-color: rgba(250,237,205,.7);
  background: rgba(250,237,205,.06);
}

/* فضای بالا برای محتوای زیر هدر */
body { padding-top: 68px; }
#hero { margin-top: -68px; }

@media (max-width: 480px) {
  .sh-btn { padding: 8px 12px; font-size: .75rem; }
  .site-header__logo img { height: 38px; }
}


/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
footer {
  background: var(--black);
  padding: 60px 24px 48px;
  text-align: center;
}
.foot-inner {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.foot-gold-line {
  width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cream), transparent);
  margin-bottom: 8px;
}
.foot-logo-link { display: inline-block; opacity: .7; transition: opacity .3s; }
.foot-logo-link:hover { opacity: 1; }
.foot-logo-link img { height: 34px; width: auto; display: block; }
.foot-tagline {
  font-size: .58rem; font-weight: 700; letter-spacing: .42em;
  color: var(--cream-dim); text-transform: uppercase;
}
.foot-copy { font-size: .62rem; color: rgba(184,169,138,.22); letter-spacing: .05em; }


/* ════════════════════════════════════════════════════════════
   MODAL ویدیو
   ════════════════════════════════════════════════════════════ */
.modal-wrap {
  position: fixed; inset: 0; background: rgba(0,0,0,.94); z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.modal-wrap.open { opacity: 1; pointer-events: all; }
.modal-box {
  position: relative; width: min(94vw, 860px);
  border: 1px solid rgba(250,237,205,.22);
  box-shadow: 0 0 80px rgba(0,0,0,.8);
}
.modal-box video { display: block; width: 100%; max-height: 80vh; background: #000; }
.modal-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--black-3);
  border-bottom: 1px solid rgba(250,237,205,.12);
}
.modal-title { font-size: .85rem; font-weight: 700; color: var(--white-dim); }
.modal-close {
  background: none; border: none; color: var(--cream);
  font-size: 1.2rem; cursor: pointer; display: flex; align-items: center;
  padding: 4px;
}


/* ════════════════════════════════════════════════════════════
   MOBILE  ≤ 500px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 500px) {
  .museum-grid { grid-template-columns: 1fr; padding: 0 14px; }
  .legends-inner { padding: 0 14px; }
  .s-tab { padding: 10px 16px; font-size: .75rem; }
  .series-tabs { width: 100%; max-width: 340px; }
  .tab {
    padding: 8px 14px;
  }
  #living-legends {
    padding: 60px 0 90px;
}
}