/* ==========================================================================
   timeline.css — Experience timeline: 4 rows, 3-column grid on desktop,
   single-column collapse on mobile (TIME-05), dual-mode role text (TIME-04)
   Pairs with: JS stagger entrance in Plan 04 (TIME-03)
   ========================================================================== */

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

/* === Inner wrapper — constrains width like .about-inner === */
.timeline-inner {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);                  /* 48px between label, intro, rows block */
}

/* === Section label — mirrors .about-label === */
.timeline-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);
}

/* === Intro paragraph — dual-layer clip reveal like about section === */
.timeline-intro-wrap {
  position: relative;
  max-width: 1160px;
}

.timeline-intro {
  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;
}

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

.timeline-intro-dark {
  color: var(--color-reveal-base);
}

.timeline-intro-light {
  position: absolute;
  top: 0; left: 0; width: 100%;
  color: var(--color-text);
  pointer-events: none;
}

.timeline-intro .timeline-accent {
  color: var(--color-accent);
}

.timeline-intro .reveal-line-base,
.timeline-intro .reveal-line-base .timeline-accent {
  color: var(--color-reveal-base);
}

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

/* === Role wrap — holds dual-mode role spans + hover-split accent === */
.timeline-role-wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.timeline-role-accent {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  display: flex;
  align-items: center;
  clip-path: inset(50% 0 50% 0);
  will-change: clip-path;
  pointer-events: none;
  z-index: 3;
}

body.mode-honest .timeline-role-accent {
  display: none;
}

/* === Rows container — vertical stack, divider lines between rows === */
.timeline-rows {
  display: flex;
  flex-direction: column;
}

/* === Single row — 3 columns: year (narrow) | role (flex 1) | company (medium) ===
   grid-template-columns: 100px takes year, 1fr fills role, 200px takes company.
   align-items: baseline aligns the three text columns at their text baseline.
   border-top creates a divider above each row except the first. */
.timeline-row {
  display: grid;
  grid-template-columns: 100px 1fr 200px;
  column-gap: var(--space-xl);            /* 32px between columns */
  align-items: baseline;
  padding: var(--space-lg) 0;             /* 24px vertical breathing per row */
  border-top: 1px solid rgba(var(--color-text-rgb), 0.08);
}

.timeline-row:first-child {
  border-top: none;                       /* no divider above the first row */
}

/* === Year column — monospace, muted, smaller === */
.timeline-year {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

/* === Role column — primary text, dual-mode swappable === */
.timeline-role {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.4;
}

/* === Company column — body but muted === */
.timeline-company {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-muted);
  text-align: right;                      /* right-align the company column for editorial feel */
}

/* === Dual-mode wiring — scoped to .timeline (TIME-04) === */
.timeline [data-professional] { display: block; }
.timeline [data-honest]       { display: none; }

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

/* === will-change gated via .is-animating ===
   Plan-04 JS adds .is-animating to each .timeline-row before its stagger tween,
   removes it in onComplete to release the GPU layer. */
.timeline-row.is-animating {
  will-change: transform, opacity;
}

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

/* Hide hover-split accent on touch — no hover events */
@media (pointer: coarse) {
  .timeline-role-accent { display: none; }
}

/* === Mobile single-column collapse (TIME-05) === */
@media (max-width: 768px) {
  .timeline {
    padding: var(--space-3xl) 0;
    /* visible so the hold-reveal flood can bleed past this section and fill the
       whole viewport (lens is the only absolutely positioned child). */
    overflow: visible;
  }

  .timeline-row {
    grid-template-columns: 1fr;            /* collapse to single column */
    row-gap: var(--space-xs);              /* 4px between stacked items */
    padding: var(--space-md) 0;            /* 16px vertical */
  }

  .timeline-company {
    text-align: left;                      /* no longer right-aligned in single column */
  }

  .timeline-intro {
    font-size: var(--reveal-fs);          /* shared with hero + about */
    line-height: 0.98;
    letter-spacing: -0.035em;
  }

  .timeline-intro-light {
    clip-path: none;
    position: relative;
  }

  .timeline-intro-dark {
    display: none;
  }
}

/* === Small handset (<=480px) — CLAUDE.md responsiveness contract ===
   At this size 16px body text is the readable floor; intro drops to 14px
   only because it is a deliberately secondary element above the row list.
   Section padding tightens further to give content the maximum horizontal
   width on a portrait phone. */
@media (max-width: 480px) {
  .timeline {
    padding: var(--space-2xl) var(--space-sm); /* 48px vertical, 8px horizontal */
  }

  .timeline-intro {
    font-size: var(--reveal-fs);           /* stays locked to hero + about at every step */
  }

  .timeline-row {
    padding: var(--space-sm) 0;            /* 8px vertical — tight stack on small handsets */
  }

  .timeline-inner {
    gap: var(--space-xl);                  /* tighter section spacing — 32px between label/intro/rows */
  }
}

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

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

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

.timeline-lens .timeline-intro {
  color: var(--color-bg);
}

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

/* Mobile parity with the base intro so the revealed text overlays exactly:
   (1) wrap inline like .reveal-line does at ≤768 (main.css),
   (2) match .timeline-inner's tightened gap at ≤480 so the paragraph
       sits at the same Y as the visible one. */
@media (max-width: 768px) {
  .timeline-lens-line { display: inline; white-space: normal; }
}
@media (max-width: 480px) {
  .timeline-lens-inner { gap: var(--space-xl); }
}

/* 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 intro 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) {
  .timeline-lens { inset: -1000px; }
  .timeline-lens-inner { position: absolute; inset: 1000px; }
}

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

/* ==========================================================================
   HISTORY — past-employments list, minhpham .work_history parity.
   A SEPARATE labeled block from .timeline (Experience). Signature motion is the
   "vertical split open": each row carries a full-bleed orange honest panel that
   irises open vertically on hover (clip-path inset(50%)->inset(0%)) — the same
   .timeline-role-accent mechanic. (An earlier scroll-driven mask slide-up was
   dropped, so the .history-* column wrappers and .history-cell are now plain
   spans, kept only so the markup and accent alignment stay unchanged.)
   ========================================================================== */
.history {
  position: relative;
  padding: 0 0 var(--space-4xl);
  /* Tuck tight under the Experience block, like minhpham's
     .work_history { transform: translateY(-3.125rem) }. */
  margin-top: calc(-1 * var(--space-3xl));
}

.history-inner {
  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 the row list */
}

/* Section label — mirrors .timeline-label */
.history-label {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.history-rows {
  display: flex;
  flex-direction: column;
}

/* One row — minhpham .work_history scale: year column on the left, the title +
   company subtitle stacked on the right. Tall rows with a divider above each
   except the first. position:relative anchors the full-row orange accent panel. */
.history-row {
  position: relative;
  isolation: isolate;                     /* keeps the accent's z-index local */
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: var(--space-2xl);
  align-items: start;
  padding: var(--space-2xl) 0;
}

/* Full-bleed divider lines — ported from the What I Build stack (.wib-line
   border-top + last-child border-bottom). Every row gets a top line and the
   last row also a bottom line, so each title is bracketed. A 100vw line centred
   on the row breaks out of the max-width .history-inner; html/body have
   overflow-x: clip, so this never adds a sideways scrollbar. */
.history-row::before,
.history-row:last-child::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  border-top: 1px solid rgba(var(--color-text-rgb), 0.1);
  pointer-events: none;
  z-index: 0;
}
.history-row::before { top: 0; }
.history-row:last-child::after { bottom: 0; }

/* Column wrappers — plain containers. (These used to be overflow-hidden masks
   for a scroll slide-up reveal, but that made the text crawl up out of the
   divider line like a glitch, so the reveal was removed. Kept as wrappers so the
   markup and the accent alignment stay unchanged.) */
.history-year,
.history-title-mask,
.history-company-mask {
  position: relative;
}

/* Main column stacks the big title over the company subtitle. */
.history-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.history-cell {
  display: block;
}

/* Year — same scale as the title, exactly like minhpham (NOW/2016 == Design
   Lead size & weight, just the muted colour). ~39.5px on minhpham desktop. */
.history-year .history-cell {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  color: var(--color-muted);
  letter-spacing: -0.03em;
  line-height: 1.0;
}

/* Big title — minhpham history scale (~39.5px, weight 700, -0.03em). Two stacked
   copies (professional / honest) toggled by mode; only one shows at a time. */
.history-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--color-text);
}

/* Company subtitle, directly under the title (minhpham ~15.8px). */
.history-company {
  font-family: var(--font-body);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 400;
  color: var(--color-muted);
  line-height: 1.4;
}

/* Full-bleed orange honest panel — the band spans the ENTIRE viewport width
   (100vw, edge to edge) like the What I Build accent, not just the content
   column. Closed to a hairline at the row's vertical centre; JS irises it open
   to inset(0) on hover (the vertical split). The text lives in
   .history-accent-inner, which re-creates the centred max-width content box +
   row grid so the dark-on-orange text lands exactly over the base text.
   Hidden in honest mode and on touch (no hover). */
.history-accent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--color-accent);
  clip-path: inset(50% 0 50% 0);
  will-change: clip-path;
  pointer-events: none;
  z-index: 3;
}

/* Mirrors .history-inner + .history-row so the accent's content aligns 1:1
   with the base row content. */
.history-accent-inner {
  max-width: var(--content-max);
  height: 100%;
  margin: 0 auto;
  padding: var(--space-2xl) var(--content-gutter);
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: var(--space-2xl);
  align-items: start;
}

.history-accent-year {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--color-bg);
}

.history-accent-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.history-accent-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--color-bg);
}

.history-accent-company {
  font-family: var(--font-body);
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-bg);
  opacity: 0.8;
}

body.mode-honest .history-accent { display: none; }

/* Dual-mode wiring — scoped to .history (mirrors .timeline). */
.history [data-professional] { display: block; }
.history [data-honest]       { display: none; }
body.mode-honest .history [data-professional] { display: none; }
body.mode-honest .history [data-honest]       { display: block; }

/* No hover on touch — kill the accent panel. */
@media (pointer: coarse) {
  .history-accent { display: none; }
}

/* Mobile (minhpham img 18): KEEP the year | title two-column layout — just a
   narrower year column — instead of collapsing to one column. The honest reveal
   (.history-lens) mirrors these exact values so the year + title line up 1:1. */
@media (max-width: 768px) {
  .history { margin-top: calc(-1 * var(--space-2xl)); }
  .history-row,
  .history-accent-inner {
    grid-template-columns: clamp(56px, 16vw, 80px) 1fr;
    column-gap: var(--space-md);
    row-gap: 0;
  }
  .history-row { padding: var(--space-lg) 0; }
  .history-accent-inner { padding: var(--space-lg) var(--content-gutter); }
  .history-inner { gap: var(--space-lg); }
  .history-main { gap: var(--space-xs); }
  .history-year .history-cell,
  .history-title {
    font-size: clamp(22px, 6.2vw, 32px);
  }
  .history-company {
    font-size: clamp(13px, 3.6vw, 15px);
  }
}

@media (max-width: 480px) {
  /* no extra side padding — .history-inner's gutter already insets the content,
     and a clean 0 here keeps the lens box aligned with the base. */
  .history { padding: 0 0 var(--space-2xl); }
}

/* === History mobile hold-reveal flood (touch only) ========================
   Honest titles per row, dark on accent, revealed by the circular mask the
   hold button drives (mask wiring in main.css). Desktop keeps the per-row
   vertical-split accent panels, so this is display:none above 1024px. */
.history-lens { display: none; }

@media (max-width: 1024px) {
  .history-lens {
    display: block;
    position: absolute;
    /* Section-box flood (inset:0). JS reveals experience + history together, so
       their section-box floods tile the viewport with no overlap — no bleed, so
       this flood cannot cover the experience intro above it. */
    inset: 0;
    background: var(--color-accent);
    z-index: 5;
    pointer-events: none;
  }
  /* Mirror .history-inner EXACTLY (fills the .history border box, which has no top
     padding) so the honest rows land on the base rows. Top-aligned, same gutter,
     same label→rows gap — NOT centred. */
  .history-lens-inner {
    position: absolute;
    inset: 0;
    padding: 0 var(--content-gutter);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }
  .history-lens-label {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(var(--color-lens-text-rgb), 0.6);
  }
  .history-lens-rows {
    display: flex;
    flex-direction: column;
  }
  /* one row mirrors .history-row mobile: year | main, same column + padding +
     dividers, so each row sits at the same Y as the base. */
  .history-lens-row {
    display: grid;
    grid-template-columns: clamp(56px, 16vw, 80px) 1fr;
    column-gap: var(--space-md);
    align-items: start;
    padding: var(--space-lg) 0;
    border-top: 1px solid rgba(var(--color-lens-text-rgb), 0.18);
  }
  .history-lens-row:last-child {
    border-bottom: 1px solid rgba(var(--color-lens-text-rgb), 0.18);
  }
  .history-lens-year {
    font-family: var(--font-display);
    font-size: clamp(22px, 6.2vw, 32px);   /* == base year */
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.0;
    color: rgba(var(--color-lens-text-rgb), 0.55);
  }
  .history-lens-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
  }
  .history-lens-title {
    font-family: var(--font-display);
    font-size: clamp(22px, 6.2vw, 32px);   /* == base title */
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.0;
    color: var(--color-bg);
  }
  .history-lens-company {
    font-family: var(--font-body);
    font-size: clamp(13px, 3.6vw, 15px);   /* == base company */
    font-weight: 400;
    line-height: 1.4;
    color: rgba(var(--color-lens-text-rgb), 0.75);
  }
}

body.mode-honest .history-lens { display: none; }
:root.theme-light .history-lens { background: var(--color-loader-accent); }
@media (prefers-reduced-motion: reduce) { .history-lens { display: none; } }