/* =========================================================
   STAGE 3 — ANIMATION, INTERACTION & RESPONSIVE POLISH
   Builds on the Stage 1 structure and Stage 2 visual design
   system (dark navy/black theme, blue→purple gradient accent
   system, typography hierarchy, card/button treatments, glow
   effects, layered depth — all preserved unchanged).

   Stage 3 adds on top of that foundation:
   - one orchestrated hero entrance sequence (CSS keyframes)
   - richer, still-restrained hover/active/focus states for
     nav links, buttons, skill cards, and social/contact links
   - stronger keyboard-focus visibility
   - a small-mobile breakpoint for very narrow screens
   - full prefers-reduced-motion support
   No new colors, no second design system — every new rule
   reuses existing :root tokens, with a small number of new
   tokens added for motion timing and hover elevation shadow.
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  color-scheme: dark;

  /* Core palette — dark navy/black base */
  --color-bg: #080b14;
  --color-bg-elevated: #0c1120;
  --color-surface: #111726;
  --color-surface-2: #161d30;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-text: #f3f5fb;
  --color-text-muted: #98a2c0;
  --color-text-faint: #7580a0;

  /* Accent gradient system */
  --color-accent-start: #5b8cff;
  --color-accent-end: #a35ff5;
  --gradient-primary: linear-gradient(135deg, var(--color-accent-start), var(--color-accent-end));
  --gradient-primary-soft: linear-gradient(135deg, rgba(91, 140, 255, 0.16), rgba(163, 95, 245, 0.16));
  --glow-blue: rgba(91, 140, 255, 0.35);
  --glow-purple: rgba(163, 95, 245, 0.3);

  /* Typography */
  --font-base: "Vazirmatn", Tahoma, sans-serif;
  --fs-hero: clamp(2.25rem, 5vw, 3.75rem);
  --fs-h2: clamp(1.65rem, 3vw, 2.35rem);
  --fs-h3: 1.2rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Layout & shape */
  --container-width: 1160px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow-btn: 0 8px 24px rgba(91, 140, 255, 0.25);
  --shadow-glow-btn-hover: 0 10px 30px rgba(91, 140, 255, 0.4);
  --shadow-lift: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 32px var(--glow-blue);

  /* Motion (Stage 3) */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.3s;
  --duration-entrance: 0.7s;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

h1, h2, h3, h4 {
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-text);
}

::selection {
  background: var(--glow-blue);
  color: var(--color-text);
}

:focus-visible {
  outline: 2px solid var(--color-accent-start);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Skip link: visually hidden until keyboard-focused, then docked at the
   top of the viewport. Genuinely necessary addition since there is no
   JavaScript-driven mobile menu to bypass, but keyboard users still need
   a fast way past the header nav to reach the main content. */
.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--space-sm);
  inset-inline-start: var(--space-sm);
  transform: translateY(-150%);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.1rem;
  font-size: var(--fs-small);
  font-weight: 600;
  transition: transform var(--duration-base) var(--ease-standard);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ---------- Shared Motion ---------- */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Layout Primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}

section {
  padding-block: var(--space-2xl);
  /* Stage 4 fix: the header is sticky with a backdrop blur, so anchor-link
     navigation (nav, footer, skip link target) would otherwise land content
     partially hidden underneath it. This offsets the scroll target by
     roughly the header's height. Widened at the 640px breakpoint below,
     where the header switches to a taller stacked (column) layout. */
  scroll-margin-top: 84px;
}

.section-heading {
  text-align: center;
  margin-bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.section-heading h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
}

.section-heading p {
  color: var(--color-text-muted);
}

/* ---------- Header / Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 11, 20, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}

.logo {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 800;
  white-space: nowrap;
  background-image: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: filter var(--duration-fast) ease;
}

.logo:hover,
.logo:focus-visible {
  filter: brightness(1.15);
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.main-nav__list a {
  position: relative;
  display: inline-block;
  padding-block: 0.25rem;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  font-weight: 500;
  transition: color var(--duration-fast) ease;
}

.main-nav__list a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background-image: var(--gradient-primary);
  transform: scaleX(0);
  transition: transform var(--duration-base) var(--ease-standard);
}

.main-nav__list a:hover,
.main-nav__list a:focus-visible {
  color: var(--color-text);
}

.main-nav__list a:hover::after,
.main-nav__list a:focus-visible::after {
  transform: scaleX(1);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform var(--duration-fast) var(--ease-standard),
              opacity var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              background var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease;
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

.btn--primary {
  background-image: var(--gradient-primary);
  color: #ffffff;
  box-shadow: var(--shadow-glow-btn);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-btn-hover);
}

.btn--primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-glow-btn);
}

.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--color-accent-start);
  background: var(--gradient-primary-soft);
}

.btn--nav {
  padding: 0.6rem 1.35rem;
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
  font-size: var(--fs-small);
}

.btn--nav:hover,
.btn--nav:focus-visible {
  border-color: var(--color-accent-start);
  background: var(--color-surface-2);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(110px);
  z-index: -1;
  pointer-events: none;
}

.hero::before {
  background: var(--glow-blue);
  top: -160px;
  inset-inline-start: -120px;
}

.hero::after {
  background: var(--glow-purple);
  bottom: -180px;
  inset-inline-end: -140px;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  padding-block: var(--space-2xl);
}

/* One orchestrated entrance moment for the hero, staggered top-to-bottom.
   This is the ONLY scripted entrance animation on the page — deliberately
   not repeated on every section, to keep motion feeling like a single
   considered moment rather than a scattered "fade up on every element"
   default. */
.hero__kicker,
.hero__title,
.hero__subtitle,
.hero__actions,
.hero__stats {
  animation: fade-in-up var(--duration-entrance) var(--ease-standard) both;
}

.hero__kicker { animation-delay: 0s; }
.hero__title { animation-delay: 0.08s; }
.hero__subtitle { animation-delay: 0.16s; }
.hero__actions { animation-delay: 0.24s; }
.hero__stats { animation-delay: 0.32s; }

.hero__kicker {
  font-size: var(--fs-small);
  font-weight: 600;
  background-image: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 800;
  max-width: 20ch;
  letter-spacing: -0.01em;
}

.hero__subtitle {
  max-width: 60ch;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.hero__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-xs);
}

.hero__stats {
  display: flex;
  gap: var(--space-xl);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  width: 100%;
  max-width: 640px;
}

.hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.hero__stat dt {
  order: 2;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.hero__stat dd {
  order: 1;
  font-size: 2rem;
  font-weight: 800;
  background-image: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- About ---------- */
.about__content {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  color: var(--color-text-muted);
}

.about__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}

.about__facts li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
}

.about__facts li:last-child {
  border-bottom: none;
}

.about__facts span {
  font-size: var(--fs-small);
  color: var(--color-text-faint);
}

/* ---------- Skills ---------- */
.skills__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.skill-card {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}

.skill-card:hover,
.skill-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lift);
}

.skill-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background-image: var(--gradient-primary);
}

.skill-card h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
}

.skill-card p {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* ---------- Contact ---------- */
.contact__box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
}

.contact__box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background-image: var(--gradient-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.contact__email a {
  font-size: 1.3rem;
  font-weight: 700;
  background-image: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact__socials {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

.contact__socials a {
  padding: 0.55rem 1.2rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  transition: color var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}

.contact__socials a:hover,
.contact__socials a:focus-visible {
  color: var(--color-text);
  border-color: var(--color-accent-start);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(91, 140, 255, 0.18);
}

.contact__socials a:active {
  transform: translateY(0);
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  color: var(--color-text-faint);
  font-size: var(--fs-small);
}

.footer__links {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.footer__links a {
  color: var(--color-text-faint);
  transition: color var(--duration-fast) ease;
}

.footer__links a:hover,
.footer__links a:focus-visible {
  color: var(--color-text);
}

/* ---------- Responsive Structure ---------- */
@media (max-width: 1024px) {
  .about__content {
    grid-template-columns: 1fr;
  }

  .skills__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero::before,
  .hero::after {
    width: 320px;
    height: 320px;
    filter: blur(90px);
  }
}

@media (max-width: 640px) {
  .header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .main-nav__list {
    gap: var(--space-sm);
  }

  .skills__grid {
    grid-template-columns: 1fr;
  }

  .footer__inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
  }

  .contact__box {
    padding: var(--space-lg);
  }

  section {
    scroll-margin-top: 200px;
  }
}

/* Small-mobile refinement — added in Stage 3 for very narrow screens
   (e.g. 320–390px devices). Does not replace or alter the 1024px/640px
   breakpoints above; it only tightens spacing/sizing further down. */
@media (max-width: 420px) {
  .container {
    padding-inline: var(--space-sm);
  }

  section {
    padding-block: var(--space-xl);
  }

  .hero__stats {
    gap: var(--space-md);
    row-gap: var(--space-sm);
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .contact__box {
    padding: var(--space-md);
  }

  .contact__socials {
    gap: var(--space-sm);
  }

  .skill-card {
    padding: var(--space-md) var(--space-sm) var(--space-sm);
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .hero__kicker,
  .hero__title,
  .hero__subtitle,
  .hero__actions,
  .hero__stats {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .skill-card:hover,
  .skill-card:focus-within,
  .btn--primary:hover,
  .btn--primary:focus-visible,
  .contact__socials a:hover,
  .contact__socials a:focus-visible {
    transform: none !important;
  }
}