/* =========================================================
   WELCOME INTRO
   WELCOME sits in the exact position of JAHANDIDEH on the hero.
   Ghost elements mirror the hero grid so the layout matches.
   ========================================================= */

/* ── Full-page overlay — mirrors .hero grid ── */
#site-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #f5f4f2;
  display: grid;
  place-items: center;
  align-content: center;
  row-gap: 22px;          /* same as .hero row-gap */
  text-align: center;
  padding: 120px 20px 80px; /* same as .hero padding */
  pointer-events: auto;
}

/* ── Name block: ROMAN ghost + WELCOME stacked — mirrors h1.name ── */
.wc-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Invisible ROMAN — occupies the same height as .first-name */
.wc-first-ghost {
  display: block;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: var(--first-size);
  letter-spacing: var(--first-letterspace);
  font-weight: 500;
  line-height: 1.15;
  color: transparent;
  user-select: none;
  pointer-events: none;
}

/* ── WELCOME — same type as .last-name ── */
#site-intro-word {
  opacity: 0;
  display: block;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: var(--last-size);
  letter-spacing: var(--last-letterspace);
  text-indent: var(--last-letterspace);
  font-weight: 500;
  line-height: 1.15;
  color: #1C1917;
  text-align: center;
  transition: opacity 0.85s ease;
  will-change: opacity;
}

/* ── Sub-ghost — mirrors designer-title + role + services-btn heights ──
   Pushes the whole block up so WELCOME aligns with JAHANDIDEH.        */
.wc-sub-ghost {
  display: block;
  pointer-events: none;
  /* designer-title ≈ 22px + gap 22 + role ≈ 14px + gap 22 + btn ≈ 42px */
  height: 122px;
}

@media (prefers-reduced-motion: reduce) {
  #site-intro { display: none !important; }
}