/* ============================================================
   SAZIST — Landing (Scroll-driven full-screen stage)
   اسکرول فقط متن و عکس پس‌زمینه را عوض می‌کند
   پالت: کرم + مشکی + طلایی
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family:"Yekan Bakh"; src:url("../assets/fonts/Yekan Bakh Fa-En 03 Light.woff") format("woff"); font-weight:300; font-display:swap; }
@font-face { font-family:"Yekan Bakh"; src:url("../assets/fonts/Yekan Bakh Fa-En 04 Regular.woff") format("woff"); font-weight:400; font-display:swap; }
@font-face { font-family:"Yekan Bakh"; src:url("../assets/fonts/Yekan Bakh Fa-En 05 Medium.woff") format("woff"); font-weight:500; font-display:swap; }
@font-face { font-family:"Yekan Bakh"; src:url("../assets/fonts/Yekan Bakh Fa-En 06 Bold.woff") format("woff"); font-weight:700; font-display:swap; }
@font-face { font-family:"Yekan Bakh"; src:url("../assets/fonts/Yekan Bakh Fa-En 07 Heavy.woff") format("woff"); font-weight:800; font-display:swap; }
@font-face { font-family:"Yekan Bakh"; src:url("../assets/fonts/Yekan Bakh Fa-En 08 Fat.woff") format("woff"); font-weight:900; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --bg-0:#f4eee4; --surface:#fbf7f0; --surface-2:#fffdf8;
  --line:rgba(40,33,22,.10); --line-strong:rgba(40,33,22,.18);
  --ink:#211d17; --text:#211d17; --text-dim:#6a6052; --text-faint:#9a8f7d;
  --gold:#b1854b; --gold-2:#c9a064; --gold-deep:#936a37; --gold-soft:rgba(177,133,75,.12);
  --grad:linear-gradient(120deg,var(--gold-deep),var(--gold-2));
  --grad-ink:linear-gradient(135deg,#2a2620,#14110c);
  --radius:18px; --radius-sm:12px;
  --shadow:0 30px 70px -28px rgba(60,45,20,.35);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:"Yekan Bakh","Segoe UI",Tahoma,sans-serif;
  background:#0c0a07; color:var(--text); line-height:1.85;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.locked{ overflow:hidden; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--gold); color:#fff; }

/* ============================================================
   GATE
   ============================================================ */
.gate{
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:24px;
  background:rgba(20,16,11,.30);
  backdrop-filter:blur(5px) saturate(112%); -webkit-backdrop-filter:blur(5px) saturate(112%);
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
.gate.hidden{ opacity:0; visibility:hidden; }
.gate-card{
  width:min(440px,100%); background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:36px 32px 30px; position:relative; overflow:hidden; animation:pop .7s var(--ease) both;
}
.gate-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad); }
@keyframes pop{ from{ transform:translateY(24px) scale(.96); opacity:0;} to{ transform:none; opacity:1;} }
.gate-logo{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:18px; text-align:center; }
.gate-logo img{ width:200px; height:auto; }
.gate-card h2{ font-size:1.22rem; font-weight:800; margin-bottom:6px; text-align:center; }
.gate-card .sub{ color:var(--text-dim); font-size:.92rem; margin-bottom:22px; text-align:center; }
.field{ margin-bottom:15px; }
.field label{ display:block; font-size:.85rem; color:var(--text-dim); margin-bottom:7px; font-weight:500; }
.field input{
  width:100%; padding:13px 15px; background:#fff; color:var(--ink);
  border:1.5px solid var(--line-strong); border-radius:var(--radius-sm);
  font-family:inherit; font-size:1rem; outline:none; transition:border-color .25s, box-shadow .25s;
}
.field input::placeholder{ color:var(--text-faint); }
.field input:focus{ border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-soft); }
.field input[dir="ltr"]{ text-align:right; letter-spacing:1px; }
.field.invalid input{ border-color:#d64545; box-shadow:0 0 0 4px rgba(214,69,69,.12); }
.field .err{ color:#c33; font-size:.78rem; margin-top:6px; min-height:1em; opacity:0; transition:opacity .2s; }
.field.invalid .err{ opacity:1; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:inherit; font-weight:800; cursor:pointer; border:none; border-radius:var(--radius-sm); transition:transform .2s var(--ease), filter .2s; }
.btn-primary{ width:100%; padding:15px; margin-top:8px; font-size:1.02rem; background:var(--grad-ink); color:#f6ead2; box-shadow:var(--shadow); }
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.12); }
.gate-note{ margin-top:18px; font-size:.78rem; color:var(--text-faint); display:flex; align-items:center; gap:8px; justify-content:center; text-align:center; }
.gate-note svg{ width:15px; height:15px; flex:none; }

/* ============================================================
   PAGE / STAGE
   ============================================================ */
.page{ position:relative; z-index:1; transition:filter .8s var(--ease); }
.page.blurred{ filter:blur(3px) brightness(.92); }

/* هدر */
.site-header{
  position:fixed; top:0; inset-inline:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(18px,4vw,48px);
  background:linear-gradient(to bottom, rgba(8,6,4,.55), transparent);
}
.site-header .brand img{ width:170px; height:auto; }
.header-cta{
  font-size:.85rem; font-weight:700; color:#f3ead8;
  border:1px solid rgba(243,234,216,.4); padding:9px 18px; border-radius:999px;
  transition:background .25s, border-color .25s; backdrop-filter:blur(4px);
}
.header-cta:hover{ background:rgba(201,160,100,.25); border-color:var(--gold-2); }

/* صحنهٔ ثابت تمام‌صفحه */
.stage{ position:fixed; inset:0; z-index:1; overflow:hidden; }

/* لایه‌های پس‌زمینه (کراس‌فید) */
.stage-bg{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--ease); will-change:opacity; }
.stage-bg .img{
  position:absolute; inset:-2%; background-size:cover; background-position:center;
  transform:scale(1); transition:transform 1.2s var(--ease); will-change:transform;
}
.stage-bg.active{ opacity:1; }
/* هر بار که عکسی فعال می‌شود (با اسکرول)، این حرکت از نو اجرا می‌شود:
   از حالت بدون‌زوم شروع و آرام زوم/پن می‌کند، سپس ملایم ادامه می‌دهد. */
.stage-bg.active .img{ animation:kenburns 18s var(--ease) infinite alternate; }
@keyframes kenburns{
  0%   { transform:scale(1)    translate(0%, 0%); }
  100% { transform:scale(1.08) translate(-1.8%, 1.2%); }
}
@media (prefers-reduced-motion:reduce){
  .stage-bg.active .img{ animation:none; transform:scale(1); }
}
.stage-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,10,7,.55) 0%, rgba(12,10,7,.35) 40%, rgba(12,10,7,.78) 100%);
}

/* لایهٔ متن */
.stage-content{ position:absolute; inset:0; z-index:3; display:grid; place-items:center; padding:96px clamp(22px,6vw,64px); pointer-events:none; }
.slide{
  position:absolute; width:100%; max-width:min(1000px,92vw); text-align:center; color:#f6efe1;
  overflow-wrap:normal; word-break:keep-all;
  opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.slide.active{ opacity:1; transform:none; }
.slide .eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-size:.85rem; color:var(--gold-2); font-weight:700;
  background:rgba(201,160,100,.12); border:1px solid rgba(201,160,100,.35);
  padding:8px 16px; border-radius:999px; margin-bottom:24px;
}
.slide .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold-2); box-shadow:0 0 12px var(--gold-2); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.7);} }
.slide .logo-big{ width:clamp(220px,34vw,360px); height:auto; margin:0 auto 24px; filter:drop-shadow(0 8px 30px rgba(0,0,0,.5)); }
.slide h2{ font-size:clamp(1.9rem,6vw,4.2rem); font-weight:900; line-height:1.25; letter-spacing:1px; text-shadow:0 6px 30px rgba(0,0,0,.5); text-wrap:balance; }
.slide h2 .grad{ background:linear-gradient(120deg,var(--gold-2),#e7c98f); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.slide p.kick{ font-size:clamp(1rem,2.4vw,1.5rem); color:#e9ddc8; font-weight:500; margin-top:16px; text-shadow:0 4px 20px rgba(0,0,0,.5); text-wrap:balance; }
.slide .tags{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px; }
.slide .tags span{ font-size:.9rem; color:#f3ead8; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); padding:7px 16px; border-radius:999px; backdrop-filter:blur(4px); }

/* اسلاید پایانی (به‌زودی) */
.slide.final h2{ font-size:clamp(3rem,16vw,9rem); letter-spacing:8px; background:linear-gradient(120deg,#fff7e8,var(--gold-2) 55%,#e7c98f); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.slide .badge{ display:inline-block; font-size:.85rem; font-weight:800; letter-spacing:4px; color:var(--gold-2); border:1px solid rgba(201,160,100,.4); background:rgba(201,160,100,.1); padding:9px 20px; border-radius:999px; margin-bottom:26px; }
.countdown{ display:flex; gap:12px; justify-content:center; margin-top:36px; flex-wrap:wrap; }
.cd-unit{ min-width:88px; background:rgba(255,255,255,.07); border:1px solid rgba(201,160,100,.3); border-radius:var(--radius-sm); padding:16px 10px; backdrop-filter:blur(4px); }
.cd-unit .v{ font-size:clamp(1.7rem,6vw,2.6rem); font-weight:900; color:#f6efe1; line-height:1; }
.cd-unit .u{ color:var(--gold-2); font-size:.78rem; margin-top:8px; }
.contact{ margin-top:34px; display:flex; gap:22px; justify-content:center; flex-wrap:wrap; color:#d9cdb6; font-size:.92rem; }
.contact a, .contact span{ display:inline-flex; align-items:center; gap:8px; }
.contact svg{ width:17px; height:17px; color:var(--gold-2); }

/* نقاط پیشرفت (ناوبری اسلایدها) */
.progress{ position:fixed; z-index:40; inset-inline-end:clamp(14px,3vw,34px); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:14px; }
.progress button{
  width:11px; height:11px; padding:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.3); border:1px solid rgba(255,255,255,.5);
  transition:transform .3s var(--ease), background .3s;
}
.progress button.on{ background:var(--gold-2); border-color:var(--gold-2); transform:scale(1.5); }

/* راهنمای اسکرول */
.scroll-hint{ position:fixed; z-index:40; bottom:24px; left:50%; transform:translateX(-50%); color:rgba(243,234,216,.7); font-size:.76rem; display:flex; flex-direction:column; align-items:center; gap:8px; transition:opacity .5s; }
.scroll-hint.gone{ opacity:0; pointer-events:none; }
.scroll-hint .mouse{ width:24px; height:38px; border:2px solid rgba(243,234,216,.6); border-radius:14px; position:relative; }
.scroll-hint .mouse::after{ content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:4px; height:7px; border-radius:2px; background:var(--gold-2); animation:wheel 1.6s infinite; }
@keyframes wheel{ 0%{opacity:0;top:7px;} 30%{opacity:1;} 100%{opacity:0;top:18px;} }

/* اسکرولر — طول اسکرول را تأمین می‌کند */
.scroller{ position:relative; z-index:5; }
.scroller .panel{ height:100svh; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; }
  .stage-bg .img{ transition:none; }
}

@media (max-width:600px){
  .row2{ grid-template-columns:1fr; }
  .header-cta{ display:none; }
  .gate-card{ padding:30px 22px 26px; }
  .site-header .brand img{ width:140px; }
  .progress{ inset-inline-end:10px; }
  .cd-unit{ min-width:70px; padding:13px 8px; }
  .stage-content{ padding:90px 20px; }
  .slide h2{ font-size:clamp(1.6rem,7.4vw,2.4rem); letter-spacing:0; line-height:1.28; }
  .slide.final h2{ font-size:clamp(2.6rem,18vw,4rem); letter-spacing:3px; }
  .slide p.kick{ font-size:clamp(.95rem,4vw,1.15rem); }
  .progress{ display:none; }
}