/* =========================================================
   MOEIN — personal site · v2
   Retro-futurism × modernist editorial × soft, rounded UI
   ========================================================= */

:root {
  --paper: #eeeae3;
  --paper-2: #e3ddd3;
  --card: #f8f6f2;
  --ink: #0e0d0c;
  --ink-2: #1a1816;
  --ink-3: #2a2622;
  --ember: #ff5a1f;
  --sun: #ffb238;
  --teal: #35c9a8;
  --violet: #b49aff;
  --sky: #9cc9ff;

  --fg: var(--ink);
  --muted: rgba(14, 13, 12, .56);
  --line: rgba(14, 13, 12, .12);

  --r-xl: clamp(26px, 3vw, 44px);
  --r-lg: clamp(20px, 2.1vw, 32px);
  --r-md: 18px;
  --inset: clamp(8px, .9vw, 14px);
  --gutter: clamp(18px, 4vw, 64px);

  --display: 'Unbounded', 'Vazirmatn', system-ui, sans-serif;
  --text: 'Geist', 'Vazirmatn', system-ui, sans-serif;
  --mono: 'Geist Mono', 'Vazirmatn', ui-monospace, monospace;

  --out: cubic-bezier(.16, 1, .3, 1);
  --ease: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.5, .64, 1);
}
html[lang="fa"] {
  --display: 'Vazirmatn', 'Unbounded', system-ui, sans-serif;
  --text: 'Vazirmatn', 'Geist', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html[lang="fa"] body { line-height: 1.85; }
.js body.is-loading { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
em { font-style: normal; }
::selection { background: var(--ember); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 12px; }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; font-feature-settings: "tnum"; direction: ltr; unicode-bidi: isolate; }
html[lang="en"] .mono:not([data-email]):not([data-phone]):not(.clock) { text-transform: uppercase; }

@media (hover: hover) and (pointer: fine) {
  .js body, .js a, .js button { cursor: none; }
}

/* ---------- glass ---------- */
.glass {
  background: linear-gradient(140deg, rgba(255,255,255,.2), rgba(255,255,255,.05) 60%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 18px 40px -18px rgba(0,0,0,.45);
}

.panel {
  position: relative;
  border-radius: var(--r-xl);
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}

.pulse { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5dff9c; flex-shrink: 0; }
.pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid #5dff9c; animation: ping 2s var(--out) infinite; }
.pulse--lg { width: 12px; height: 12px; }
@keyframes ping { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }

.pill-btn {
  display: inline-flex; align-items: center; gap: .7rem;
  height: 52px; padding-inline: 24px 8px;
  border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font-weight: 600; font-size: 15px;
  transition: background-color .4s, color .4s;
}
.pill-btn i {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal;
  background: var(--ink); color: var(--paper);
  transition: transform .6s var(--spring);
}
.pill-btn:hover i { transform: rotate(45deg) scale(1.06); }
html[dir="rtl"] .pill-btn:hover i { transform: rotate(-45deg) scale(1.06); }
.pill-btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.pill-btn--ghost i { background: currentColor; }
.pill-btn--ghost i { color: var(--ink); }
.panel .pill-btn--ghost i { color: var(--ink); background: var(--paper); }

/* =========================================================
   CURSOR — iPadOS-style morphing pointer
   ========================================================= */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  .js .cursor {
    display: grid; place-items: center;
    position: fixed; left: 0; top: 0; z-index: 96;
    width: 20px; height: 20px; border-radius: 999px;
    background: rgba(128, 124, 120, .34);
    border: 1px solid rgba(255,255,255,.2);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s, background-color .35s;
    will-change: transform, width, height;
  }
  .js .cursor.is-on { opacity: 1; }
  .cursor.is-magnet { background: rgba(128, 124, 120, .16); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cursor.is-view { background: rgba(248, 246, 242, .9); border-color: transparent; }
}
.cursor__label { font-size: 13px; font-weight: 600; color: var(--ink); opacity: 0; transform: scale(.5); transition: opacity .3s, transform .5s var(--spring); white-space: nowrap; }
.cursor.is-view .cursor__label { opacity: 1; transform: scale(1); }

/* =========================================================
   LOADER — Nothing-style glyph boot
   ========================================================= */
.dotfont { font-family: 'Doto', 'Geist Mono', 'Vazirmatn', monospace; font-weight: 800; letter-spacing: .04em; }
html[lang="fa"] .socials-head > .dotfont { letter-spacing: 0; font-weight: 700; }
.loader { display: none; }
.js .loader { display: block; position: fixed; inset: 0; z-index: 100; background: var(--paper); }
.loader__panel {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: #000; color: #fff; border-radius: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(22px, 3vw, 40px);
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.3px);
  background-size: 14px 14px;
}
.loader__top, .loader__bottom { display: flex; justify-content: space-between; align-items: center; gap: 2rem; font-size: 15px; direction: ltr; }
.loader__rec { display: inline-flex; align-items: center; gap: 10px; }
.loader__rec i { width: 10px; height: 10px; border-radius: 50%; background: #ff2a1a; box-shadow: 0 0 14px #ff2a1a; animation: rec 1.1s steps(1) infinite; }
@keyframes rec { 50% { opacity: .15; } }
.loader__core { position: relative; align-self: center; width: min(62vmin, 520px); aspect-ratio: 1; display: grid; place-items: center; }
.loader__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.loader__ring circle { fill: rgba(255,255,255,.12); transition: fill .25s, filter .25s; }
.loader__ring circle.on { fill: #fff; filter: drop-shadow(0 0 3px rgba(255,255,255,.9)); }
.loader__ring circle.head { fill: #ff2a1a; filter: drop-shadow(0 0 5px #ff2a1a); }
.loader__count { font-size: clamp(4.5rem, 15vmin, 9.5rem); line-height: 1; font-weight: 700; direction: ltr; opacity: 0; }
.loader__bar { display: flex; gap: 5px; flex: 1; max-width: 520px; }
.loader__bar i { flex: 1; height: 9px; border-radius: 3px; background: rgba(255,255,255,.12); transition: background-color .2s, box-shadow .2s; }
.loader__bar i.on { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.6); }
.loader__ver { color: rgba(255,255,255,.55); }

/* =========================================================
   LANGUAGE TRANSITION
   ========================================================= */
.langfx {
  position: fixed; inset: 0; z-index: 99; pointer-events: none;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  clip-path: circle(0% at 50% 0%);
  visibility: hidden;
}
.langfx__word { font-family: 'Unbounded', 'Vazirmatn', sans-serif; font-weight: 800; font-size: clamp(3rem, 10vw, 9rem); line-height: 1.3; }

/* =========================================================
   NAV — floating glass capsule
   ========================================================= */
.nav {
  position: fixed; top: calc(var(--inset) + 10px); left: 50%; z-index: 80;
  transform: translateX(-50%);
  transition: transform .7s var(--out);
}
.nav.is-hidden { transform: translate(-50%, calc(-100% - 90px)); }
.nav__pill {
  display: flex; align-items: center; gap: 4px;
  padding: 6px; border-radius: 999px;
  color: var(--paper);
  background: linear-gradient(140deg, rgba(40,36,32,.55), rgba(20,18,16,.35));
  border-color: rgba(255,255,255,.14);
  transition: background .6s, color .6s, border-color .6s, box-shadow .6s;
}
.nav.is-light .nav__pill {
  color: var(--ink);
  background: linear-gradient(140deg, rgba(255,255,255,.78), rgba(255,255,255,.5));
  border-color: rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 #fff, 0 16px 40px -18px rgba(14,13,12,.3);
}
.nav__logo { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; flex-shrink: 0; }
.nav__logo svg { width: 40px; height: 40px; transition: transform 1s var(--spring); }
.nav__logo:hover svg { transform: rotate(180deg); }
.nav__logo-bg { fill: var(--ember); }
.nav__logo-ring { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.nav__logo-core { fill: var(--ink); }

.nav__links { position: relative; display: flex; }
.nav__links a { position: relative; z-index: 1; padding: 0 16px; height: 44px; display: grid; place-items: center; font-size: 14px; font-weight: 500; border-radius: 999px; white-space: nowrap; opacity: .8; transition: opacity .3s; }
.nav__links a.is-active, .nav__links a:hover { opacity: 1; }
.nav__active { position: absolute; top: 0; left: 0; height: 44px; width: 0; border-radius: 999px; background: rgba(255,255,255,.14); opacity: 0; transition: background-color .6s; }
.nav.is-light .nav__active { background: rgba(14,13,12,.07); }

.lang { position: relative; display: flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.08); margin-inline: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.nav.is-light .lang { background: rgba(14,13,12,.05); box-shadow: inset 0 0 0 1px rgba(14,13,12,.06); }
.lang button { position: relative; z-index: 1; width: 42px; height: 34px; border-radius: 999px; font-size: 13px; font-weight: 700; font-family: 'Vazirmatn', 'Geist', sans-serif; opacity: .6; transition: opacity .3s, color .4s; }
.lang button.is-active { opacity: 1; color: var(--ink); }
.lang__thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 42px; border-radius: 999px; background: var(--paper); box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: transform .6s var(--spring); }
.nav.is-light .lang__thumb { background: #fff; }
html[lang="en"] .lang__thumb { transform: translateX(42px); }
html[lang="fa"] .lang__thumb { transform: translateX(0); }

.nav__cta { height: 44px; padding-inline: 20px; border-radius: 999px; display: grid; place-items: center; background: var(--ember); color: var(--ink); font-size: 14px; font-weight: 700; white-space: nowrap; }
.nav__menu { display: none; width: 44px; height: 44px; border-radius: 50%; position: relative; background: rgba(255,255,255,.1); }
.nav.is-light .nav__menu { background: rgba(14,13,12,.06); }
.nav__menu span { position: absolute; left: 14px; right: 14px; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .5s var(--spring); }
.nav__menu span:first-child { top: 18px; }
.nav__menu span:last-child { top: 25px; }
.menu-open .nav__menu span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .nav__menu span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.sheet {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  padding: 10px; border-radius: 30px;
  display: flex; flex-direction: column;
  color: var(--ink);
  background: linear-gradient(140deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
  border-color: #fff;
  transform-origin: top center;
  opacity: 0; visibility: hidden; transform: scale(.92) translateY(-10px);
  transition: opacity .4s, transform .6s var(--spring), visibility .4s;
}
.menu-open .sheet { opacity: 1; visibility: visible; transform: none; }
.sheet a { display: flex; align-items: baseline; gap: 12px; padding: 14px 16px; border-radius: 20px; font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1.3; }
.sheet a:active { background: rgba(14,13,12,.06); }
.sheet small { color: var(--muted); }
.sheet__foot { padding: 14px 16px 8px; color: var(--muted); text-transform: none; }

@media (max-width: 900px) {
  .nav { width: calc(100% - 2 * var(--inset) - 12px); }
  .nav__pill { justify-content: space-between; }
  .nav__links, .nav__cta { display: none; }
  .nav__menu { display: block; }
  .lang { margin-inline-start: auto; }
}

/* =========================================================
   SECTION SCAFFOLD (editorial)
   ========================================================= */
.section { position: relative; padding: clamp(5rem, 11vw, 10rem) var(--gutter); }

.shead { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.shead__no { height: 28px; padding: 0 12px; border-radius: 999px; display: inline-grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.shead__title { font-size: 15px; font-weight: 600; white-space: nowrap; }
.shead__rule { flex: 1; height: 1px; background: var(--line); transform-origin: var(--rule-origin, left); }
html[dir="rtl"] .shead__rule { --rule-origin: right; }
.shead__meta { color: var(--muted); white-space: nowrap; font-size: 12px; }
.shead--dark { --line: rgba(238,234,227,.16); --muted: rgba(238,234,227,.55); }

.display {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5.4vw, 5.6rem);
  font-weight: 700; line-height: 1.12; letter-spacing: -.03em;
  max-width: 18ch;
}
html[lang="fa"] .display { font-size: clamp(2.4rem, 6vw, 6.4rem); font-weight: 800; line-height: 1.35; letter-spacing: 0; }
.display em { color: var(--ember); }
.wm { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .02em .16em; margin: -.08em -.02em -.16em; }
.wi { display: inline-block; will-change: transform; }

/* =========================================================
   HERO
   ========================================================= */
.hero { height: 100vh; height: 100svh; min-height: 600px; padding: var(--inset); }
.hero__panel { height: 100%; will-change: transform; }
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -2; }
.hero__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 48%, transparent, rgba(14,13,12,.5)); }
.hero__grid { position: absolute; inset: 0; z-index: -1; display: flex; justify-content: space-evenly; pointer-events: none; }
.hero__grid i { width: 1px; height: 100%; background: linear-gradient(to bottom, transparent, rgba(238,234,227,.07) 20%, rgba(238,234,227,.07) 80%, transparent); }

.hero__hud { position: absolute; top: 34px; display: flex; flex-direction: column; gap: 2px; color: rgba(238,234,227,.6); font-size: 11px; text-transform: uppercase; }
.hero__hud b { font-weight: 500; color: var(--ember); }
.hero__hud--a { left: 34px; }
.hero__hud--b { right: 34px; text-align: right; }

.hero__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--gutter); padding-bottom: 6vh; }

.hero__titlewrap { position: relative; }
.hero__orbit { position: absolute; left: -12%; top: -16%; width: 124%; height: 132%; overflow: visible; pointer-events: none; z-index: 0; }
.hero__orbit ellipse, .hero__orbit path { fill: none; stroke: rgba(238,234,227,.32); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hero__orbit .dashed { stroke-dasharray: 2 7; stroke: rgba(238,234,227,.22); }
.planet circle { fill: var(--ember); }
.planet .planet__glow { fill: rgba(255,90,31,.25); filter: blur(6px); }

.hero__title { position: relative; z-index: 1; font-family: var(--display); line-height: 1; white-space: nowrap; user-select: none; }
.hero__name { display: inline-block; font-size: clamp(4.2rem, 16.5vw, 19rem); letter-spacing: -.045em; }
html[lang="fa"] .hero__name { font-size: clamp(5rem, 21vw, 24rem); letter-spacing: 0; line-height: 1.25; }
.char { display: inline-block; overflow: hidden; padding: .04em .015em .1em; margin-bottom: -.1em; vertical-align: top; }
.char__in, .hero__name--whole {
  display: inline-block;
  --wght: 500;
  font-variation-settings: "wght" var(--wght);
  font-weight: var(--wght);
  background: linear-gradient(180deg, #fffaf2 0%, #f1e8da 46%, #a99d8c 54%, #fff3e2 64%, #e9dccb 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  will-change: transform;
}
.hero__alt { margin-top: clamp(.6rem, 1.5vh, 1rem); color: rgba(238,234,227,.6); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
html[lang="en"] .hero__alt { letter-spacing: 0; text-transform: none; font-family: 'Vazirmatn', sans-serif; font-size: 14px; }
.hero__sub { margin-top: 1.2rem; max-width: 36ch; font-size: clamp(1rem, 1.35vw, 1.3rem); color: rgba(238,234,227,.82); font-weight: 400; }

.hero__widgets { position: absolute; inset: auto 20px 20px; display: flex; gap: 12px; align-items: stretch; }
.widget {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px 12px 12px; border-radius: 26px;
  color: var(--paper);
  background: linear-gradient(140deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.14);
}
html[dir="rtl"] .widget { padding: 12px 12px 12px 18px; }
.widget__txt { display: flex; flex-direction: column; line-height: 1.35; font-size: 13px; }
.widget__txt small { font-size: 11px; color: rgba(238,234,227,.55); }
.widget__txt b { font-size: 15px; font-weight: 600; }
.widget__txt span { color: rgba(238,234,227,.7); }
.widget--clock .clock { font-family: var(--mono); font-size: 18px; font-weight: 500; }
.dial { width: 58px; height: 58px; flex-shrink: 0; }
.dial__face { fill: rgba(238,234,227,.92); }
.dial__ticks line { stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
.dial__h, .dial__m { stroke: var(--ink); stroke-linecap: round; }
.dial__h { stroke-width: 4; } .dial__m { stroke-width: 2.6; }
.dial__s { stroke: var(--ember); stroke-width: 1.4; stroke-linecap: round; }
.dial__h, .dial__m, .dial__s { transform-origin: 50px 50px; transition: transform .45s var(--spring); }
.dial__pin { fill: var(--ember); }
.widget--status { margin-inline-end: auto; }
.widget--status .pulse { margin-inline: 8px 2px; }
.widget--scroll { padding: 12px 22px; font-size: 13px; font-weight: 500; }
.mouse { width: 22px; height: 34px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px rgba(238,234,227,.8); position: relative; flex-shrink: 0; }
.mouse i { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 3px; background: var(--paper); animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

@media (max-width: 900px) {
  .hero__hud { top: 92px; }
  .hero__hud--a { left: 22px; } .hero__hud--b { right: 22px; }
  .hero__widgets { inset: auto 12px 12px; }
  .widget--status { display: none; }
  .widget--clock { flex: 1; }
  .hero__orbit { left: -20%; width: 140%; }
}

/* =========================================================
   ABOUT
   ========================================================= */
.statement {
  font-size: clamp(1.8rem, 4.1vw, 4.3rem);
  font-weight: 500; line-height: 1.22; letter-spacing: -.025em;
  max-width: 1400px;
}
html[lang="fa"] .statement { font-weight: 600; line-height: 1.65; letter-spacing: 0; font-size: clamp(1.8rem, 4.2vw, 4.4rem); }
.statement .w { display: inline-block; }
.pill { display: inline-block; vertical-align: middle; width: 2.3em; height: 1em; border-radius: 999px; overflow: hidden; margin-inline: .08em; position: relative; top: -.06em; box-shadow: 0 6px 18px -8px rgba(14,13,12,.4); }
.pill img { width: 100%; height: 100%; object-fit: cover; }

.bento {
  display: grid; gap: 14px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(150px, auto);
  margin-top: clamp(4rem, 9vw, 8rem);
  perspective: 1400px;
}
.tile {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--card);
  padding: clamp(20px, 2.2vw, 32px);
  border: 1px solid rgba(14,13,12,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px -40px rgba(14,13,12,.45);
  transform-style: preserve-3d;
  will-change: transform;
}
.tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.35), transparent 45%);
  opacity: 0; transition: opacity .5s;
}
.tile:hover::after { opacity: 1; }
.tile--dark { background: var(--ink-2); color: var(--paper); border-color: rgba(255,255,255,.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 30px 60px -40px rgba(14,13,12,.6); }
.tile--dark::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.1), transparent 45%); }
.tile h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 1.5vw, 1.5rem); line-height: 1.3; letter-spacing: -.01em; }
html[lang="fa"] .tile h3 { font-weight: 800; letter-spacing: 0; }
.tile__label { display: block; color: var(--muted); margin-bottom: 1.4rem; }
.tile--dark .tile__label { color: rgba(238,234,227,.45); }

.tile--portrait { grid-column: 1 / 5; grid-row: 1 / 3; padding: 0; min-height: 560px; background: var(--ink); }
.tile--portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.tile__chip { position: absolute; inset: auto 14px 14px; padding: 14px 18px; border-radius: 22px; color: var(--paper); display: flex; flex-direction: column; line-height: 1.4; }
.tile__chip b { font-size: 16px; }
.tile__chip span { font-size: 13px; opacity: .75; }
.tile__badge { position: absolute; top: 16px; inset-inline-end: 16px; width: 104px; height: 104px; animation: spin 16s linear infinite; }
.tile__badge circle { fill: var(--ember); }
.tile__badge text { font-family: 'Geist Mono', monospace; font-size: 10.4px; letter-spacing: 1.6px; fill: var(--ink); font-weight: 500; }
@keyframes spin { to { transform: rotate(360deg); } }

.tile--intro { grid-column: 5 / 9; grid-row: 1; display: flex; flex-direction: column; }
.tile--intro p { margin-top: .9rem; font-size: clamp(1.02rem, 1.2vw, 1.2rem); color: rgba(14,13,12,.75); }
.dots { margin-top: auto; height: 46px; background-image: radial-gradient(rgba(14,13,12,.28) 1.2px, transparent 1.4px); background-size: 12px 12px; border-radius: 12px; -webkit-mask-image: linear-gradient(to right, #000, transparent); mask-image: linear-gradient(to right, #000, transparent); }
html[dir="rtl"] .dots { -webkit-mask-image: linear-gradient(to left, #000, transparent); mask-image: linear-gradient(to left, #000, transparent); }

.tile--radar { grid-column: 9 / 13; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; }
.radar { position: relative; width: 150px; aspect-ratio: 1; margin-inline: auto; margin-top: .5rem; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, rgba(53,201,168,.08), transparent 70%); }
.radar i { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(53,201,168,.35); }
.radar i:nth-child(2) { inset: 18%; } .radar i:nth-child(3) { inset: 36%; }
.radar__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(53,201,168,.55), transparent 25%); animation: spin 3.4s linear infinite; }
.radar b { position: absolute; left: var(--x); top: var(--y); width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal); animation: blip 3.4s infinite; }
.radar b:nth-of-type(2) { animation-delay: -1.2s; background: var(--ember); box-shadow: 0 0 12px var(--ember); }
.radar b:nth-of-type(3) { animation-delay: -2.3s; }
@keyframes blip { 0%, 100% { opacity: .2; transform: scale(.7); } 15% { opacity: 1; transform: scale(1.2); } }
.tile__foot p { font-size: 14px; color: rgba(238,234,227,.6); margin-top: .3rem; }

.tile--services { grid-column: 5 / 13; grid-row: 2; }
.services { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 1.4rem; }
.services li {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 18px;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  font-size: clamp(.98rem, 1.15vw, 1.15rem); font-weight: 500;
  transition: background-color .4s, transform .6s var(--spring);
}
.services li:hover { background: var(--paper); color: var(--ink); transform: translateY(-3px); }
.services li .mono { color: var(--ember); }

.tile--tools { grid-column: 1 / 7; grid-row: 3; }
.tile--tools h3 { margin-bottom: 1.2rem; }
.tools { overflow: hidden; margin-inline: calc(-1 * clamp(20px, 2.2vw, 32px)); padding: 4px 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.tools__track { display: flex; gap: 8px; width: max-content; animation: slide 28s linear infinite; }
.tools__track--rev { animation-direction: reverse; animation-duration: 34s; }
.tools__track span { height: 42px; padding: 0 18px; border-radius: 999px; display: inline-grid; place-items: center; font-weight: 500; font-size: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(14,13,12,.07), 0 4px 10px -6px rgba(14,13,12,.2); white-space: nowrap; }
.tools__track span:nth-child(5n+1) { background: var(--ink); color: var(--paper); }
.tools__track span:nth-child(7n+3) { background: var(--sun); }
@keyframes slide { to { transform: translateX(-50%); } }

.stats { grid-column: 7 / 13; grid-row: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat { display: flex; flex-direction: column; justify-content: space-between; border-radius: var(--r-lg); padding: 22px; min-height: 220px; position: relative; overflow: hidden; }
.stat:nth-child(1) { background: var(--ember); }
.stat:nth-child(2) { background: var(--sun); }
.stat:nth-child(3) { background: var(--violet); }
.stat::before { content: ""; position: absolute; width: 140%; aspect-ratio: 1; border-radius: 50%; inset-inline-end: -70%; top: -60%; box-shadow: inset 0 0 0 1px rgba(14,13,12,.15), 0 0 0 26px rgba(14,13,12,.03); }
.stat__num { font-family: 'Unbounded', 'Vazirmatn', sans-serif; font-size: clamp(2.6rem, 4.6vw, 4.6rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
html[lang="fa"] .stat__num { font-family: 'Vazirmatn', sans-serif; font-weight: 900; letter-spacing: 0; }
.stat__num sup { font-size: .45em; vertical-align: top; position: relative; top: .25em; }
.stat small { font-size: 13px; font-weight: 600; position: relative; }

@media (max-width: 1100px) {
  .tile--portrait { grid-column: 1 / 7; }
  .tile--intro { grid-column: 7 / 13; }
  .tile--radar { grid-column: 7 / 13; grid-row: 2; }
  .tile--services { grid-column: 1 / 13; grid-row: 3; }
  .tile--tools { grid-column: 1 / 13; grid-row: 4; }
  .stats { grid-column: 1 / 13; grid-row: 5; }
}
@media (max-width: 700px) {
  .bento { grid-template-columns: 1fr; }
  .tile--portrait, .tile--intro, .tile--radar, .tile--services, .tile--tools, .stats { grid-column: 1; grid-row: auto; }
  .tile--portrait { min-height: 460px; }
  .services { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { min-height: 170px; }
  .stat:nth-child(3) { grid-column: 1 / 3; min-height: 140px; }
}

/* =========================================================
   COLLAB
   ========================================================= */
.collab .display { margin-bottom: clamp(3rem, 6vw, 5rem); }
.brands { overflow: hidden; margin-inline: calc(-1 * var(--gutter)); display: flex; flex-direction: column; gap: 12px; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.brands__track { display: flex; gap: 12px; width: max-content; will-change: transform; }
.brand {
  display: inline-flex; align-items: center; gap: 14px;
  height: 76px; padding: 0 30px 0 14px; border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 1px 0 #fff, 0 12px 30px -20px rgba(14,13,12,.35);
  font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -.02em; white-space: nowrap;
  transition: background-color .4s, color .4s;
}
.brand svg, .brand img { width: 48px; height: 48px; flex-shrink: 0; }
.brand img { border-radius: 14px; object-fit: cover; }
html[lang="fa"] .brand { font-family: 'Vazirmatn', sans-serif; font-weight: 800; letter-spacing: 0; }
.brand:hover { background: var(--ink); color: var(--paper); }

.stack { margin-top: clamp(5rem, 10vw, 9rem); display: flex; flex-direction: column; gap: 6vh; padding-bottom: 4vh; }
.xp {
  position: sticky; top: calc(12vh + var(--i) * 16px);
  min-height: min(68vh, 620px);
  border-radius: var(--r-xl);
  padding: clamp(22px, 3vw, 44px);
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 3vw, 44px);
  transform-origin: 50% 0;
  box-shadow: 0 -10px 40px -20px rgba(14,13,12,.25);
  will-change: transform;
}
.xp--ink { background: var(--ink); color: var(--paper); --soft: rgba(238,234,227,.62); --ring: rgba(238,234,227,.18); }
.xp--sun { background: var(--sun); color: var(--ink); --soft: rgba(14,13,12,.66); --ring: rgba(14,13,12,.18); }
.xp--ember { background: var(--ember); color: var(--ink); --soft: rgba(14,13,12,.68); --ring: rgba(14,13,12,.2); }
.xp--teal { background: var(--teal); color: var(--ink); --soft: rgba(14,13,12,.66); --ring: rgba(14,13,12,.2); }
.xp--violet { background: var(--violet); color: var(--ink); --soft: rgba(14,13,12,.66); --ring: rgba(14,13,12,.2); }
.xp__media--logo { background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.25), transparent 60%), var(--bg); display: grid; place-items: center; }
.xp .xp__media--logo img { position: relative; inset: auto; width: min(46%, 220px); height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 22%; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); }
.xp--paper { background: var(--card); color: var(--ink); --soft: rgba(14,13,12,.6); --ring: rgba(14,13,12,.12); }
.xp__info { display: flex; flex-direction: column; }
.xp__top { display: flex; gap: 8px; flex-wrap: wrap; }
.xp__top span { height: 32px; padding: 0 14px; border-radius: 999px; display: inline-grid; place-items: center; box-shadow: inset 0 0 0 1px var(--ring); }
.xp__name { margin-top: auto; font-family: var(--display); font-size: clamp(2.2rem, 5vw, 5.2rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
html[lang="fa"] .xp__name { line-height: 1.4; letter-spacing: 0; font-weight: 900; }
.xp__role { margin-top: .6rem; font-size: clamp(1.05rem, 1.4vw, 1.35rem); font-weight: 600; }
.xp__desc { margin-top: .8rem; max-width: 46ch; color: var(--soft); }
.xp__media { position: relative; border-radius: calc(var(--r-xl) - 12px); overflow: hidden; min-height: 260px; }
.xp__media img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.xp__big { position: absolute; inset-inline-end: 18px; bottom: 6px; font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: clamp(4rem, 9vw, 9rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.85); }

@media (max-width: 800px) {
  .xp { grid-template-columns: 1fr; top: calc(10vh + var(--i) * 10px); min-height: 0; }
  .xp__media { min-height: 220px; order: -1; }
  .xp__name { margin-top: 1.4rem; }
  .brand { height: 60px; font-size: 17px; padding-inline-end: 22px; }
  .brand svg { width: 36px; height: 36px; }
}

/* =========================================================
   WORK — cover flow
   ========================================================= */
.work { height: 100vh; height: 100svh; min-height: 620px; padding: var(--inset); }
.work__panel { height: 100%; display: flex; flex-direction: column; padding: clamp(84px, 11vh, 110px) var(--gutter) 26px; }
.work__panel .shead { margin-bottom: 0; }
.work__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(ellipse 60% 50% at 50% 46%, #2a2420, var(--ink) 70%); }
.work__bg::after {
  content: ""; position: absolute; left: -50%; right: -50%; bottom: -30%; height: 70%;
  background-image: linear-gradient(rgba(255,90,31,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,90,31,.22) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(500px) rotateX(70deg);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%, transparent 95%); mask-image: linear-gradient(to bottom, transparent, #000 40%, transparent 95%);
  animation: floor 4s linear infinite;
}
@keyframes floor { to { background-position: 0 64px; } }

.flow { position: relative; flex: 1; perspective: 1300px; min-height: 0; }
.flow__swipe { display: none; }
.flow__stage { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.flow__item { pointer-events: auto; cursor: pointer; }
.flow__item {
  position: absolute; left: 50%; top: 50%;
  width: clamp(190px, 22vw, 360px); aspect-ratio: 4 / 5;
  border-radius: 26px; overflow: hidden;
  background: var(--ink-2);
  -webkit-box-reflect: below 14px linear-gradient(transparent 72%, rgba(255,255,255,.22));
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8);
  will-change: transform;
}
.flow__item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.flow__item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgba(255,255,255,.22), transparent 38%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); pointer-events: none; }
.flow__shade { position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; }

.flow__caption { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.flow__no { color: rgba(238,234,227,.5); justify-self: start; }
.flow__text { text-align: center; overflow: hidden; }
.flow__title { font-family: var(--display); font-size: clamp(1.6rem, 2.8vw, 2.8rem); font-weight: 800; line-height: 1.2; letter-spacing: -.03em; }
html[lang="fa"] .flow__title { letter-spacing: 0; line-height: 1.45; }
.flow__tags { font-size: 14px; color: rgba(238,234,227,.6); }
.flow__open { justify-self: end; }
.flow__dots { display: flex; justify-content: center; gap: 7px; margin-top: 18px; }
.flow__dots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(238,234,227,.3); transition: width .6s var(--spring), background-color .4s; }
.flow__dots i.is-active { width: 28px; background: var(--paper); }

@media (max-width: 800px) {
  .flow__caption { grid-template-columns: 1fr; text-align: center; gap: 10px; justify-items: center; }
  .flow__no { display: none; }
  .flow__open { justify-self: center; }
  .flow__item { width: 58vw; }
  .work__panel .shead__meta { display: none; }
  .flow { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
  .flow__item img { -webkit-user-drag: none; }
  .flow__swipe { display: block; text-align: center; margin-top: 10px; font-size: 12px; color: rgba(238,234,227,.45); }
  .flow__dots i { width: 9px; height: 9px; }
  .flow__dots i.is-active { width: 30px; }
}

/* =========================================================
   VERSE — retro sunset
   ========================================================= */
.verse { padding: var(--inset); }
.verse__panel {
  min-height: 100vh; min-height: 100svh;
  background: var(--ember); color: var(--ink);
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: clamp(5rem, 10vw, 8rem) var(--gutter);
}
.verse__sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.verse__sun {
  position: absolute; left: 50%; top: 18%;
  width: min(70vw, 760px); aspect-ratio: 1; margin-left: calc(min(70vw, 760px) / -2);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd06a 0%, #ffb238 40%, #ff7a2e 100%);
  overflow: hidden;
  opacity: .9;
}
.verse__sun i { position: absolute; left: 0; right: 0; background: var(--ember); }
.verse__sun i:nth-child(1) { top: 52%; height: 1.5%; }
.verse__sun i:nth-child(2) { top: 59%; height: 2.5%; }
.verse__sun i:nth-child(3) { top: 66%; height: 3.5%; }
.verse__sun i:nth-child(4) { top: 74%; height: 4.5%; }
.verse__sun i:nth-child(5) { top: 83%; height: 5.5%; }
.verse__sun i:nth-child(6) { top: 92%; height: 8%; }
.verse__floor {
  position: absolute; left: -50%; right: -50%; bottom: -10%; height: 44%;
  background-image: linear-gradient(rgba(14,13,12,.35) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(14,13,12,.35) 1.5px, transparent 1.5px);
  background-size: 80px 80px;
  background-color: var(--ember);
  transform: perspective(420px) rotateX(64deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%); mask-image: linear-gradient(to bottom, transparent, #000 30%);
  animation: floor2 3s linear infinite;
}
@keyframes floor2 { to { background-position: 0 80px; } }
.verse__text { font-family: 'Vazirmatn', sans-serif; }
.verse__line {
  display: block; font-weight: 900;
  font-size: clamp(1.9rem, 5.2vw, 5.4rem); line-height: 1.6;
  background-image: linear-gradient(to left, var(--ink) 50%, rgba(14,13,12,.18) 50%);
  background-size: 200% 100%; background-position: 0% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.verse__tr { margin-top: 2rem; max-width: 44ch; font-family: 'Geist', sans-serif; font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 500; line-height: 1.5; }
.verse__cite { margin-top: 1.4rem; font-style: normal; height: 34px; padding: 0 16px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 13px; font-weight: 600; background: rgba(14,13,12,.1); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact { padding: var(--inset); }
.contact__panel { padding: clamp(84px, 12vh, 120px) var(--gutter) 0; }
.contact__orbs { position: absolute; inset: 0; z-index: -1; overflow: hidden; filter: blur(70px); opacity: .5; }
.contact__orbs i { position: absolute; border-radius: 50%; }
.contact__orbs i:nth-child(1) { width: 40vw; height: 40vw; background: var(--ember); top: -12vw; inset-inline-end: -10vw; animation: drift 18s ease-in-out infinite alternate; }
.contact__orbs i:nth-child(2) { width: 28vw; height: 28vw; background: var(--violet); top: 10vw; inset-inline-end: 18vw; animation: drift 22s ease-in-out infinite alternate-reverse; opacity: .7; }
.contact__orbs i:nth-child(3) { width: 22vw; height: 22vw; background: var(--teal); top: -6vw; inset-inline-end: 30vw; animation: drift 26s ease-in-out infinite alternate; opacity: .4; }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-6vw, 5vw) scale(1.2); } }

.contact__main { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.contact__title { font-family: var(--display); font-size: clamp(2.8rem, 8vw, 9rem); font-weight: 800; line-height: 1.05; letter-spacing: -.045em; }
html[lang="fa"] .contact__title { font-weight: 900; line-height: 1.35; letter-spacing: 0; font-size: clamp(3rem, 8.6vw, 10rem); }
.contact__title em { color: var(--ember); }

.big-btn {
  position: relative; display: inline-flex; align-items: center; gap: 18px;
  height: clamp(76px, 8vw, 104px); padding-inline: clamp(28px, 3vw, 42px) 12px;
  border-radius: 999px; background: var(--paper); color: var(--ink);
  font-family: var(--display); font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 700;
  box-shadow: 0 20px 60px -20px rgba(255,90,31,.6);
  margin-bottom: 1.4rem;
}
.big-btn__arrow { width: clamp(56px, 6vw, 80px); height: clamp(56px, 6vw, 80px); border-radius: 50%; display: grid; place-items: center; background: var(--ember); font-size: 1.4em; transition: transform .7s var(--spring); }
.big-btn:hover .big-btn__arrow { transform: rotate(45deg) scale(1.05); }
html[dir="rtl"] .big-btn:hover .big-btn__arrow { transform: rotate(-90deg) scale(1.05); }

.cards { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; margin-top: clamp(3rem, 7vw, 6rem); }
.card {
  display: flex; flex-direction: column; gap: 10px; justify-content: space-between;
  padding: 20px 22px; border-radius: 26px; min-height: 140px;
  background: linear-gradient(140deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.1);
}
.card small { font-size: 12px; color: rgba(238,234,227,.55); }
.card__big { font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: 600; }
.card .mono, .card a.mono { font-size: clamp(1rem, 1.35vw, 1.3rem); text-transform: none; letter-spacing: 0; }
.copy { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: start; }
.copy i { font-style: normal; font-size: 12px; height: 28px; padding: 0 12px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(238,234,227,.12); flex-shrink: 0; }
/* social tiles — Nothing-style: mono, dot-matrix, one red LED */
.socials-head { display: flex; align-items: center; gap: 16px; margin-top: clamp(2.5rem, 5vw, 4rem); margin-bottom: 14px; font-size: 15px; color: rgba(238,234,227,.7); }
.socials-head__rule { flex: 1; height: 0; border-top: 2px dotted rgba(238,234,227,.22); }
.socials { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.nt {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 210px; padding: 18px;
  border-radius: 28px;
  background-color: #070707;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.3px);
  background-size: 11px 11px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  color: #f4f1ec;
  transition: background-color .5s var(--out), color .5s var(--out), box-shadow .5s;
}
.nt:hover { background-color: #f4f1ec; color: #000; background-image: radial-gradient(rgba(0,0,0,.12) 1px, transparent 1.3px); box-shadow: inset 0 0 0 1px #fff, 0 24px 50px -24px rgba(255,255,255,.35); }
.nt__top { display: flex; justify-content: space-between; align-items: center; }
.nt__no { opacity: .5; }
.nt__led { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); transition: background-color .3s, box-shadow .3s; }
.nt:hover .nt__led { background: #ff2a1a; box-shadow: 0 0 12px #ff2a1a; animation: rec 1s steps(1) infinite; }
.nt__icon { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px currentColor; transition: transform .7s var(--spring); }
.nt__icon svg { width: 24px; height: 24px; }
.icon-mask { display: block; width: 25px; height: 25px; background: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.nt:hover .nt__icon { transform: rotate(-8deg) scale(1.08); }
.nt__glyph { display: flex; gap: 5px; }
.nt__glyph i { flex: 1; height: 5px; border-radius: 3px; background: currentColor; opacity: .14; transition: opacity .25s; }
.nt:hover .nt__glyph i { opacity: 1; }
.nt:hover .nt__glyph i:nth-child(1) { transition-delay: 0s; }
.nt:hover .nt__glyph i:nth-child(2) { transition-delay: .06s; }
.nt:hover .nt__glyph i:nth-child(3) { transition-delay: .12s; }
.nt:hover .nt__glyph i:nth-child(4) { transition-delay: .18s; }
.nt__foot { display: flex; flex-direction: column; gap: 2px; direction: ltr; text-align: left; }
html[dir="rtl"] .nt__foot { text-align: right; }
.nt__name { font-size: clamp(1.05rem, 1.5vw, 1.4rem); line-height: 1.1; }
.nt__handle { opacity: .55; text-transform: none !important; }
.nt__arrow { position: absolute; top: 50%; inset-inline-end: 18px; margin-top: -40px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #000; color: #fff; transform: scale(0); transition: transform .6s var(--spring); }
.nt:hover .nt__arrow { transform: scale(1); }

.footer { margin-top: clamp(4rem, 8vw, 7rem); }
.footer__name { display: flex; justify-content: space-between; align-items: flex-end; gap: 2vw; overflow: hidden; line-height: .9; }
.footer__word { display: block; background: linear-gradient(180deg, var(--paper) 30%, rgba(238,234,227,.08) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer__word--en { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 14.5vw; letter-spacing: -.06em; line-height: .85; }
.footer__word--fa { font-family: 'Vazirmatn', sans-serif; font-weight: 900; font-size: 14vw; line-height: 1.1; }
.footer__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 20px 0 24px; border-top: 1px solid rgba(238,234,227,.12); font-size: 13px; color: rgba(238,234,227,.55); }
.to-top { color: var(--paper); height: 46px; }
.to-top i { width: 32px; height: 32px; }

@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .cards .card:first-child { grid-column: 1 / 3; }
  .socials { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .socials { grid-template-columns: 1fr 1fr; }
  .nt { min-height: 180px; padding: 16px; border-radius: 24px; }
  .footer__row { flex-direction: column; align-items: flex-start; }
  .footer__name { flex-direction: column; align-items: flex-start; }
  .footer__word--en { font-size: 18.5vw; }
  .footer__word--fa { font-size: 26vw; }
}

/* =========================================================
   MODAL — project sheet
   ========================================================= */
.modal { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.modal.is-open { visibility: visible; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(14,13,12,.5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; }
.modal__sheet {
  position: absolute; left: 50%; top: calc(var(--inset) + 14px); bottom: 0;
  width: min(1080px, calc(100% - 2 * var(--inset)));
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
  box-shadow: 0 -30px 80px -30px rgba(0,0,0,.5);
}
.modal__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.modal__close { position: absolute; z-index: 3; top: 22px; inset-inline-end: 22px; height: 44px; padding: 0 8px 0 18px; display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; color: var(--paper); font-size: 14px; font-weight: 600; background: rgba(14,13,12,.35); }
html[dir="rtl"] .modal__close { padding: 0 18px 0 8px; }
.modal__close i svg { width: 11px; height: 11px; display: block; }
.modal__close i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 0; background: var(--paper); color: var(--ink); }
.modal__hero { margin: 10px; border-radius: calc(var(--r-xl) - 8px); overflow: hidden; height: min(62vh, 620px); background: var(--ink); }
.modal__hero img { width: 100%; height: 100%; object-fit: cover; }
.modal__body { padding: clamp(24px, 4vw, 56px); padding-top: 28px; }
.modal__no { color: var(--muted); }
.modal__title { font-family: var(--display); font-size: clamp(2.6rem, 6vw, 5.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; margin-top: .3rem; }
html[lang="fa"] .modal__title { letter-spacing: 0; line-height: 1.4; font-weight: 900; }
.modal__tagline { margin-top: .4rem; font-size: clamp(1.1rem, 1.6vw, 1.5rem); color: var(--muted); font-weight: 500; }
.m-links { display: contents; }
.modal__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 1rem; }
.modal__tags span { height: 32px; padding: 0 14px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 13px; font-weight: 600; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.modal__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 2rem; }
.modal__meta div { padding: 16px 18px; border-radius: 20px; background: var(--card); }
.modal__meta dt { font-size: 12px; color: var(--muted); }
.modal__meta dd { font-weight: 600; margin-top: 2px; }
.modal__desc { margin-top: 2rem; font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.7; max-width: 52ch; }
.modal__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2.4rem; padding-bottom: 2rem; }
.modal__actions .pill-btn:not(.pill-btn--ghost) { background: var(--ink); color: var(--paper); }
.modal__actions .pill-btn:not(.pill-btn--ghost) i { background: var(--ember); color: var(--ink); }
.modal__actions .pill-btn--ghost i { background: var(--ink); color: var(--paper); }
.modal__fly { position: fixed; z-index: 4; overflow: hidden; visibility: hidden; pointer-events: none; }
.modal__fly img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  .modal__meta { grid-template-columns: 1fr 1fr; }
  .modal__hero { height: 46vh; }
}

/* screenshots row inside the sheet */
.shots { margin-top: 2.6rem; }
.shots[hidden] { display: none; }
.shots__head { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.shots__count { color: var(--muted); }
.shots__rule { flex: 1; height: 1px; background: var(--line); }
.shots__row {
  display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * clamp(24px, 4vw, 56px)); padding: 6px clamp(24px, 4vw, 56px) 18px;
}
.shots__row::-webkit-scrollbar { display: none; }
.shot {
  flex: 0 0 auto; height: clamp(300px, 52vh, 520px); border-radius: 24px; overflow: hidden;
  scroll-snap-align: start; background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -24px rgba(14,13,12,.5);
  transition: transform .6s var(--spring);
}
.shot img { height: 100%; width: auto; max-width: none; display: block; }
.shot:hover { transform: translateY(-4px) scale(1.015); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 6; visibility: hidden; display: grid; place-items: center; }
.lightbox.is-open { visibility: visible; }
.lightbox__bg { position: absolute; inset: 0; background: rgba(6,6,6,.88); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; }
.lightbox__stage { position: relative; height: calc(100% - 150px); width: calc(100% - 180px); display: grid; place-items: center; touch-action: pan-y; }
.lightbox__stage img { max-width: calc(100vw - 200px); max-height: calc(100vh - 170px); max-height: calc(100svh - 170px); width: auto; height: auto; border-radius: 26px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.8); user-select: none; -webkit-user-drag: none; }
.lightbox__btn { position: absolute; top: 50%; margin-top: -28px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 30px; line-height: 1; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); opacity: 0; }
.lightbox__btn svg { width: 22px; height: 22px; display: block; }
.lightbox__left { left: 28px; } .lightbox__right { right: 28px; }
.lightbox__bar { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; height: 50px; padding: 0 6px 0 20px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); opacity: 0; }
.lightbox__count { font-size: 13px; }
.lightbox__close { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; padding: 0; }
.lightbox__close svg { width: 14px; height: 14px; display: block; }
@media (max-width: 700px) {
  .lightbox__stage { width: calc(100% - 24px); height: calc(100% - 140px); }
  .lightbox__stage img { max-width: calc(100vw - 24px); max-height: calc(100svh - 150px); border-radius: 20px; }
  .lightbox__btn { display: none; }
}

/* toast */
.toast {
  position: fixed; bottom: 26px; left: 50%; z-index: 97;
  display: flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 22px 0 8px; border-radius: 999px;
  color: var(--paper); font-size: 14px; font-weight: 600;
  background: linear-gradient(140deg, rgba(30,27,24,.85), rgba(20,18,16,.75));
  transform: translate(-50%, calc(100% + 40px));
  transition: transform .7s var(--spring);
}
html[dir="rtl"] .toast { padding: 0 8px 0 22px; }
.toast i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: #5dff9c; color: var(--ink); }
.toast.is-show { transform: translate(-50%, 0); }

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
.widget--scroll { margin-inline-start: auto; }

/* =========================================================
   LITE — touch devices only (html.lite is set in <head> from
   (hover:none) and (pointer:coarse)). Desktop never matches.
   Goal: nothing that repaints per frame, no backdrop blur,
   no huge blurred layers — only compositor transforms/opacity.
   ========================================================= */
html.lite .glass,
html.lite .modal__backdrop,
html.lite .lightbox__bg { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.lite .glass { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 30px -18px rgba(0,0,0,.45); }
html.lite .nav__pill { background: rgba(28,25,22,.92); transition: background .4s, color .4s; }
html.lite .nav.is-light .nav__pill { background: rgba(250,248,244,.96); box-shadow: inset 0 1px 0 #fff, 0 12px 28px -18px rgba(14,13,12,.35); }
html.lite .sheet { background: #faf8f4; }
html.lite .tile__chip { background: rgba(20,18,16,.62); }
html.lite .card { background: rgba(255,255,255,.07); }
html.lite .toast { background: #1e1b18; }
html.lite .modal__backdrop { background: rgba(14,13,12,.78); }
html.lite .modal__close { background: rgba(14,13,12,.7); }
html.lite .lightbox__bg { background: rgba(6,6,6,.96); }
html.lite .lightbox__bar { background: rgba(40,38,36,.92); }

/* not needed on phones */
html.lite .hero__widgets { display: none !important; }

/* per-frame repaint sources → static */
html.lite .work__bg::after,
html.lite .verse__floor { animation: none; }
html.lite .flow__item { -webkit-box-reflect: unset; box-shadow: 0 24px 40px -24px rgba(0,0,0,.8); }
html.lite .contact__orbs { display: none; }
html.lite .contact__panel {
  background:
    radial-gradient(60% 45% at 85% 0%, rgba(255,90,31,.32), transparent 70%),
    radial-gradient(45% 35% at 45% 10%, rgba(124,92,255,.2), transparent 70%),
    var(--ink);
}
html.lite .loader__ring circle.on,
html.lite .loader__ring circle.head { filter: none; }
html.lite .planet .planet__glow { filter: none; opacity: .5; }
html.lite .verse__line { background-position: 100% 0; }
html.lite .pill { box-shadow: none; }
html.lite .wi,
html.lite .hero__panel { will-change: auto; }
/* tiles stay promoted: rasterized once, so their reveal never re-rasterizes mid-scroll */
html.lite .bento > .tile { will-change: transform, opacity; }

/* collaborations marquee on the compositor */
html.lite .brands__track.is-css { animation: slide3 38s linear infinite; }
@keyframes slide3 { to { transform: translate3d(-33.333%, 0, 0); } }

/* radar: no rounded overflow clip (everything inside is already round), so the sweep + blips
   stay on the compositor instead of repainting the radar every frame — all devices */
.radar { overflow: visible; }
.radar__sweep, .radar b { will-change: transform; }

/* hero planet twin (see main.js, all devices): same ellipse as #orbitA, user space 1000×400 */
.js .hero__orbit .planet { display: none; }
.hero__orbit--fx { display: none; }
.js .hero__orbit--fx { display: block; }
.ofx__space { position: absolute; left: 0; top: 0; width: 1000px; height: 400px; transform-origin: 0 0; transform: scale(var(--sx, 1), var(--sy, 1)); }
.ofx__rot { position: absolute; inset: 0; transform: rotate(-8deg); transform-origin: 500px 200px; }
.ofx__x { position: absolute; left: 500px; top: 200px; animation: ofxX 8s cubic-bezier(.37,0,.63,1) infinite alternate; will-change: transform; }
.ofx__y { animation: ofxY 8s cubic-bezier(.37,0,.63,1) -4s infinite alternate; will-change: transform; }
.ofx__y i { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, var(--ember) 0 8px, rgba(255,90,31,.28) 9px, rgba(255,90,31,0) 22px); }
@keyframes ofxX { from { transform: translateX(-480px); } to { transform: translateX(480px); } }
@keyframes ofxY { from { transform: translateY(-120px); } to { transform: translateY(120px); } }
html.lite .is-off, html.lite .is-off * { animation-play-state: paused !important; }

/* big soft shadows are the most expensive thing to rasterize on phone GPUs:
   same look, much tighter blur */
html.lite .glass { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 16px -12px rgba(0,0,0,.45); }
html.lite .nav.is-light .nav__pill { box-shadow: inset 0 1px 0 #fff, 0 8px 16px -12px rgba(14,13,12,.35); }
html.lite .tile { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 18px -14px rgba(14,13,12,.35); }
html.lite .tile--dark { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 18px -14px rgba(14,13,12,.5); }
html.lite .brand { box-shadow: inset 0 1px 0 #fff, 0 6px 12px -10px rgba(14,13,12,.3); }
html.lite .xp { box-shadow: 0 -6px 14px -10px rgba(14,13,12,.22); }
html.lite .xp .xp__media--logo img { box-shadow: 0 12px 20px -12px rgba(0,0,0,.4); }
html.lite .flow__item { box-shadow: 0 16px 24px -16px rgba(0,0,0,.7); }
html.lite .big-btn { box-shadow: 0 10px 22px -12px rgba(255,90,31,.55); }
html.lite .modal__sheet { box-shadow: 0 -10px 24px -14px rgba(0,0,0,.4); }
html.lite .shot { box-shadow: inset 0 0 0 1px var(--line), 0 8px 14px -10px rgba(14,13,12,.4); }
html.lite .lightbox__stage img { box-shadow: 0 16px 30px -16px rgba(0,0,0,.7); }

/* lite reveals (classes added by main.js; removed again once landed) */
html.lite .rv { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--rd, 0s), transform .9s cubic-bezier(.16,1,.3,1) var(--rd, 0s); }
html.lite .rv.rv--pop { transform: translate3d(0, 24px, 0) scale(.88); }
html.lite .rv.rv--fade { transform: none; transition: opacity .8s ease var(--rd, 0s); }
html.lite .rv.rv--rule { opacity: 1; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.65,0,.35,1) var(--rd, 0s); }
html.lite .rv.rv-in { opacity: 1; transform: none; }
html.lite .rv--fade.rv-in { transform: none; }

/* =========================================================
   DESKTOP QUALITY LEVELS — html.p1 / .p2 / .p3 (set by MP_PERF
   only on machines that can't hold the frame rate; a fast
   machine never gets these classes, so its design is untouched)
   ========================================================= */
/* p1: the shader runs at a resolution its GPU can afford (shader.js); the cursor stops blurring */
html.p1 .cursor { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(128, 124, 120, .42); }

/* p2: no live backdrop blur (it is re-computed every frame over the moving liquid) — same tints, solid */
html.p2 .glass,
html.p2 .modal__backdrop,
html.p2 .lightbox__bg { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.p2 .nav__pill { background: rgba(28,25,22,.9); }
html.p2 .nav.is-light .nav__pill { background: rgba(250,248,244,.95); }
html.p2 .sheet { background: #faf8f4; }
html.p2 .widget { background: linear-gradient(140deg, rgba(48,43,39,.9), rgba(28,25,22,.86)); }
html.p2 .tile__chip { background: rgba(20,18,16,.62); }
html.p2 .card { background: linear-gradient(140deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); }
html.p2 .toast { background: #1e1b18; }
html.p2 .modal__backdrop { background: rgba(14,13,12,.78); }
html.p2 .modal__close { background: rgba(14,13,12,.7); }
html.p2 .lightbox__bg { background: rgba(6,6,6,.96); }
html.p2 .lightbox__btn, html.p2 .lightbox__bar { background: rgba(40,38,36,.92); }
/* contact glow: soft radial discs instead of a 70px live blur — same look, no per-frame filter */
html.p2 .contact__orbs { filter: none; }
html.p2 .contact__orbs i:nth-child(1) { background: radial-gradient(closest-side, var(--ember) 44%, rgba(255,90,31,.5) 66%, rgba(255,90,31,.12) 84%, rgba(255,90,31,0)); }
html.p2 .contact__orbs i:nth-child(2) { background: radial-gradient(closest-side, var(--violet) 44%, rgba(180,154,255,.5) 66%, rgba(180,154,255,.12) 84%, rgba(180,154,255,0)); }
html.p2 .contact__orbs i:nth-child(3) { background: radial-gradient(closest-side, var(--teal) 44%, rgba(53,201,168,.5) 66%, rgba(53,201,168,.12) 84%, rgba(53,201,168,0)); }
html.p2 .contact__orbs i { box-sizing: content-box; padding: 140px; margin: -140px; }   /* a 70px blur reaches ~2σ past the edge */
html.p2 .loader__ring circle.on,
html.p2 .loader__ring circle.head { filter: none; }
html.p2 .planet .planet__glow { filter: none; }
/* the perspective floors repaint a large area every frame — hold them still */
html.p2 .work__bg::after,
html.p2 .verse__floor { animation: none; }

/* p3: minimal — native cursor, no reflections, tighter shadows */
html.p3 .cursor { display: none !important; }
html.p3 body, html.p3 a, html.p3 button { cursor: auto; }
html.p3 a, html.p3 button, html.p3 [data-magnet], html.p3 .flow__item { cursor: pointer; }
html.p3 .flow__item { -webkit-box-reflect: unset; box-shadow: 0 24px 40px -24px rgba(0,0,0,.8); }
html.p3 .tile { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 18px -14px rgba(14,13,12,.35); }
html.p3 .tile--dark { box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 18px -14px rgba(14,13,12,.5); }
html.p3 .big-btn { box-shadow: 0 10px 22px -12px rgba(255,90,31,.55); }

/* parallax images get their own layer, so the scroll-scrubbed move never repaints the card (desktop) */
html:not(.lite) .xp__media:not(.xp__media--logo) img,
html:not(.lite) .tile--portrait > img { will-change: transform; }
/* p3: the big contact glow discs hold still (compositing them every frame is the cost) */
html.p3 .contact__orbs i { animation: none; }
/* no WebGL / minimal level: a still frame of the hero shader instead of the live one */
.hero__panel.gl-still { background: #0c0a08 url(../assets/img/hero-still.jpg) center / cover no-repeat; }
.hero__panel.gl-still .hero__gl { visibility: hidden; }