/* =========================================================================
   RESUME PWA — DESIGN SYSTEM
   Palette   : deep-space base + bold violet/pink/amber/cyan aurora gradient
   Type      : Vazirmatn (FA) · Space Grotesk (EN display) · Inter (EN body)
   Signature : animated "aurora mesh" hero + gradient timeline spine
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:            #0A0A12;
  --bg-soft:       #101019;
  --bg-elev:       #15151F;
  --surface:       rgba(255,255,255,.045);
  --surface-hi:    rgba(255,255,255,.08);
  --border:        rgba(255,255,255,.09);
  --ink:           #F5F3FF;
  --ink-dim:       #A8A3C4;
  --ink-mute:      #726E8D;

  --violet:  #7C3AED;
  --pink:    #EC4899;
  --amber:   #F59E0B;
  --cyan:    #22D3EE;

  --grad-aurora:  linear-gradient(120deg, var(--violet), var(--pink) 45%, var(--amber) 80%);
  --grad-primary: linear-gradient(95deg, var(--violet), var(--pink));
  --grad-accent:  linear-gradient(95deg, var(--cyan), var(--violet));

  --radius-sm: 12px;
  --radius:    20px;
  --radius-lg: 28px;

  --shadow-glow: 0 8px 40px -8px rgba(124,58,237,.45);
  --ease: cubic-bezier(.16,1,.3,1);

  --font-fa:   'Vazirmatn', sans-serif;
  --font-en-d: 'Space Grotesk', sans-serif;
  --font-en-b: 'Inter', sans-serif;

  --container: 1160px;
  --nav-h: 76px;
}

/* Light theme override -------------------------------------------------- */
html[data-theme="light"]{
  --bg:        #FAF9FC;
  --bg-soft:   #F1EFF7;
  --bg-elev:   #FFFFFF;
  --surface:   rgba(20,10,40,.035);
  --surface-hi:rgba(20,10,40,.06);
  --border:    rgba(20,10,40,.09);
  --ink:       #17121F;
  --ink-dim:   #4B4562;
  --ink-mute:  #8A84A3;
  --shadow-glow: 0 8px 40px -10px rgba(124,58,237,.25);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html[lang="fa"] body{ font-family:var(--font-fa); }
html[lang="en"] body{ font-family:var(--font-en-b); }

body{
  background:var(--bg);
  color:var(--ink);
  line-height:1.75;
  overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease);
}

html[lang="fa"] .display{ font-family:var(--font-fa); font-weight:800; }
html[lang="en"] .display{ font-family:var(--font-en-d); font-weight:700; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea{ font:inherit; color:inherit; }

::selection{ background:var(--violet); color:#fff; }

/* Respect reduced motion -------------------------------------------------*/
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Language / direction toggling ----------------------------------------- */
html[lang="fa"] [data-lang="en"]{ display:none; }
html[lang="en"] [data-lang="fa"]{ display:none; }
html[lang="en"]{ direction:ltr; }
html[lang="fa"]{ direction:rtl; }

/* Layout helpers ---------------------------------------------------------*/
.container{ max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.section{ padding:110px 0; position:relative; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 64px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--pink); font-weight:600; margin-bottom:14px;
}
html[lang="fa"] .eyebrow{ letter-spacing:0; }
.eyebrow::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--grad-primary); box-shadow:0 0 12px var(--pink); }
.section-title{ font-size:clamp(1.8rem,3.6vw,2.6rem); margin-bottom:14px; }
.section-sub{ color:var(--ink-dim); font-size:1.02rem; }

.gradient-text{
  background:var(--grad-aurora);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% auto; animation:hue 8s linear infinite;
}
@keyframes hue{ to{ background-position:200% center; } }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border-radius:100px; font-weight:600; font-size:.95rem;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--grad-primary); color:#fff; box-shadow:var(--shadow-glow); }
.btn-primary:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 14px 50px -8px rgba(236,72,153,.55); }
.btn-ghost{ background:var(--surface); border:1px solid var(--border); color:var(--ink); backdrop-filter:blur(6px); }
.btn-ghost:hover{ background:var(--surface-hi); transform:translateY(-3px); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px; border-radius:8px;
}

.glass{
  background:var(--surface);
  border:1px solid var(--border);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-radius:var(--radius);
}

/* Scroll reveal ------------------------------------------------------------*/
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* =========================================================================
   NAVBAR
   ========================================================================= */
.navbar{
  position:fixed; inset-inline:0; top:16px; z-index:100;
  display:flex; justify-content:center;
}
.nav-pill{
  width:min(100% - 32px, 1120px);
  margin-inline:16px;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:10px 12px 10px 20px;
  border-radius:100px;
}
html[dir="rtl"] .nav-pill{ padding:10px 20px 10px 12px; }
.nav-brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
.nav-brand .logo-dot{
  width:34px; height:34px; border-radius:50%; background:var(--grad-primary);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:.9rem; font-weight:800;
  flex:none;
}
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{ font-size:.92rem; color:var(--ink-dim); font-weight:500; position:relative; padding:6px 0; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a::after{
  content:''; position:absolute; bottom:0; inset-inline:0; height:2px; background:var(--grad-primary);
  transform:scaleX(0); transform-origin:center; transition:transform .35s var(--ease);
}
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border); color:var(--ink); flex:none;
  transition:background .3s, transform .3s;
}
.icon-btn:hover{ background:var(--surface-hi); transform:translateY(-2px); }
.icon-btn svg{ width:18px; height:18px; }
.lang-switch{
  display:flex; align-items:center; gap:2px; padding:4px; border-radius:100px;
  background:var(--surface); border:1px solid var(--border);
}
.lang-switch button{
  padding:6px 12px; border-radius:100px; font-size:.78rem; font-weight:700; color:var(--ink-mute);
  transition:background .3s, color .3s;
}
.lang-switch button.active{ background:var(--grad-primary); color:#fff; }
.nav-toggle{ display:none; }

@media (max-width: 880px){
  .nav-links{
    position:fixed; top:calc(var(--nav-h) + 8px); inset-inline:16px;
    flex-direction:column; align-items:stretch; gap:2px; padding:14px;
    border-radius:var(--radius); background:var(--bg-elev); border:1px solid var(--border);
    opacity:0; pointer-events:none; transform:translateY(-8px);
    transition:opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav-links.open{ opacity:1; pointer-events:auto; transform:none; }
  .nav-links a{ padding:12px 10px; border-radius:10px; }
  .nav-links a:hover{ background:var(--surface); }
  .nav-toggle{ display:flex; }
}

/* =========================================================================
   HERO — aurora mesh signature
   ========================================================================= */
.hero{
  min-height:100vh; display:flex; align-items:center; position:relative;
  padding-top:var(--nav-h); overflow:hidden;
}
.aurora{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.aurora span{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.55;
  animation:float 16s ease-in-out infinite;
}
.aurora span:nth-child(1){ width:480px; height:480px; background:var(--violet); top:-10%; inset-inline-start:-8%; animation-delay:0s; }
.aurora span:nth-child(2){ width:420px; height:420px; background:var(--pink); top:20%; inset-inline-end:-10%; animation-delay:-5s; }
.aurora span:nth-child(3){ width:380px; height:380px; background:var(--amber); bottom:-12%; inset-inline-start:20%; animation-delay:-10s; opacity:.35; }
.aurora span:nth-child(4){ width:300px; height:300px; background:var(--cyan); bottom:10%; inset-inline-end:15%; animation-delay:-3s; opacity:.3; }
@keyframes float{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(30px,-40px) scale(1.08); }
  66%{ transform:translate(-24px,26px) scale(.95); }
}
.grain{ position:absolute; inset:0; z-index:1; opacity:.035; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.hero-inner{
  position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
  width:100%;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:100px;
  font-size:.82rem; font-weight:600; margin-bottom:22px;
}
.hero-badge .pulse{ width:8px; height:8px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 rgba(34,197,94,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55);} 70%{ box-shadow:0 0 0 10px rgba(34,197,94,0);} 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0);} }

.hero-title{ font-size:clamp(2.3rem,5.2vw,3.9rem); line-height:1.15; margin-bottom:20px; }
.hero-title .line{ display:block; }
.hero-role{ font-size:clamp(1.05rem,2vw,1.3rem); color:var(--ink-dim); margin-bottom:16px; font-weight:600; }
.hero-tagline{ color:var(--ink-dim); max-width:520px; margin-bottom:34px; font-size:1.02rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:38px; }
.hero-socials{ display:flex; gap:10px; }

.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.orbit-ring{
  position:relative; width:340px; height:340px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-aurora); animation:hue 10s linear infinite; background-size:220% auto;
}
.orbit-ring::before{
  content:''; position:absolute; inset:-18px; border-radius:50%; border:1.5px dashed var(--border);
  animation:spin 40s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.avatar-frame{
  width:88%; height:88%; border-radius:50%; overflow:hidden; background:var(--bg-elev);
  border:6px solid var(--bg); display:flex; align-items:center; justify-content:center;
}
.avatar-frame img{ width:100%; height:100%; object-fit:cover; }
.avatar-fallback{ font-size:4.2rem; font-weight:800; font-family:var(--font-en-d); color:var(--ink-dim); }
.orbit-chip{
  position:absolute; padding:10px 16px; border-radius:100px; display:flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:700; box-shadow:0 10px 30px -8px rgba(0,0,0,.4);
}
.orbit-chip.c1{ top:0; inset-inline-end:-6%; }
.orbit-chip.c2{ bottom:6%; inset-inline-start:-10%; }

.scroll-cue{
  position:absolute; bottom:32px; inset-inline-start:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--ink-mute); font-size:.75rem; z-index:2;
}
.scroll-cue .stick{ width:1px; height:34px; background:linear-gradient(var(--ink-mute),transparent); animation:scrollcue 2s infinite; }
@keyframes scrollcue{ 0%{ opacity:0; transform:scaleY(0);} 40%{opacity:1; transform:scaleY(1);} 100%{opacity:0; transform:scaleY(1) translateY(10px);} }

@media (max-width: 940px){
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-cta, .hero-socials{ justify-content:center; }
  .hero-tagline{ margin-inline:auto; }
  .hero-visual{ order:-1; margin-bottom:20px; }
  .orbit-ring{ width:230px; height:230px; }
}

/* =========================================================================
   ABOUT + STATS
   ========================================================================= */
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center; }
.about-text p{ color:var(--ink-dim); margin-bottom:16px; font-size:1.02rem; text-align: justify;}
.stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:28px; }
.stat-card{ padding:22px; text-align:center; }
.stat-num{ font-family:var(--font-en-d); font-size:2.1rem; font-weight:700; background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat-label{ color:var(--ink-mute); font-size:.82rem; margin-top:4px; }
@media (max-width: 880px){ .about-grid{ grid-template-columns:1fr; } }

/* =========================================================================
   SKILLS
   ========================================================================= */
.skills-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.skill-card{ padding:26px; }
.skill-cat-title{ font-weight:700; margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.skill-cat-title::before{ content:''; width:10px; height:10px; border-radius:3px; background:var(--grad-primary); flex:none; }
.skill-row{ margin-bottom:16px; }
.skill-row:last-child{ margin-bottom:0; }
.skill-row-top{ display:flex; justify-content:space-between; font-size:.86rem; margin-bottom:7px; color:var(--ink-dim); }
.skill-bar{ height:8px; border-radius:100px; background:var(--surface); overflow:hidden; }
.skill-fill{ height:100%; border-radius:100px; background:var(--grad-primary); width:0; transition:width 1.2s var(--ease); }
@media (max-width: 900px){ .skills-grid{ grid-template-columns:1fr; } }

/* =========================================================================
   TIMELINE (Experience / Education) — gradient spine, real chronology
   ========================================================================= */
.timeline{ position:relative; max-width:820px; margin-inline:auto; }
.timeline::before{
  content:''; position:absolute; inset-inline-start:20px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(var(--violet),var(--pink),var(--amber));
}
html[dir="rtl"] .timeline::before{ inset-inline-start:auto; inset-inline-end:20px; }
.tl-item{ position:relative; padding-inline-start:60px; padding-bottom:44px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{
  position:absolute; inset-inline-start:12px; top:4px; width:18px; height:18px; border-radius:50%;
  background:var(--bg); border:3px solid var(--pink); box-shadow:0 0 0 4px var(--bg);
}
.tl-card{ padding:22px 24px; }
.tl-period{ font-size:.78rem; font-weight:700; color:var(--pink); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
html[lang="fa"] .tl-period{ letter-spacing:0; }
.tl-role{ font-size:1.12rem; font-weight:700; margin-bottom:2px; }
.tl-org{ color:var(--ink-dim); font-size:.92rem; margin-bottom:12px; }
.tl-desc{ color:var(--ink-dim); font-size:.94rem; }

/* =========================================================================
   PROJECTS
   ========================================================================= */
.projects-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.project-card{ overflow:hidden; display:flex; flex-direction:column; transition:transform .4s var(--ease), border-color .4s; }
.project-card:hover{ transform:translateY(-6px); border-color:var(--surface-hi); }
.project-thumb{
  height:170px; position:relative; background:var(--grad-aurora); background-size:220% auto;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.project-thumb img{ width:100%; height:100%; object-fit:cover; }
.project-thumb .ph-icon{ width:46px; height:46px; opacity:.85; color:#fff; }
.project-featured-badge{
  position:absolute; top:12px; inset-inline-end:12px; padding:5px 12px; border-radius:100px;
  background:rgba(0,0,0,.35); backdrop-filter:blur(6px); color:#fff; font-size:.72rem; font-weight:700;
}
.project-body{ padding:20px 22px 22px; flex:1; display:flex; flex-direction:column; }
.project-title{ font-weight:700; font-size:1.05rem; margin-bottom:8px; }
.project-desc{ color:var(--ink-dim); font-size:.9rem; margin-bottom:16px; flex:1; }
.project-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.tag{ font-size:.72rem; padding:4px 10px; border-radius:100px; background:var(--surface); border:1px solid var(--border); color:var(--ink-dim); }
.project-links{ display:flex; gap:10px; }
.project-links a{ display:flex; align-items:center; gap:6px; font-size:.84rem; font-weight:600; color:var(--ink); }
.project-links a:hover{ color:var(--pink); }
.project-links svg{ width:15px; height:15px; }
@media (max-width: 980px){ .projects-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 620px){ .projects-grid{ grid-template-columns:1fr; } }

/* =========================================================================
   CERTIFICATES
   ========================================================================= */
.cert-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.cert-card{ padding:20px 22px; display:flex; gap:16px; align-items:flex-start; }
.cert-icon{
  width:46px; height:46px; border-radius:14px; background:var(--grad-accent); flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.cert-icon svg{ width:22px; height:22px; }
.cert-title{ font-weight:700; margin-bottom:3px; }
.cert-meta{ color:var(--ink-mute); font-size:.82rem; margin-bottom:8px; }
.cert-link{ font-size:.82rem; font-weight:600; color:var(--cyan); }
@media (max-width: 700px){ .cert-grid{ grid-template-columns:1fr; } }

/* =========================================================================
   LANGUAGES
   ========================================================================= */
.langs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:820px; margin-inline:auto; }
.lang-card{ padding:20px; text-align:center; }
.lang-name{ font-weight:700; margin-bottom:4px; }
.lang-level{ font-size:.82rem; color:var(--ink-mute); margin-bottom:12px; }
@media (max-width: 700px){ .langs-grid{ grid-template-columns:1fr 1fr; } }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; }
.contact-info-card{ padding:30px; height:fit-content; }
.contact-row{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.contact-row:last-child{ margin-bottom:0; }
.contact-row .icon-btn{ pointer-events:none; }
.contact-row a, .contact-row span{ color:var(--ink-dim); font-size:.92rem; }
.contact-socials{ display:flex; gap:10px; margin-top:22px; }

.contact-form{ padding:32px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:.84rem; color:var(--ink-dim); font-weight:600; }
.field input, .field textarea{
  padding:13px 16px; border-radius:12px; background:var(--surface); border:1px solid var(--border); color:var(--ink);
  transition:border-color .3s, background .3s;
}
.field input:focus, .field textarea:focus{ border-color:var(--violet); background:var(--surface-hi); outline:none; }
.field textarea{ resize:vertical; min-height:130px; }
.form-msg{ font-size:.88rem; margin-top:6px; min-height:1.4em; }
.form-msg.ok{ color:#4ADE80; }
.form-msg.err{ color:#F87171; }
.hp-field{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
@media (max-width: 880px){ .contact-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{ padding:40px 0; border-top:1px solid var(--border); }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-note{ color:var(--ink-mute); font-size:.85rem; }
.back-top{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--grad-primary); color:#fff; box-shadow:var(--shadow-glow);
}

/* PWA install toast --------------------------------------------------------*/
.install-toast{
  position:fixed; bottom:24px; inset-inline-end:24px; z-index:200; padding:16px 18px; display:flex; align-items:center; gap:14px;
  max-width:320px; transform:translateY(140%); transition:transform .5s var(--ease); border-radius:var(--radius);
}
.install-toast.show{ transform:translateY(0); }
.install-toast p{ font-size:.85rem; color:var(--ink-dim); }
.install-toast strong{ display:block; margin-bottom:2px; }

/* =========================================================================
   PRINT / PDF EXPORT — resume-style clean layout
   ========================================================================= */
@media print{
  .navbar, .aurora, .grain, .scroll-cue, .install-toast, .back-top, .footer .icon-btn, #fabDock{ display:none !important; }
  body{ background:#fff !important; color:#111 !important; }
  .glass{ background:#fff !important; border:1px solid #ddd !important; backdrop-filter:none !important; box-shadow:none !important; }
  .section{ padding:22px 0 !important; break-inside:avoid; }
  .gradient-text, .stat-num{ -webkit-text-fill-color:#111 !important; color:#111 !important; }
  .hero{ min-height:auto; }
  a{ color:#111 !important; }
  .orbit-ring{ box-shadow:none; }
}

/* Loading skeleton shimmer (used while service worker warms cache) --------*/
.skeleton{ background:linear-gradient(90deg, var(--surface) 25%, var(--surface-hi) 37%, var(--surface) 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; }
@keyframes shimmer{ 0%{ background-position:100% 50%;} 100%{ background-position:0 50%;} }