/* ===== ABOUT PAGE — PARALLAX & ANIMATIONS =====
   Background layers move at a slower rate than the foreground text via CSS vars
   driven by about-anim.js. Reveal animations layer on the existing .reveal system. */

/* ---------- Parallax background layers ---------- */
.parallax-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.parallax-bg > * {
  position: absolute;
  will-change: transform;
}

/* HERO parallax: huge mark that drifts up slower than text */
[data-page="about"] .page-hero { position: relative; overflow: hidden; }
[data-page="about"] .page-hero .container { position: relative; z-index: 2; }
.about-hero-bg-mark {
  right: -120px;
  top: 50%;
  width: 720px;
  height: 720px;
  background: url("assets/monogram.png") center / contain no-repeat;
  opacity: 0.06;
  transform: translate3d(0, calc(-50% + var(--py, 0px)), 0);
}
html[data-theme="dark"] .about-hero-bg-mark { opacity: 0.10; filter: invert(1); }
.about-hero-bg-rule {
  left: 12%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--border-1) 20%, var(--border-1) 80%, transparent);
  transform: translate3d(0, var(--py-fast, 0px), 0);
  opacity: 0.6;
}
.about-hero-bg-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--fw-teal);
  opacity: 0.35;
  left: 50%;
  top: 28%;
  white-space: nowrap;
  transform: translate3d(0, var(--py-slow, 0px), 0);
}

/* PRINCIPLES parallax: oversized "06" numeral behind the grid */
[data-page="about"] .principles { position: relative; overflow: hidden; }
[data-page="about"] .principles .container { position: relative; z-index: 2; }
.about-principles-bg-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(360px, 50vw, 640px);
  line-height: 0.85;
  color: var(--fw-navy);
  opacity: 0.04;
  letter-spacing: -0.04em;
  right: -8%;
  bottom: -10%;
  transform: translate3d(0, var(--py-slow, 0px), 0);
  user-select: none;
}
html[data-theme="dark"] .about-principles-bg-num { color: #fff; opacity: 0.06; }

/* 3As BAND parallax — the existing ::before mark + new layers */
[data-page="about"] .threeas-band { position: relative; }
.about-threeas-bg-grid {
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: translate3d(0, var(--py, 0px), 0);
  opacity: 0.7;
}
.about-threeas-bg-letters {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(280px, 36vw, 520px);
  line-height: 0.85;
  color: var(--fw-teal);
  opacity: 0.06;
  letter-spacing: -0.04em;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, calc(-50% + var(--py-slow, 0px)), 0);
  white-space: nowrap;
  user-select: none;
}

/* TEAM parallax: vertical word column */
[data-page="about"] .team-page { position: relative; overflow: hidden; }
[data-page="about"] .team-page .container { position: relative; z-index: 2; }
.about-team-bg-word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(180px, 22vw, 320px);
  line-height: 0.85;
  color: var(--fw-navy);
  opacity: 0.035;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  left: 50%;
  top: 8%;
  transform: translate3d(-50%, var(--py, 0px), 0);
  user-select: none;
  white-space: nowrap;
}
html[data-theme="dark"] .about-team-bg-word { color: #fff; opacity: 0.05; }

/* OFFICE parallax: drifting coordinate strip */
[data-page="about"] .office-band { position: relative; overflow: hidden; }
[data-page="about"] .office-band .container { position: relative; z-index: 2; }
.about-office-bg-coords {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--fw-teal);
  opacity: 0.4;
  left: -2%;
  bottom: 6%;
  white-space: nowrap;
  transform: translate3d(var(--px, 0px), 0, 0);
}

/* CTA parallax: existing ::before mark gets driven */
[data-page="about"] .cta-band::before {
  transition: transform 80ms linear;
  transform: translate3d(0, calc(-50% + var(--py, 0px)), 0) !important;
}

/* ---------- Section reveal: principle cards ---------- */
.principles-grid .principle {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.principles.is-in .principle { opacity: 1; transform: none; }
.principles.is-in .principle:nth-child(1) { transition-delay: 0ms; }
.principles.is-in .principle:nth-child(2) { transition-delay: 80ms; }
.principles.is-in .principle:nth-child(3) { transition-delay: 160ms; }
.principles.is-in .principle:nth-child(4) { transition-delay: 240ms; }
.principles.is-in .principle:nth-child(5) { transition-delay: 320ms; }
.principles.is-in .principle:nth-child(6) { transition-delay: 400ms; }

/* 3As rows */
.threea-row {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.threeas-band.is-in .threea-row:nth-child(1) { transition-delay: 80ms; opacity: 1; transform: none; }
.threeas-band.is-in .threea-row:nth-child(2) { transition-delay: 200ms; opacity: 1; transform: none; }
.threeas-band.is-in .threea-row:nth-child(3) { transition-delay: 320ms; opacity: 1; transform: none; }

/* TEAM rows: alternating slide-in */
.team-roster .team-row {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 800ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.team-page.is-in .team-row:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
.team-page.is-in .team-row:nth-child(2) { transition-delay: 120ms; opacity: 1; transform: none; }
.team-page.is-in .team-row:nth-child(3) { transition-delay: 240ms; opacity: 1; transform: none; }
.team-page.is-in .team-row:nth-child(4) { transition-delay: 360ms; opacity: 1; transform: none; }

/* TEAM photo: clip-path wipe-in once row is visible */
.team-row .team-photo .ph-frame {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms;
}
.team-page.is-in .team-row .ph-frame { clip-path: inset(0 0 0% 0); }

/* OFFICE facts: pop in one by one */
.office-facts > div {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.office-band.is-in .office-facts > div:nth-child(1) { transition-delay: 100ms; opacity: 1; transform: none; }
.office-band.is-in .office-facts > div:nth-child(2) { transition-delay: 160ms; opacity: 1; transform: none; }
.office-band.is-in .office-facts > div:nth-child(3) { transition-delay: 220ms; opacity: 1; transform: none; }
.office-band.is-in .office-facts > div:nth-child(4) { transition-delay: 280ms; opacity: 1; transform: none; }
.office-band.is-in .office-facts > div:nth-child(5) { transition-delay: 340ms; opacity: 1; transform: none; }
.office-band.is-in .office-facts > div:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: none; }
.office-band.is-in .office-facts > div:nth-child(7) { transition-delay: 460ms; opacity: 1; transform: none; }
.office-band.is-in .office-facts > div:nth-child(8) { transition-delay: 520ms; opacity: 1; transform: none; }

/* About-page-hero specific entry tweaks (overrides default page-hero) */
[data-page="about"] .page-hero .mono,
[data-page="about"] .page-hero .page-hero-title,
[data-page="about"] .page-hero .page-hero-lead {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 800ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body:not(.is-loading)[data-page="about"] .page-hero .mono            { opacity: 1; transform: none; transition-delay: 150ms; }
body:not(.is-loading)[data-page="about"] .page-hero .page-hero-title { opacity: 1; transform: none; transition-delay: 280ms; }
body:not(.is-loading)[data-page="about"] .page-hero .page-hero-lead  { opacity: 1; transform: none; transition-delay: 460ms; }

@media (prefers-reduced-motion: reduce) {
  .parallax-bg > * { transform: none !important; }
  .principles-grid .principle,
  .threea-row,
  .team-roster .team-row,
  .team-row .team-photo .ph-frame,
  .office-facts > div,
  [data-page="about"] .page-hero .mono,
  [data-page="about"] .page-hero .page-hero-title,
  [data-page="about"] .page-hero .page-hero-lead {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}