/* Site intro overlay (js/intro.js). Brand tokens only; no external assets. */
html.intro-on { overflow: hidden; }

#siteIntro, #siteIntroB {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;   /* longhand: older iOS has no inset */
  transition: transform .9s cubic-bezier(.76, 0, .24, 1);
  will-change: transform;
}
#siteIntro  { z-index: 2147483002; background: #0e2330; color: #fff; display: grid; place-items: center; overflow: hidden;
  font-family: "Montserrat", system-ui, sans-serif; cursor: pointer; }
#siteIntroB { z-index: 2147483001; background: linear-gradient(160deg, #2b6f91 0%, #7a7fa8 50%, #ff7a72 100%); }
#siteIntro.is-leaving  { transform: translateY(-100%); }
#siteIntroB.is-leaving { transform: translateY(-100%); transition-delay: .14s; }

/* soft brand glow behind the text */
#siteIntro::before {
  content: ""; position: absolute; width: min(70vw, 620px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(57,143,186,.32), rgba(255,108,99,.14) 62%, transparent);
  animation: introGlow 3s ease-out both;
}
@keyframes introGlow { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.intro__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(18px, 3vw, 28px); padding: 0 24px; text-align: center; }

/* ---- stage: greetings, then name, in the same grid cell (no layout shift) ---- */
.intro__stage { display: grid; place-items: center; min-height: clamp(150px, 26vw, 230px); }
.intro__stage > * { grid-area: 1 / 1; }

.intro__greets { position: relative; display: grid; place-items: center; }
.intro__w {
  grid-area: 1 / 1;
  font-weight: 800;
  font-size: clamp(3.2rem, 13vw, 8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  opacity: 0;
  background: linear-gradient(270deg, #7cc3e6 6%, #ff7a72 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: introWord .95s cubic-bezier(.22, 1, .36, 1) both;
}
.intro__w[lang="fa"] { font-family: "Vazirmatn", "Noto Sans Arabic", "Geeza Pro", "Tahoma", sans-serif; letter-spacing: 0; font-weight: 700; }
.intro__w--1 { animation-delay: .25s; }
.intro__w--2 { animation-delay: 1.05s; }
.intro__w--3 { animation-delay: 1.85s; }
@keyframes introWord {
  0%   { opacity: 0; transform: translateY(40%) scale(.96); filter: blur(8px); }
  22%  { opacity: 1; transform: none; filter: none; }
  78%  { opacity: 1; transform: none; filter: none; }
  100% { opacity: 0; transform: translateY(-40%) scale(1.02); filter: blur(6px); }
}

.intro__final { opacity: 0; animation: introShow .01s linear 2.85s forwards; text-align: center; }
@keyframes introShow { to { opacity: 1; } }
.intro__name { margin: 0; font-weight: 800; font-size: clamp(2.4rem, 8.5vw, 5.4rem); line-height: 1.05; letter-spacing: -0.025em; }
.intro__ch { display: inline-block; opacity: 0; transform: translateY(70%) rotate(6deg);
  animation: introChar .6s cubic-bezier(.22, 1, .36, 1) calc(2.85s + var(--i) * .06s) forwards; }
.intro__sp { display: inline-block; width: .3em; }
/* brand gradient across the whole name: each letter samples the same gradient at its own offset */
.intro__ch {
  color: transparent;
  background: linear-gradient(90deg, #ff7a72 0%, #b9a8bd 50%, #7cc3e6 100%);
  background-size: 9.6em 100%;
  background-position: calc(var(--i) * -0.74em) 0;
  -webkit-background-clip: text; background-clip: text;
}
@keyframes introChar { to { opacity: 1; transform: none; } }
.intro__rule { display: block; width: 96px; height: 3px; margin: clamp(14px, 2.4vw, 22px) auto; border-radius: 999px;
  background: linear-gradient(90deg, #ff7a72 0%, #b9a8bd 50%, #7cc3e6 100%); transform: scaleX(0); transform-origin: left;
  animation: introRule .8s cubic-bezier(.22, 1, .36, 1) 3.55s forwards; }
@keyframes introRule { to { transform: scaleX(1); } }
.intro__role { margin: 0; font-size: clamp(.78rem, 2vw, 1rem); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #b9c9d4;
  opacity: 0; transform: translateY(8px); animation: introFade .8s ease 3.7s forwards; }
.intro__role i { font-style: normal; color: #ff6c63; }
@keyframes introFade { to { opacity: 1; transform: none; } }

/* ---- language chips: highlight follows the greeting ---- */
.intro__langs { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; opacity: 0; animation: introFade .4s ease .1s forwards; }
.intro__lang { padding: 6px 14px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.22); color: #9fb3c0; font-size: .8rem; font-weight: 700; }
.intro__lang[lang="fa"] { font-family: "Vazirmatn", "Noto Sans Arabic", "Geeza Pro", "Tahoma", sans-serif; }
.intro__lang--1 { animation: chipOn .95s linear .25s both; }
.intro__lang--2 { animation: chipOn .95s linear 1.05s both; }
.intro__lang--3 { animation: chipOn .95s linear 1.85s both; }
@keyframes chipOn {
  0%, 100% { background: transparent; border-color: rgba(255,255,255,.22); color: #9fb3c0; }
  12%, 85% { background: #398fba; border-color: #398fba; color: #fff; }
}

/* ---- floating icon tiles ---- */
.intro__tiles { position: absolute; inset: 0; pointer-events: none; }
.intro__tile {
  position: absolute; display: grid; place-items: center;
  width: clamp(40px, 5vw, 60px); aspect-ratio: 1; border-radius: 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #7cc3e6;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  opacity: 0; transform: scale(.5) translateY(14px);
  animation: introTile .8s cubic-bezier(.34, 1.56, .64, 1) forwards, introFloat 3.4s ease-in-out infinite alternate;
}
.intro__tile svg { width: 52%; height: 52%; }
.intro__tile:nth-child(even) { color: #ff8a82; }
@keyframes introTile { to { opacity: 1; transform: none; } }
@keyframes introFloat { from { margin-top: -5px; } to { margin-top: 5px; } }
.intro__tile--1 { left: 8%;  top: 18%; animation-delay: .2s, 1s; }
.intro__tile--2 { right: 9%; top: 14%; animation-delay: .45s, 1.2s; }
.intro__tile--3 { left: 13%; bottom: 18%; animation-delay: .7s, 1.4s; }
.intro__tile--4 { right: 8%; bottom: 20%; animation-delay: .95s, 1.6s; }
.intro__tile--5 { left: 30%; top: 8%;  animation-delay: 1.2s, 1.8s; }
.intro__tile--6 { right: 27%; bottom: 9%; animation-delay: 1.45s, 2s; }
.intro__tile--7 { left: 4%;  top: 52%; animation-delay: 1.7s, 2.2s; }
.intro__tile--8 { right: 4%; top: 46%; animation-delay: 1.95s, 2.4s; }
@media (max-width: 560px) { .intro__tile--5, .intro__tile--6 { display: none; } .intro__tile--7 { top: 27%; left: 6%; } .intro__tile--8 { top: 71%; right: 6%; } }

/* ---- progress hairline + skip ---- */
.intro__bar { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: linear-gradient(90deg, #ff7a72 0%, #b9a8bd 50%, #7cc3e6 100%);
  transform: scaleX(0); transform-origin: left; animation: introBar 5s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes introBar { to { transform: scaleX(1); } }
.intro__skip { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 2;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.4); background: transparent; color: #fff;
  font: 700 .85rem "Montserrat", system-ui, sans-serif; cursor: pointer; }
.intro__skip:focus-visible { outline: 3px solid #7cc3e6; outline-offset: 3px; }

/* Reduced motion: keep the intro, drop movement (no slides, blur, floating or tilt); fades only. */
@media (prefers-reduced-motion: reduce) {
  #siteIntro, #siteIntroB { transition: opacity .5s ease; }
  #siteIntro.is-leaving, #siteIntroB.is-leaving { transform: none; opacity: 0; }
  #siteIntro::before { animation: none; }
  .intro__w { animation-name: introWordRM; filter: none; }
  @keyframes introWordRM { 0% { opacity: 0; } 22%, 78% { opacity: 1; } 100% { opacity: 0; } }
  .intro__ch { transform: none; }
  .intro__tile { animation: introTileRM .6s ease forwards; transform: none; }
  @keyframes introTileRM { to { opacity: 1; } }
}