/* ورودی انیمیشنی + انیمیشن ورود هیرو + استایل نام برند */

/* نام برند (لاتین) در هدر و فوتر */
#shopName, #footName {
  direction: ltr;
  letter-spacing: 1px;
}

/* ---------- صفحه‌ی ورودی ---------- */
.intro {
  position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(600px 400px at 50% 45%, rgba(255, 90, 43, .22), transparent 65%),
    #0c0f14;
  cursor: pointer;
  transition: transform .8s cubic-bezier(.77, 0, .18, 1), opacity .8s ease;
}
.intro::before {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0, transparent 70%);
}
.intro.out { transform: translateY(-100%); opacity: 0; pointer-events: none; }

/* عکس پس‌زمینه‌ی ورودی (اختیاری): public/images/intro.jpg */
.intro-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.14);
  transition: opacity 1s ease;
  animation: iZoom 4s ease-out both;
}
/* فقط پایین عکس کمی تیره می‌شود تا نوشته خوانا باشد؛ بقیه‌ی عکس کاملاً دیده می‌شود */
.intro-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(12, 15, 20, .94) 0%, rgba(12, 15, 20, .6) 26%, rgba(12, 15, 20, 0) 52%),
    radial-gradient(ellipse at center, rgba(12, 15, 20, 0) 55%, rgba(12, 15, 20, .45) 100%);
}
.intro-bg.on { opacity: 1; }
@keyframes iZoom { to { transform: scale(1); } }

/* حالت «با عکس»: شبکه و طرح پرینتر کنار می‌روند و نوشته به پایین صفحه می‌آید */
.intro-stage { transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.intro-art { transition: opacity .6s ease; }
.intro.has-photo::before { opacity: 0; }
.intro.has-photo .intro-art { opacity: 0; }
.intro.has-photo .intro-stage { transform: translateY(22vh); }
.intro.has-photo .intro-word { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .7)); }
.intro.has-photo .intro-tag { color: #d6dbe6; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.intro.has-photo .intro-bar i { animation-duration: 4s; }
.intro.has-photo .intro-skip { color: #c4cad8; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }

.intro-stage { position: relative; text-align: center; padding: 20px; }
.intro-art { width: 150px; height: 150px; margin: 0 auto 6px; overflow: visible; display: block; }

.i-layer {
  transform-box: fill-box; transform-origin: center;
  animation: iLayer .55s cubic-bezier(.2, .9, .3, 1.2) both;
}
.i-nozzle { animation: iSweep 1.1s ease-in-out .1s 2 alternate both; }
.i-nozzle-wrap { animation: iLift .7s ease-in 2.15s both; }
@keyframes iLayer {
  from { transform: translateY(-18px) scaleX(0); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes iSweep { from { transform: translateX(-34px); } to { transform: translateX(34px); } }
@keyframes iLift { to { transform: translateY(-60px); opacity: 0; } }

.intro-word {
  direction: ltr; font-family: var(--font-display); font-size: clamp(2.6rem, 10vw, 4.6rem); font-weight: 400; letter-spacing: .12em;
  line-height: 1.2; display: inline-flex; overflow: hidden; padding: 4px 6px;
}
.intro-word span {
  display: inline-block; color: #eef1f7;
  animation: iLetter .7s cubic-bezier(.2, .9, .3, 1) both;
}
.intro-word span.hot {
  color: #ff8a57;
}
@keyframes iLetter {
  from { transform: translateY(110%) rotate(8deg); opacity: 0; filter: blur(6px); }
  to { transform: none; opacity: 1; filter: none; }
}
.intro-tag {
  color: #9aa3b5; font-size: .95rem; margin-top: 4px;
  animation: iFade .8s ease 1.9s both;
}
@keyframes iFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.intro-bar {
  width: min(240px, 60vw); height: 4px; margin: 22px auto 0; border-radius: 99px;
  background: rgba(255, 255, 255, .08); overflow: hidden;
}
.intro-bar i {
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #ff5a2b, #ffb36b);
  transform-origin: left center; animation: iBar 2.5s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes iBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.intro-skip {
  position: absolute; bottom: 26px; left: 0; right: 0; text-align: center;
  color: #6b7387; font-size: .8rem; animation: iFade .6s ease 1s both;
}

/* ---------- ورود تدریجی هیرو بعد از ورودی ---------- */
html.has-intro .hero .eyebrow,
html.has-intro .hero h1,
html.has-intro .hero p.lead,
html.has-intro .hero .hero-cta,
html.has-intro .hero .hero-stats,
html.has-intro .hero .printer-art {
  animation: heroRise .9s cubic-bezier(.2, .8, .2, 1) both paused;
}
html.has-intro .hero h1 { animation-delay: .12s; }
html.has-intro .hero p.lead { animation-delay: .24s; }
html.has-intro .hero .hero-cta { animation-delay: .36s; }
html.has-intro .hero .hero-stats { animation-delay: .48s; }
html.has-intro .hero .printer-art { animation-name: heroZoom; animation-delay: .2s; }
html.site-ready .hero .eyebrow,
html.site-ready .hero h1,
html.site-ready .hero p.lead,
html.site-ready .hero .hero-cta,
html.site-ready .hero .hero-stats,
html.site-ready .hero .printer-art { animation-play-state: running; }
@keyframes heroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes heroZoom { from { opacity: 0; transform: scale(.9) translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  html.has-intro .hero * { animation: none !important; }
}