/* fonts — Vazirmatn is the site font (full glyph set: Persian + Latin + digits) */
@font-face { font-family:"JBMono"; src:url("../fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Vazirmatn"; src:url("../fonts/Vazirmatn-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Vazirmatn"; src:url("../fonts/Vazirmatn-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Vazirmatn"; src:url("../fonts/Vazirmatn-Black.woff2") format("woff2"); font-weight:900; font-display:swap; }

:root{
  --bg:#07051a; --bg2:#0d0a26;
  --ink:#e9ecff; --dim:rgba(233,236,255,.62);
  --cyan:#22d3ee; --pink:#ec4899; --violet:#8b5cf6;
  --grad:linear-gradient(135deg,#22d3ee 0%,#8b5cf6 50%,#ec4899 100%);
  --mono:"JBMono","Vazirmatn",Tahoma,ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:"Vazirmatn",Tahoma,system-ui,sans-serif; font-weight:500;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* language toggle */
.lang-toggle{position:fixed; top:18px; left:18px; z-index:60; display:flex; align-items:center; gap:.35em;
  padding:.45em .85em; border:1px solid rgba(255,255,255,.18); border-radius:100px; cursor:pointer;
  background:rgba(10,8,30,.35); backdrop-filter:blur(8px); color:var(--dim);
  font-family:var(--mono); font-size:.8rem; line-height:1; -webkit-tap-highlight-color:transparent}
.lang-toggle .sep{opacity:.4}
.lang-toggle [data-lang]{padding:.1em; transition:color .2s}
.lang-toggle [data-lang].on{color:var(--ink); font-weight:700}
.lang-toggle:hover{border-color:rgba(255,255,255,.4)}

/* loader */
#loader{position:fixed; inset:0; z-index:1000; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s var(--ease), visibility .7s var(--ease)}
#loader.done{opacity:0; visibility:hidden}
.loader-inner{width:min(340px,72vw); text-align:center}
.loader-pct{font-weight:900; font-size:clamp(46px,9vw,84px); line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.loader-bar{margin:1.3rem 0 .7rem; height:2px; background:rgba(233,236,255,.14); border-radius:2px; overflow:hidden}
.loader-bar span{display:block; height:100%; width:0; background:var(--grad); transition:width .2s linear}
.loader-label{font-family:var(--mono); font-size:.78rem; color:var(--dim); letter-spacing:.1em}

/* scroll sequence */
.seq{position:relative} /* height set by JS */
.seq-sticky{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:var(--bg)}
#seq-canvas{display:block; width:100%; height:100%}

/* start prompt */
.intro-hero{position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.2rem; text-align:center; padding:0 6vw; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 38%, #1b1442 0%, #0b0820 56%, #07051a 100%);
  transition:none; will-change:opacity}
.intro-hero.hidden{opacity:0}
.intro-title{margin:0; font-weight:900; line-height:1.02; font-size:clamp(40px,8.5vw,116px);
  text-shadow:0 4px 60px rgba(0,0,0,.5)}
.intro-title .grad{font-size:inherit; font-weight:inherit; line-height:inherit; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.intro-arrow{font-size:clamp(26px,3vw,42px); color:var(--dim); animation:bob 1.6s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* end name (HTML overlay — never cropped, responsive) */
.hero-name{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.7rem; text-align:center; padding:0 6vw; pointer-events:none;
  opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.hero-name.show{opacity:1; transform:none}
.hn-name{margin:0; font-weight:900; line-height:1.05; font-size:clamp(34px,6.6vw,98px);
  text-shadow:0 2px 50px rgba(120,200,255,.45)}
.hn-rule{width:min(62vw,470px); height:3px; border-radius:3px; background:var(--grad)}
.hn-title{margin:0; font-family:var(--mono); font-size:clamp(13px,1.7vw,22px); letter-spacing:.12em; color:#c7d2fe}

/* end CTA */
.cta{position:absolute; left:50%; bottom:13vh; transform:translateX(-50%) translateY(22px);
  opacity:0; pointer-events:none; transition:opacity .6s var(--ease), transform .6s var(--ease);
  border:none; cursor:pointer; font-family:"Vazirmatn"; font-weight:700; font-size:1.05rem; color:#06031a;
  padding:1em 2.2em; border-radius:100px; background:var(--grad);
  box-shadow:0 10px 40px -8px rgba(139,92,246,.6), 0 0 0 1px rgba(255,255,255,.08) inset}
.cta.show{opacity:1; transform:translateX(-50%); pointer-events:auto}
.cta:hover{transform:translateX(-50%) translateY(-3px); box-shadow:0 18px 50px -8px rgba(236,72,153,.7)}
.cta:active{transform:translateX(-50%) translateY(0)}

/* ===== tech stack parallax ===== */
.stack{position:relative; height:240vh; background:
  radial-gradient(120% 80% at 50% 30%, var(--bg2) 0%, var(--bg) 70%);
  transition:background-color .45s var(--ease)}
.stack-sticky{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden}
.stack-eyebrow{position:absolute; top:8vh; left:0; right:0; margin:0; z-index:2; text-align:center;
  font-family:var(--mono); font-size:clamp(.72rem,1.5vw,.92rem); letter-spacing:.22em;
  text-transform:uppercase; color:var(--dim)}
.stack-field{position:absolute; inset:0}
.chip{position:absolute; left:var(--x); top:var(--y);
  width:clamp(34px,4.8vw,62px); height:auto; opacity:0;
  transform:translate(-50%,-50%); will-change:transform,opacity;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.5))}
.chip-lg{width:clamp(46px,6.4vw,84px)}
/* mobile: shrink the logo cloud so the 28 icons don't crowd on narrow screens */
@media(max-width:640px){
  .chip{width:clamp(26px,7.4vw,40px)}
  .chip-lg{width:clamp(34px,9.6vw,52px)}
}

/* ===== selected work / portfolio ===== */
.work{position:relative; background:var(--bg); padding:14vh 6vw; transition:background-color .45s var(--ease)}
.work-inner{max-width:1120px; margin:0 auto}
.work-eyebrow{margin:0 0 .5rem; text-align:center; font-family:var(--mono);
  font-size:clamp(.72rem,1.5vw,.9rem); letter-spacing:.22em; text-transform:uppercase; color:var(--cyan)}
.work-title{margin:0 0 3rem; text-align:center; font-weight:900; font-size:clamp(28px,5vw,54px)}
.work-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.4rem}
.work-card{position:relative; display:flex; flex-direction:column; border-radius:18px; overflow:hidden;
  background:var(--row-bg); border:1px solid var(--row-bd); text-decoration:none; color:inherit;
  opacity:0; transform:translateY(26px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), border-color .25s, box-shadow .25s}
.work-card.in{opacity:1; transform:none}
.work-card:hover{border-color:rgba(139,92,246,.55); transform:translateY(-5px);
  box-shadow:0 20px 55px -20px rgba(139,92,246,.55)}
.work-thumb{aspect-ratio:16/10; width:100%; object-fit:cover; background:var(--bg2); display:block}
.work-thumb-ph{display:grid; place-items:center; font-family:var(--mono); font-weight:700;
  font-size:clamp(28px,6vw,52px); color:rgba(255,255,255,.85);
  background:linear-gradient(135deg, rgba(34,211,238,.30), rgba(139,92,246,.30) 55%, rgba(236,72,153,.30))}
.work-body{padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1}
.work-tag{display:inline-block; align-self:flex-start; margin:0 0 .55rem; font-family:var(--mono);
  font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan);
  padding:.28em .7em; border-radius:100px; background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.22)}
.work-card--static{cursor:default}
.work-card--static:hover{transform:none; border-color:var(--row-bd); box-shadow:none}
.work-name{margin:0 0 .35rem; font-weight:700; font-size:1.12rem}
.work-desc{margin:0 0 1rem; font-size:.9rem; color:var(--dim); line-height:1.55; flex:1}
.work-link{display:inline-flex; align-items:center; gap:.4em; font-family:var(--mono);
  font-size:.78rem; letter-spacing:.05em; color:var(--cyan); transition:color .2s}
.work-card:hover .work-link{color:var(--pink)}

/* ===== finale: magical 3D name reveal ===== */
.finale{--reveal:0; --reveal2:0; position:relative; height:230vh; background:var(--bg); transition:background-color .45s var(--ease)}
.finale-sticky{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center}
.magic-stage{position:relative; z-index:2; perspective:1100px; padding:0 6vw}
.magic-wrap{position:relative; display:flex; flex-direction:column; align-items:center;
  gap:1.05rem; text-align:center}

/* glowing aura — spans the whole final screen, intensifies as the name forms */
.magic-glow{position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:calc(var(--reveal) * .9);
  background:
    radial-gradient(58% 48% at 50% 44%, rgba(139,92,246,.34), transparent 72%),
    radial-gradient(42% 40% at 22% 28%, rgba(34,211,238,.20), transparent 70%),
    radial-gradient(46% 42% at 80% 68%, rgba(236,72,153,.18), transparent 72%);
  filter:blur(30px)}

/* the name: gradient text, scroll-driven soft mask reveal, 3D tilt that settles flat */
.magic-name{--ang:90deg; position:relative; margin:0; font-weight:900; line-height:1.14;
  font-size:clamp(38px,8vw,104px);
  background:linear-gradient(100deg,#ffffff 0%,#c7d2fe 26%,#22d3ee 46%,#8b5cf6 66%,#ec4899 100%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-mask-image:linear-gradient(var(--ang), #000 calc(var(--reveal)*118% - 18%), transparent calc(var(--reveal)*118%));
          mask-image:linear-gradient(var(--ang), #000 calc(var(--reveal)*118% - 18%), transparent calc(var(--reveal)*118%));
  transform:rotateX(calc((1 - var(--reveal)) * 20deg)) scale(calc(.9 + .1 * var(--reveal)));
  transform-style:preserve-3d;
  filter:drop-shadow(0 8px 34px rgba(130,170,255,.55));
  animation:nameFlow 7s linear infinite}
.magic-name.rtl{--ang:270deg}
/* Persian glyphs have deep descenders — give the underline room so it isn't clipped */
body.lang-fa .magic-name{padding-bottom:.18em}
@keyframes nameFlow{to{background-position:220% center}}

/* secondary bits appear after the name has formed */
.magic-wrap .hn-rule{opacity:var(--reveal2); transform:scaleX(var(--reveal2)); transform-origin:center}
.magic-wrap .hn-title{opacity:var(--reveal2)}
.magic-wrap .hn-exp{margin:.15rem 0 0; font-family:var(--mono); font-weight:700;
  font-size:clamp(.74rem,1.5vw,.95rem); letter-spacing:.06em; color:var(--cyan); opacity:var(--reveal2)}
.magic-wrap .cta-static{opacity:var(--reveal2)}

/* twinkling magic dust */
.sparkles{position:absolute; inset:0; z-index:1; pointer-events:none; opacity:var(--reveal)}
.spark{position:absolute; width:var(--s,6px); height:var(--s,6px); border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #fff 0%, var(--c,#8b5cf6) 55%, transparent 72%);
  box-shadow:0 0 10px 2px var(--c,#8b5cf6); opacity:0;
  animation:twinkle var(--dur,2.6s) ease-in-out infinite; animation-delay:var(--dl,0s)}
@keyframes twinkle{0%,100%{opacity:0; transform:scale(.3) translateY(0)}50%{opacity:.95; transform:scale(1) translateY(-6px)}}

.cta-static{margin-top:1.5rem; border:none; cursor:pointer; font-family:"Vazirmatn"; font-weight:700; font-size:1.05rem; color:#06031a;
  padding:1em 2.2em; border-radius:100px; background:var(--grad);
  box-shadow:0 10px 40px -8px rgba(139,92,246,.6), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.cta-static:hover{transform:translateY(-3px); box-shadow:0 18px 50px -8px rgba(236,72,153,.7)}
.cta-static:active{transform:translateY(0)}

/* modal */
.modal{position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s var(--ease)}
.modal.open{opacity:1; visibility:visible}
.modal-backdrop{position:absolute; inset:0; background:rgba(5,3,18,.62); backdrop-filter:blur(10px)}
.modal-card{position:relative; width:min(460px,92vw); padding:2.4rem 2.2rem 2rem;
  background:rgba(13,10,38,.9); border-radius:24px; overflow:hidden;
  transform:translateY(22px) scale(.96); transition:transform .4s var(--ease);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 0 60px -20px rgba(139,92,246,.5)}
.modal.open .modal-card{transform:none}
.modal-card::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
.modal-close{position:absolute; top:14px; right:16px; width:34px; height:34px; border-radius:50%;
  border:none; background:rgba(255,255,255,.06); color:var(--ink); font-size:20px; line-height:1; cursor:pointer;
  transition:background .2s}
.modal-close:hover{background:rgba(255,255,255,.14)}
.modal-eyebrow{margin:0 0 .4rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.modal-title{margin:0; font-weight:900; font-size:clamp(28px,4vw,38px)}
.modal-sub{margin:.5rem 0 1.8rem; color:var(--dim); font-size:.92rem}

.contacts{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem}
.contact{display:flex; align-items:center; gap:1rem; padding:.9rem 1rem; border-radius:14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07)}
.contact-ic{flex:none; width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  font-family:var(--mono); font-size:1.1rem; color:#06031a; background:var(--grad)}
.contact-meta{flex:1; min-width:0; display:flex; flex-direction:column}
.contact-label{font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
.contact-val{font-family:var(--mono); font-size:1.02rem; color:var(--ink); text-decoration:none; word-break:break-all; text-align:left}
.contact-val:hover{color:var(--cyan)}
/* RTL: keep email/phone in LTR character order but align them under their (right-aligned) labels */
body.lang-fa .contact-label,
body.lang-fa .contact-val{text-align:right}
.copy{flex:none; cursor:pointer; border:1px solid rgba(255,255,255,.14); background:transparent;
  color:var(--dim); font-family:var(--mono); font-size:.72rem; padding:.5em .8em; border-radius:9px; transition:all .2s}
.copy:hover{color:var(--ink); border-color:rgba(255,255,255,.3)}
.copy.copied{color:#06031a; background:var(--cyan); border-color:transparent}

@media(prefers-reduced-motion:reduce){*{animation:none!important; transition-duration:.01ms!important}}

/* ===== day / night theming ===== */
:root{
  --intro-bg:radial-gradient(130% 100% at 50% 38%, #1b1442 0%, #0b0820 56%, #07051a 100%);
  --backdrop:rgba(5,3,18,.62);
  --card-bg:rgba(13,10,38,.92);
  --row-bg:rgba(255,255,255,.04);
  --row-bd:rgba(255,255,255,.07);
  --canvas-filter:none;
}
body{transition:background-color .45s var(--ease), color .45s var(--ease)}
body.day{
  --bg:#e9edfa; --bg2:#dde3f4; --ink:#0c0a22; --dim:rgba(12,10,34,.6);
  --intro-bg:radial-gradient(130% 100% at 50% 38%, #ffffff 0%, #e9edfb 56%, #dde3f6 100%);
  --backdrop:rgba(70,72,110,.26);
  --card-bg:rgba(255,255,255,.94);
  --row-bg:rgba(12,10,34,.045);
  --row-bd:rgba(12,10,34,.10);
  --canvas-filter:invert(1) hue-rotate(180deg) brightness(1.05) saturate(1.05);
}
#seq-canvas{filter:var(--canvas-filter); transition:filter .45s var(--ease)}
.intro-hero{background:var(--intro-bg)}
.modal-backdrop{background:var(--backdrop)}
.modal-card{background:var(--card-bg)}
.contact{background:var(--row-bg); border-color:var(--row-bd)}

/* ===== day/night pull cord ===== */
.pull{position:fixed; top:0; right:80px; width:130px; height:196px; z-index:900; pointer-events:none}
.pull-swing{position:absolute; top:0; left:50%; transform-origin:50% 0; will-change:transform}
.pull-cord{position:absolute; left:50%; top:0; transform:translateX(-50%); width:2px; height:150px;
  background:linear-gradient(#e6d3a8,#b2925f 55%,#7c6340); border-radius:2px;
  box-shadow:0 0 3px rgba(0,0,0,.35); pointer-events:auto; cursor:grab}
.pull-bead{position:absolute; left:50%; top:142px; transform:translateX(-50%); width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6e3,#caa45f 60%,#876a3c); box-shadow:0 1px 2px rgba(0,0,0,.45)}
.pull-handle{position:absolute; left:50%; top:152px; transform:translateX(-50%); width:18px; height:30px; border-radius:9px;
  background:linear-gradient(180deg,#f2e4c2,#c49f63 55%,#87693b);
  box-shadow:0 4px 8px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.6);
  pointer-events:auto; cursor:grab}
.pull-handle:active{cursor:grabbing}
.pull-handle:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}
@keyframes handleYank{0%{transform:translateX(-50%) translateY(0)}35%{transform:translateX(-50%) translateY(14px)}100%{transform:translateX(-50%) translateY(0)}}
.pull-handle.yank{animation:handleYank .34s var(--ease)}