/* ─────────────────────────────────────────────────────────────
   about.css
   About page styles. Extends style.css — never duplicates it.
   All existing tokens, animations, and components are inherited.
   ───────────────────────────────────────────────────────────── */

/* ─── IRAN Kharazmi — Persian Display Font ──────────────
   Used only for display/heading elements in [lang="fa"] mode.
   Body and UI text remain on Vazirmatn (via --font-fa).      */
@font-face {
  font-family: 'IRAN Kharazmi';
  src: url('fonts/IRAN Kharazmi.eot');
  src: url('fonts/IRAN Kharazmi.eot?#iefix') format('embedded-opentype'),
       url('fonts/IRAN Kharazmi.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─── Page-level Overrides ───────────────────────────── */
/* Allow scrolling on about page (homepage uses overflow: hidden) */
body.about-page {
  overflow-y: auto;
  overflow-x: hidden;
}

body.about-page .page-frame {
  height: auto;
  min-height: 100svh;
  display: block; /* override homepage grid-template */
}

/* Keep corners and nav pinned to viewport while page scrolls */
body.about-page .corner,
body.about-page .nav {
  position: fixed;
}

/* Re-establish nav position after position:fixed override */
body.about-page .nav {
  top: calc(var(--pad) + 28px);
  inset-inline-end: var(--pad);
  z-index: 20;
}

/* ─── About: Spacing Tokens ──────────────────────────── */
/*
  Section gap reduced ~30% from original (100–160px → 68–112px).
  This preserves generous breathing room while creating a continuous
  reading rhythm — cinematic, not empty.
*/
:root {
  --section-gap:      clamp(68px, 10vw, 112px);
  --content-max:      1100px;
  --text-max:         700px;
  --font-fa-display:  'IRAN Kharazmi', 'Vazirmatn', Tahoma, sans-serif;
}

/* ─── Scroll Progress Bar ────────────────────────────── */
.scroll-progress {
  position: fixed;
  inset-inline-start: 0;
  top: 0;
  width: 1px;
  height: 0%;
  background: var(--accent);
  z-index: 100;
  opacity: 0.5;
  will-change: height;
}

/* ─── Keyframes ──────────────────────────────────────── */

/* Hero name: fade + lift + blur reveal */
@keyframes hero-name-reveal {
  0%   { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  65%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Scroll indicator: preserves translateX(-50%) centering throughout */
@keyframes scroll-indicator-reveal {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Scroll nudge: gentle vertical bounce on the scroll indicator */
@keyframes scroll-nudge {
  0%,  100% { transform: translateX(-50%) translateY(0);   opacity: 1; }
  50%        { transform: translateX(-50%) translateY(6px); opacity: 0.45; }
}

/* ─── About Hero ──────────────────────────────────────── */
.about-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--pad) * 4) var(--pad) calc(var(--pad) * 2);
  position: relative;
  gap: clamp(10px, 1.8vh, 18px);
  z-index: 10;
}

.about-hero__badge {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fade-up 0.6s ease 0.1s forwards;
}

.about-hero__index {
  font-family: var(--font);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}

.about-hero__eyebrow {
  font-family: var(--font);
  font-size: 0.52rem;
  letter-spacing: 0.28em;
  color: var(--text-mid);
}

.hero-divider--mini {
  width: clamp(30px, 4vw, 56px);
}

/* Hero name — blur + lift entrance */
.about-hero__name {
  font-family: var(--font-display);
  font-size: clamp(3.8rem, 11vw, 9.5rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--text-bright);
  line-height: 0.88;
  text-align: center;
  opacity: 0;
  animation: hero-name-reveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

/* Divider below name */
.about-hero .hero-divider {
  width: clamp(180px, 30vw, 400px);
  opacity: 0;
  animation: fade-up 0.6s ease 0.35s forwards;
}

/* Subtitle role */
.about-hero__role {
  font-family: var(--font);
  font-size: clamp(0.55rem, 1.1vw, 0.72rem);
  letter-spacing: 0.3em;
  color: var(--text-mid);
  opacity: 0;
  animation: fade-up 0.6s ease 0.45s forwards;
}

/* Scroll indicator — pinned to bottom of hero */
.about-hero__scroll {
  position: absolute;
  bottom: clamp(28px, 4vh, 48px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font);
  font-size: 0.48rem;
  letter-spacing: 0.28em;
  color: var(--text-dim);
  opacity: 0;
  animation: scroll-indicator-reveal 0.6s ease 0.9s forwards;
  white-space: nowrap;
}

.about-hero__scroll.is-nudging {
  animation: scroll-nudge 2.4s ease-in-out infinite;
}

/* ─── Section Layout (shared) ─────────────────────────── */
.about-section {
  padding-block: var(--section-gap);
  padding-inline: var(--pad);
  border-top: 1px solid var(--frame-border);
  position: relative;
  z-index: 10;
}

.about-section__inner {
  max-width: var(--content-max);
  margin-inline: auto;
}

/*
  Section header margin-bottom reduced ~30%.
  This pulls the heading visually closer to its content,
  making heading and body feel like one connected unit.
*/
.about-section__header {
  margin-bottom: clamp(28px, 4.5vw, 56px);
}

.about-section__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.section-num {
  font-family: var(--font);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}

.about-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--text-bright);
  line-height: 1;
  margin-bottom: 16px;
}

.about-section__divider {
  width: clamp(80px, 12vw, 160px);
}

/* ─── Scroll Reveal ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger helpers via data-delay attribute */
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }
.reveal[data-delay="6"] { transition-delay: 0.48s; }

/* No-JS fallback */
@media (scripting: none) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ─── Narrative Section ───────────────────────────────── */
.about-narrative .about-section__inner {
  display: grid;
  grid-template-columns: clamp(200px, 30%, 320px) 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.narrative-sidebar {
  position: sticky;
  top: calc(var(--pad) * 4);
}

.narrative-content {
  max-width: var(--text-max);
}

.narrative-content p {
  font-family: var(--font);
  font-size: clamp(0.7rem, 1.15vw, 0.82rem);
  line-height: 2.25;
  color: rgba(226, 221, 214, 0.82);
  letter-spacing: 0.04em;
  margin-bottom: clamp(1rem, 2.2vh, 1.6rem);
}

.narrative-content p:last-child {
  margin-bottom: 0;
}

/* Lead paragraph — larger, brighter, separated */
.narrative-content p.narrative-paragraph:first-child {
  font-size: clamp(0.78rem, 1.3vw, 0.94rem);
  color: var(--text-bright);
  padding-bottom: clamp(1rem, 2.2vh, 1.6rem);
  margin-bottom: clamp(1rem, 2.2vh, 1.6rem);
  border-bottom: 1px solid var(--frame-border);
}

[lang="fa"] .narrative-content p.narrative-paragraph:first-child {
  letter-spacing: 0;
  line-height: 2.4;
}

/* ─── Philosophy Section ──────────────────────────────── */

/* 2-column editorial layout: header left, content right */
.about-philosophy .about-section__inner {
  display: grid;
  grid-template-columns: clamp(200px, 30%, 320px) 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.about-philosophy .about-section__header {
  margin-bottom: 0;
}

.philosophy-inner {
  max-width: 840px;
  position: relative;
}

/* Decorative oversized opening quote (EN only) */
.philosophy-inner::before {
  content: '\201C';
  position: absolute;
  top: -0.25em;
  inset-inline-start: -0.12em;
  font-family: var(--font-display);
  font-size: clamp(5rem, 10vw, 9rem);
  color: var(--accent);
  opacity: 0.055;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  line-height: 1;
}

[lang="fa"] .philosophy-inner::before {
  display: none;
}

.philosophy-quote,
.philosophy-body {
  position: relative;
  z-index: 1;
}

.philosophy-quote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 3rem);
  letter-spacing: 0.08em;
  color: var(--text-bright);
  line-height: 1.15;
  margin-bottom: clamp(24px, 3.5vh, 40px);
  font-style: normal;
}

.philosophy-body {
  font-family: var(--font);
  font-size: clamp(0.65rem, 1.1vw, 0.78rem);
  letter-spacing: 0.05em;
  line-height: 2.1;
  color: var(--text-mid);
  max-width: 580px;
}

/* ─── Workflow Section ────────────────────────────────── */
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}

.workflow-step {
  border-top: 1px solid var(--frame-border);
  padding-top: clamp(20px, 3vw, 32px);
  padding-inline-end: clamp(16px, 2.5vw, 32px);
  transition: border-color 0.35s ease;
}

.workflow-step:hover {
  border-color: rgba(200, 184, 160, 0.22);
}

.workflow-step:last-child {
  padding-inline-end: 0;
}

/* Per-step stagger overrides (higher specificity than generic data-delay) */
.workflow-step.reveal:nth-child(1) { transition-delay: 0s; }
.workflow-step.reveal:nth-child(2) { transition-delay: 0.1s; }
.workflow-step.reveal:nth-child(3) { transition-delay: 0.2s; }
.workflow-step.reveal:nth-child(4) { transition-delay: 0.3s; }
.workflow-step.reveal:nth-child(5) { transition-delay: 0.4s; }

.workflow-step__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  letter-spacing: 0.04em;
  color: var(--text-dim);
  line-height: 1;
  margin-bottom: 14px;
  display: block;
  transition: color 0.35s ease;
}

.workflow-step:hover .workflow-step__num {
  color: var(--text-mid);
}

.workflow-step__title {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.6vw, 1.4rem);
  letter-spacing: 0.12em;
  color: var(--text-bright);
  line-height: 1;
  margin-bottom: 12px;
  display: block;
  transition: color 0.35s ease;
}

.workflow-step:hover .workflow-step__title {
  color: var(--accent);
}

.workflow-step__desc {
  font-family: var(--font);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  line-height: 1.9;
  color: var(--text-mid);
  transition: color 0.35s ease;
}

.workflow-step:hover .workflow-step__desc {
  color: var(--text-bright);
}

/* ─── Skills Section ──────────────────────────────────── */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(24px, 3vw, 42px);
}

.skills-category__label {
  font-family: var(--font);
  font-size: 0.48rem;
  letter-spacing: 0.28em;
  color: var(--text-mid);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--frame-border);
  display: block;
}

.skills-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-tag {
  font-family: var(--font);
  font-size: 0.48rem;
  letter-spacing: 0.14em;
  color: var(--text-bright);
  border: 1px solid var(--frame-border);
  padding: 5px 11px;
  opacity: 0.8;
  transition: background-color 0.22s ease, border-color 0.22s ease, opacity 0.22s ease;
  line-height: 1;
}

.skill-tag:hover {
  background-color: rgba(200, 184, 160, 0.06);
  border-color: rgba(200, 184, 160, 0.35);
  opacity: 1;
}

/* ─── Timeline Section ────────────────────────────────── */
.timeline-list {
  list-style: none;
  position: relative;
  max-width: 860px;
}

.timeline-list::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--frame-border);
}

.timeline-item {
  display: grid;
  grid-template-columns: clamp(110px, 18vw, 180px) 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding-block: clamp(20px, 3vh, 32px);
  border-bottom: 1px solid var(--frame-border);
  position: relative;
  padding-inline-start: clamp(22px, 3vw, 40px);
  transition: border-color 0.25s ease;
}

.timeline-item:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

/* Dot on the timeline spine */
.timeline-item::before {
  content: '';
  position: absolute;
  inset-inline-start: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border: 1px solid var(--text-mid);
  background: var(--bg);
  border-radius: 50%;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.timeline-item:hover::before {
  background: var(--accent);
  border-color: var(--accent);
}

.timeline-item:first-child {
  border-top: 1px solid var(--frame-border);
}

.timeline-item__left {
  padding-top: 2px;
}

.timeline-item__period {
  display: block;
  font-family: var(--font);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  color: var(--text-mid);
  line-height: 1.8;
  margin-bottom: 4px;
}

.timeline-item__context {
  display: block;
  font-family: var(--font);
  font-size: 0.44rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}

.timeline-item__role {
  display: block;
  font-family: var(--font);
  font-size: clamp(0.6rem, 1.1vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-bright);
  margin-bottom: 10px;
  line-height: 1.4;
  transition: color 0.25s ease;
}

.timeline-item:hover .timeline-item__role {
  color: var(--accent);
}

.timeline-item__desc {
  font-family: var(--font);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  line-height: 1.95;
  color: var(--text-mid);
}

/* ─── Values Section ──────────────────────────────────── */
.values-list {
  list-style: none;
  border-top: 1px solid var(--frame-border);
  max-width: 900px;
}

.value-item {
  padding-block: clamp(14px, 2vh, 22px);
  border-bottom: 1px solid var(--frame-border);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.8vw, 2.2rem);
  letter-spacing: 0.1em;
  color: var(--text-bright);
  line-height: 1.2;
  transition: color 0.28s ease, transform 0.28s ease;
  cursor: default;
}

.value-item:hover {
  color: var(--accent);
  transform: translateX(10px);
}

[dir="rtl"] .value-item:hover {
  transform: translateX(-10px);
}

/* ─── Contact CTA ─────────────────────────────────────── */
.about-cta {
  padding-block: clamp(68px, 10vw, 112px);
  padding-inline: var(--pad);
  text-align: center;
  border-top: 1px solid var(--frame-border);
  position: relative;
  z-index: 10;
}

.about-cta__inner {
  max-width: var(--content-max);
  margin-inline: auto;
}

.about-cta__heading {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 7.5rem);
  letter-spacing: 0.06em;
  color: var(--text-bright);
  line-height: 0.9;
  display: block;
}

.about-cta__subheading {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 7.5rem);
  letter-spacing: 0.06em;
  color: var(--accent);
  line-height: 0.9;
  display: block;
  margin-bottom: clamp(28px, 4vh, 50px);
}

.about-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.about-cta__or {
  font-family: var(--font);
  font-size: 0.48rem;
  letter-spacing: 0.22em;
  color: var(--text-dim);
}

.about-cta__email {
  font-family: var(--font);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  color: var(--text-mid);
  text-decoration: none;
  border-bottom: 1px solid var(--frame-border);
  padding-bottom: 3px;
  transition: color 0.22s ease, border-color 0.22s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.about-cta__email:hover {
  color: var(--text-bright);
  border-color: var(--text-mid);
}

/* ─── About Footer ────────────────────────────────────── */
.about-page .footer {
  z-index: 10;
  position: relative;
}

/* ─── RTL / FA Mode ──────────────────────────────────────
   All layout uses CSS logical properties (inset-inline-*,
   margin-inline-*, padding-inline-*), so RTL is mostly free.
   Only font and letter-spacing need explicit overrides.    */

[lang="fa"] .about-hero__name {
  font-family: var(--font-fa-display);
  font-size: clamp(2.2rem, 6.5vw, 5.8rem);
  letter-spacing: 0;
  line-height: 0.95;
}

[lang="fa"] .about-hero__role {
  font-family: var(--font-fa);
  letter-spacing: 0;
}

[lang="fa"] .about-hero__badge,
[lang="fa"] .about-hero__eyebrow,
[lang="fa"] .about-hero__index {
  font-family: var(--font-fa);
  letter-spacing: 0.04em;
}

[lang="fa"] .about-hero__scroll {
  font-family: var(--font-fa);
  letter-spacing: 0.04em;
}

[lang="fa"] .about-section__title {
  font-family: var(--font-fa-display);
  font-size: clamp(1.5rem, 3.4vw, 2.9rem);
  letter-spacing: 0;
  line-height: 1.2;
}

[lang="fa"] .section-num {
  font-family: var(--font-fa);
  letter-spacing: 0.04em;
}

[lang="fa"] .narrative-content p {
  font-family: var(--font-fa);
  letter-spacing: 0;
  line-height: 2.4;
}

[lang="fa"] .philosophy-quote {
  font-family: var(--font-fa-display);
  font-size: clamp(1.4rem, 3.2vw, 2.7rem);
  letter-spacing: 0;
  line-height: 1.55;
}

[lang="fa"] .philosophy-body {
  font-family: var(--font-fa);
  letter-spacing: 0;
  line-height: 2.4;
}

[lang="fa"] .workflow-step__num {
  font-family: var(--font-fa-display);
  letter-spacing: 0;
}

[lang="fa"] .workflow-step__title {
  font-family: var(--font-fa-display);
  font-size: clamp(0.85rem, 1.4vw, 1.2rem);
  letter-spacing: 0;
}

[lang="fa"] .workflow-step__desc {
  font-family: var(--font-fa);
  letter-spacing: 0;
  line-height: 2.2;
}

[lang="fa"] .skills-category__label {
  font-family: var(--font-fa);
  letter-spacing: 0.04em;
}

[lang="fa"] .skill-tag {
  font-family: var(--font-fa);
  letter-spacing: 0;
}

[lang="fa"] .timeline-item__period,
[lang="fa"] .timeline-item__context {
  font-family: var(--font-fa);
  letter-spacing: 0;
}

[lang="fa"] .timeline-item__role {
  font-family: var(--font-fa-display);
  letter-spacing: 0;
}

[lang="fa"] .timeline-item__desc {
  font-family: var(--font-fa);
  letter-spacing: 0;
  line-height: 2.4;
}

[lang="fa"] .value-item {
  font-family: var(--font-fa-display);
  font-size: clamp(0.9rem, 2vw, 1.6rem);
  letter-spacing: 0;
}

[lang="fa"] .about-cta__heading,
[lang="fa"] .about-cta__subheading {
  font-family: var(--font-fa-display);
  font-size: clamp(2.5rem, 7vw, 6.5rem);
  letter-spacing: 0;
  line-height: 1;
}

[lang="fa"] .about-cta__or,
[lang="fa"] .about-cta__email {
  font-family: var(--font-fa);
  letter-spacing: 0.02em;
}

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
  .workflow-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    row-gap: clamp(24px, 4vw, 40px);
  }

  .workflow-step:nth-child(3) {
    padding-inline-end: 0;
  }

  .about-narrative .about-section__inner {
    grid-template-columns: 1fr;
  }

  .narrative-sidebar {
    position: static;
  }

  .narrative-sidebar .about-section__header {
    margin-bottom: clamp(24px, 3.5vw, 36px);
  }

  /* Philosophy collapses to single column */
  .about-philosophy .about-section__inner {
    grid-template-columns: 1fr;
  }

  .about-philosophy .about-section__header {
    margin-bottom: clamp(24px, 3.5vw, 36px);
  }
}

@media (max-width: 768px) {
  .workflow-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .workflow-step:nth-child(3),
  .workflow-step:nth-child(5) {
    padding-inline-end: 0;
  }

  .timeline-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .timeline-list::before {
    display: none;
  }

  .timeline-item {
    padding-inline-start: 0;
  }

  .timeline-item::before {
    display: none;
  }

  .timeline-item:first-child {
    border-top: none;
    padding-top: 0;
  }

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

@media (max-width: 600px) {
  body.about-page .nav {
    top: calc(var(--pad) + 22px);
  }

  .about-hero__name {
    font-size: clamp(3rem, 16vw, 4.5rem);
  }

  .workflow-steps {
    grid-template-columns: 1fr;
  }

  .workflow-step {
    padding-inline-end: 0;
  }

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

  .about-section {
    padding-block: clamp(44px, 7vw, 72px);
  }

  .about-cta__heading,
  .about-cta__subheading {
    font-size: clamp(2.5rem, 14vw, 4.5rem);
  }
}

/* ─── Reduced Motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .about-hero__badge,
  .about-hero__name,
  .about-hero .hero-divider,
  .about-hero__role,
  .about-hero__scroll {
    animation: none;
    opacity: 1;
    filter: none;
  }

  .about-hero__scroll {
    transform: translateX(-50%);
  }

  .about-hero__scroll.is-nudging {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .workflow-step,
  .workflow-step__num,
  .workflow-step__title,
  .workflow-step__desc,
  .timeline-item,
  .timeline-item::before,
  .timeline-item__role,
  .value-item,
  .skill-tag {
    transition: none;
  }
}