/* ============================================================
   بامداد — استایل مشترک بین صفحات (پالت، فونت، انیمیشن‌ها،
   نویگیشن، دکمهٔ CTA، فوتر). هر صفحهٔ جدید (پلنر، دستیار،
   گالری، ...) این فایل را import می‌کند و فقط استایل‌های
   مخصوص به خودش را جداگانه می‌نویسد.
   ============================================================ */

/* منبع واحد رنگ‌ها/توکن‌های پایه — نگاه کن به shared-tokens.css.
   بامداد-پلنر هم دقیقاً از همین فایل رنگ می‌خونه، پس تغییر پالت
   فقط باید توی shared-tokens.css انجام بشه، نه اینجا. */
@import url("shared-tokens.css");

*{margin:0;padding:0;box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  scroll-snap-type:y proximity;
}

body{
  background:var(--ink-base);
  color:var(--cream);
  font-family:'Vazirmatn', sans-serif;
  font-weight:400;
  overflow-x:hidden;
}

.num{
  font-family:'Vazirmatn', sans-serif;
  font-weight:500;
  letter-spacing:.07em;
}

a{color:inherit;text-decoration:none;}

/* ---------- Accessibility ---------- */

.skip-link{
  position:absolute;
  top:-100px;
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  background:var(--cream);
  color:var(--ink-base);
  padding:12px 22px;
  border-radius:8px;
  font-size:.95rem;
  font-weight:600;
  transition:top .25s var(--ease);
}

.skip-link:focus{
  top:16px;
}

a:focus-visible,
.cta:focus-visible,
.arrow-circle:focus-visible{
  outline:2px solid var(--cream);
  outline-offset:4px;
  border-radius:4px;
}

/* ---------- Preloader ---------- */

#preloader{
  position:fixed;
  inset:0;
  z-index:999;
  background:var(--ink-base);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  transition:opacity .35s var(--ease);
}

#preloader.is-done{
  opacity:0;
  pointer-events:none;
}

.preloader-mark{
  position:relative;
  width:48px;
  height:48px;
}

.preloader-mark::before{
  content:'';
  position:absolute;
  inset:-24px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(242,242,240,.16) 0%, rgba(242,242,240,0) 70%);
  filter:blur(4px);
  z-index:-1;
  opacity:0;
  animation:preloaderGlowFade .9s ease-out forwards;
}

@keyframes preloaderGlowFade{
  from{ opacity:0; }
  to{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .preloader-mark::before{ animation:none; opacity:1; }
}

@keyframes preloaderSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.preloader-mark.spin{
  animation:preloaderSpin .7s ease-in-out forwards;
}

@media (prefers-reduced-motion: reduce){
  .preloader-mark.spin{ animation:none; }
}

.preloader-bar{
  width:140px;
  height:2px;
  background:var(--hair);
  overflow:hidden;
  border-radius:2px;
}

.preloader-fill{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(to left, rgba(242,242,240,.35), var(--cream));
  transition:width .32s var(--ease);
}

@media (prefers-reduced-motion: reduce){
  #preloader{ display:none; }
}

/* ---------- Entrance motion ---------- */

@keyframes blurFadeUp{
  from{ opacity:0; filter:blur(18px); transform:translateY(30px); }
  to{ opacity:1; filter:blur(0); transform:translateY(0); }
}

.rise{
  opacity:0;
  animation:blurFadeUp 1s var(--ease) forwards;
  animation-play-state:paused;
}

body.preloader-done .rise{
  animation-play-state:running;
}

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .rise{ animation:none !important; opacity:1 !important; filter:none !important; transform:none !important; }
  .reveal{ transition:none !important; opacity:1 !important; transform:none !important; }
  *{ scroll-behavior:auto !important; }
}

/* ---------- Typewriter (pull-quote) ---------- */

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@keyframes typewriterBlink{
  0%,50%{ opacity:1; }
  51%,100%{ opacity:0; }
}

.typewriter-cursor{
  display:inline-block;
  width:2px;
  height:1em;
  background:var(--cream);
  margin-inline-start:2px;
  vertical-align:-0.15em;
  animation:typewriterBlink 1s steps(1,start) infinite;
  transition:opacity .3s var(--ease);
}

@media (prefers-reduced-motion: reduce){
  .typewriter-cursor{ display:none; }
}

/* ---------- Layout shell ---------- */

.content{
  position:relative;
  z-index:3;
}

/* ---------- Scroll progress ---------- */

.scroll-progress-track{
  position:fixed;
  top:0; left:0; right:0;
  height:3px;
  z-index:20;
  pointer-events:none;
}

.scroll-progress-bar{
  height:100%;
  width:0%;
  background:rgba(242,242,240,.55);
}

/* ---------- Sunrise mark (scroll-linked, decorative) ---------- */

.sunrise-mark{
  position:fixed;
  bottom:24px;
  left:24px;
  z-index:6;
  width:60px;
  height:60px;
  pointer-events:none;
  opacity:.8;
}

.sunrise-mark svg{
  width:100%;
  height:100%;
}

.sunrise-arc{
  transition:transform .1s linear, opacity .1s linear;
}

@media (prefers-reduced-motion: reduce){
  .sunrise-arc{ transition:none; }
}

@media (max-width:900px){
  .sunrise-mark{
    transform:scale(.75);
    transform-origin:bottom left;
  }
}

/* ---------- Dawn divider (signature motif, reused between sections) ---------- */
/* یک المان بین‌بخشی که به‌جای خط ساده، همون قوس طلوع رو تکرار می‌کنه —
   وقتی وارد دید می‌شه، قوس و خط افق «رسم» می‌شن (stroke-dashoffset)،
   دقیقاً یک بار. از کلاس reveal برای تشخیص ورود به دید استفاده می‌کنه،
   پس نیازی به observer جدا نداره. */
.dawn-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 0;
}

.dawn-divider svg{
  overflow:visible;
  width:140px;
  height:56px;
  flex-shrink:0;
}

.dawn-divider .divider-line{
  stroke-dasharray:120;
  stroke-dashoffset:120;
  transition:stroke-dashoffset 1.1s var(--ease);
}

.dawn-divider .divider-arc{
  stroke-dasharray:80;
  stroke-dashoffset:80;
  transition:stroke-dashoffset 1s var(--ease) .25s;
}

.dawn-divider.is-visible .divider-line{ stroke-dashoffset:0; }
.dawn-divider.is-visible .divider-arc{ stroke-dashoffset:0; }

@media (prefers-reduced-motion: reduce){
  .dawn-divider .divider-line,
  .dawn-divider .divider-arc{
    transition:none;
    stroke-dashoffset:0;
  }
}

/* ---------- Nav ---------- */

nav.top-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:10;
  display:flex;
  justify-content:center;
  padding:34px 24px;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}

nav.top-nav.scrolled{
  background:rgba(24,24,24,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(242,242,240,.22);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.7);
  padding:20px 24px;
}

nav.top-nav ul{
  display:flex;
  align-items:center;
  gap:40px;
  list-style:none;
}

nav.top-nav a{
  font-size:.92rem;
  color:var(--cream-soft);
  letter-spacing:.01em;
  position:relative;
  padding-bottom:4px;
  transition:color .35s var(--ease);
}

nav.top-nav a::after{
  content:'';
  position:absolute;
  right:0; left:0; bottom:0;
  height:1px;
  background:var(--cream);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .4s var(--ease);
}

nav.top-nav a:hover{ color:var(--cream); }
nav.top-nav a:hover::after{ transform:scaleX(1); }

/* ---------- Mobile nav toggle (hamburger) ---------- */
/* قبلاً روی موبایل nav.top-nav ul فقط display:none می‌شد بدون هیچ جایگزینی —
   یعنی کاربر موبایل هیچ راهی برای دیدن منو نداشت. حالا یک دکمهٔ همبرگر
   (فقط زیر ۹۰۰px دیده می‌شود) این لیست را به‌صورت یک پنل کشویی باز/بسته
   می‌کند؛ منطق باز/بسته‌شدن در اسکریپت هر صفحه است (نگاه کن به بخش
   «Mobile hamburger menu» در انتهای هر HTML). */
.nav-toggle{
  display:none;
  width:40px;
  height:40px;
  align-items:center;
  justify-content:center;
  background:rgba(242,242,240,.06);
  border:1px solid var(--hair);
  border-radius:50%;
  color:var(--cream);
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle svg{ width:18px; height:18px; stroke:currentColor; }

@media (max-width:900px){
  nav.top-nav{ justify-content:flex-end; }
  .nav-toggle{ display:inline-flex; }
  nav.top-nav ul{
    display:none;
    position:absolute;
    top:100%;
    right:24px;
    left:24px;
    margin-top:12px;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    background:rgba(10,10,10,.94);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--hair);
    border-radius:14px;
    padding:10px;
  }
  nav.top-nav ul.is-open{ display:flex; }
  nav.top-nav ul a{
    padding:13px 14px;
    display:block;
  }
  nav.top-nav ul a::after{ display:none; }
}

/* ---------- CTA button (shared component) ---------- */

.cta{
  display:inline-flex;
  align-items:center;
  gap:0;
  padding:6px;
  border:none;
  border-radius:999px;
  background:var(--cream);
  color:var(--ink-base);
  font-size:.98rem;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 10px 34px -10px rgba(242,242,240,.4), 0 1px 2px rgba(0,0,0,.3);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}

/* متن: ۲۶px تا لبهٔ دکمه، ۱۴px تا دایره؛ دایره: ۶px تا لبه. با logical property تا در هر جهت یکسان بماند */
.cta > span:not(.arrow-circle){
  padding-inline-start:20px;
  padding-inline-end:14px;
}

.cta:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 44px -10px rgba(242,242,240,.55), 0 1px 2px rgba(0,0,0,.3);
}

.cta.is-pressed{
  transform:scale(.97);
  transition:transform .12s var(--ease);
}

.cta .arrow-circle{
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:var(--ink-base);
  transition:transform .45s var(--ease);
}

.cta:hover .arrow-circle{
  transform:rotate(-45deg);
}

.cta .arrow-circle svg{
  width:15px; height:15px;
  stroke:var(--cream);
}

/* Secondary / low-emphasis CTA — same shape, kept as glass. Use for any
   call-to-action that should sit next to a primary .cta without competing
   with it (e.g. "بیشتر بدان" next to "شروع کن"). */
.cta.cta-ghost{
  background:rgba(242,242,240,.06);
  color:var(--cream);
  box-shadow:none;
  border:1px solid var(--hair);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.cta.cta-ghost:hover{
  background:rgba(242,242,240,.1);
  border-color:rgba(242,242,240,.4);
  box-shadow:none;
}

.cta.cta-ghost .arrow-circle{
  border:1px solid var(--cream);
  background:rgba(242,242,240,0);
}

.cta.cta-ghost:hover .arrow-circle{
  background:rgba(242,242,240,.16);
}

/* ---------- Footer (shared component) ---------- */

footer{
  padding:64px 8vw 60px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
  text-align:center;
}

footer .footer-brand{
  display:flex;
  align-items:center;
  gap:14px;
}

@keyframes markSpinOnce{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.bamdad-mark.spin-once{
  animation:markSpinOnce 1.1s ease-in-out forwards;
}

@media (prefers-reduced-motion: reduce){
  .bamdad-mark.spin-once{ animation:none; }
}

footer .footer-wordmark{
  font-size:clamp(2.5rem, 6vw, 5rem);
  font-weight:600;
  color:var(--cream);
  opacity:.9;
  line-height:1;
}

footer .footer-tagline{
  color:var(--cream-soft);
  font-size:1rem;
  max-width:480px;
  line-height:1.7;
  text-align:center;
}

footer .footer-contact{
  color:var(--cream-soft);
  font-size:.92rem;
  text-align:center;
}
footer .footer-contact a{
  color:var(--cream);
  border-bottom:1px solid var(--hair);
  transition:border-color .35s var(--ease);
}
footer .footer-contact a:hover,
footer .footer-contact a:focus-visible{
  border-bottom-color:var(--cream);
}

footer .footer-divider{
  width:100%;
  max-width:680px;
  border-top:1px solid var(--hair);
}

footer .footer-row{
  width:100%;
  max-width:900px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
}

footer .copy{
  color:var(--cream-faint);
  font-size:.85rem;
}

footer .foot-links{
  display:flex;
  gap:26px;
  list-style:none;
}

footer .foot-links a{
  font-size:.88rem;
  color:var(--cream-faint);
  transition:color .35s var(--ease);
}

footer .foot-links a:hover{
  color:var(--cream);
}

footer .foot-social{
  display:flex;
  gap:14px;
  list-style:none;
}

footer .foot-social a{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--hair);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--cream-faint);
  transition:border-color .35s var(--ease), color .35s var(--ease);
}

footer .foot-social a:hover{
  border-color:var(--cream);
  color:var(--cream);
}

footer .foot-social svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
}

@media (max-width:900px){
  footer .footer-row{
    flex-direction:column;
  }
}