/* ==========================================================================
   about.css — About section layout, typography, dual-mode, animation states
   ========================================================================== */

/* === Section container === */
.about {
  min-height: 100vh;
  min-height: 100svh;   /* constant small-viewport height — no address-bar reflow jitter */
  display: flex;
  align-items: center;
  padding: var(--space-4xl) 0;
  position: relative;
  overflow: visible;
}

/* === Inner wrapper — constrain width, establish flex column === */
.about-inner {
  position: relative;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl); /* 32px between label and paragraph */
}

.about-copy {
  position: relative;
  max-width: 1160px;
  /* min-height ensures the absolute light layer doesn't collapse the wrapper */
}

/* === Section label — matches hero name-label pattern === */
.about-label {
  font-family: var(--font-mono);
  /* minhpham section labels (.body-text uppercase) are 0.875rem (14px) — was 11px. */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* === About paragraph body text — base typography === */
.about-text {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  word-spacing: 0.04em;
  max-width: 1160px;
  hyphens: none;
}

/* Dark base layer — always visible, dim. Gives shape before reveal. */
.about-text-dark {
  color: var(--color-reveal-base);
}

/* Bright layer — full color, revealed by JS line wrappers on desktop */
.about-text-light {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: var(--color-text);
  pointer-events: none;
}

/* === Accent keyword highlights — orange in both layers === */
.about-text .about-accent {
  color: var(--color-accent);
}

.about-text .reveal-line-base,
.about-text .reveal-line-base .about-accent {
  color: var(--color-reveal-base);
}

.about-text .reveal-line-inner {
  color: var(--color-text);
}

.about-text .reveal-line-base,
.about-text .reveal-line-inner {
  font-family: var(--font-display);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* === Dual-mode wiring — scoped to .about (NEVER bare [data-professional]) ===
   Mirrors the .hero [data-professional] pattern from hero.css.
   The global rules in main.css do not cover this component — these are explicit. */
.about [data-professional] { display: block; }
.about [data-honest]       { display: none; }

body.mode-honest .about [data-professional] { display: none; }
body.mode-honest .about [data-honest]       { display: block; }

/* === will-change — applied only during animation via JS .is-animating class ===
   JS (Plan 03) adds .is-animating to .about-inner before the ScrollTrigger tween fires
   and removes it in onComplete. This avoids a permanent GPU layer on a text block. */
.about-inner.is-animating {
  will-change: transform, opacity;
}

/* === Reduced-motion belt-and-braces === */
@media (prefers-reduced-motion: reduce) {
  .about-inner {
    opacity: 1 !important;
    transform: none !important;
  }
  .about-text-light {
    clip-path: none !important;
    position: relative;
  }
  .about-text-dark {
    display: none;
  }
}

/* === Responsive adjustments === */
@media (max-width: 768px) {
  .about {
    min-height: auto;
    padding: var(--space-3xl) 0;
    /* overflow stays visible so the hold-reveal flood can bleed past this short
       section and fill the whole viewport (the lens is the only absolutely
       positioned child here, so nothing else leaks). */
    overflow: visible;
  }
  .about-text {
    font-size: var(--reveal-fs);          /* shared with hero + experience */
    line-height: 0.98;
    letter-spacing: -0.035em;
  }
  /* On mobile: disable clip animation, show bright layer directly */
  .about-text-light {
    position: relative;
    clip-path: none;
    color: var(--color-text);
  }
  .about-text-dark {
    display: none;
  }
}

/* === Cursor lens overlay — honest text revealed by orange circle === */
/* Co-located overlay: inset:0 makes this exactly the size + position of
   .about-inner at every screen size — no compensation math, no drift. */
.about-lens {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  z-index: 4;
  pointer-events: none;
}

.about-lens-inner {
  height: 100%;
  padding: 0 var(--content-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.about-lens .about-label {
  color: rgba(var(--color-lens-text-rgb), 0.6);
}

.about-lens .about-text {
  color: var(--color-bg);
}

.about-lens-line {
  display: block;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
}

.about-lens .about-accent {
  color: rgba(var(--color-lens-text-rgb), 0.6);
}

/* Mobile wrap parity: the base copy switches to inline flow at ≤768px
   (main.css turns .reveal-line inline). The lens copy must wrap the same
   way at the same font-size/width or the revealed text lands on different
   lines than the visible text. */
@media (max-width: 768px) {
  .about-lens-line { display: inline; white-space: normal; }
}

/* Desktop hover lens: full-bleed so the cursor-tracked circle is never clipped at
   an edge; lens-inner pushed back 1000px to keep the honest text aligned. Scoped
   >1024px; ≤1024 relocates this lens into .region-honest (single flood + mask) and
   positions it via JS, so it must NOT be full-bleed there. */
@media (min-width: 1025px) {
  .about-lens { inset: -1000px; }
  .about-lens-inner { position: absolute; inset: 1000px; }
}

/* touch: mask-size:0 hides at rest; JS spreads on hold */
@media (prefers-reduced-motion: reduce) { .about-lens { display: none; } }
body.mode-honest .about-lens { display: none; }
:root.theme-light .about-lens { background: var(--color-loader-accent); }