/* =============================================================
   About — mirrors the motion model of zainabkabira.com/about
   Three behaviours:
     1. stacked pinning   sections are sticky, each scrolls up over the last
     2. polaroid drag     pick up / move / drop with a spring, reset glides home
     3. accordion         a + that rotates 45deg into a x
   ============================================================= */

:root {
  --paper:  #FFF9F1;
  --surface-2: #F7F6F4;   /* the alternating surface, as on the landing page */
  --ink:    #403C3C;
  --about-ink: #2b2b2b;
  --sans:   "TASA Explorer", "Space Grotesk", system-ui, sans-serif;
  --body:   "Inter", system-ui, sans-serif;
  --grotesk:"Space Grotesk", system-ui, sans-serif;
  --mono:   "JetBrains Mono", ui-monospace, Menlo, monospace;
  --gutter: 72px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: 80px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav__brand { display: flex; align-items: center; gap: 8px; font-family: var(--grotesk); font-size: 13px; letter-spacing: .08em; }
.nav__pill {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 9px;
  border-radius: 9999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  font-family: var(--grotesk); font-size: 15px;
}
.nav__link {
  padding: 7px 16px;
  border-radius: 99px;
  border: 1px solid transparent;        /* reserve the ring so nothing shifts */
  transition: border-color 0.25s ease;
}
/* no ring at rest — not even on the current page. It appears on hover only. */
.nav__link:hover,
.nav__link:focus-visible { border-color: currentColor; }
/* the pill is white in both themes, so pin its type dark rather than let it
   inherit --ink — otherwise the dark theme paints white on white */
.nav__cta { display: flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: #fff; color: #000; }
.nav__tools { display: flex; align-items: center; gap: 4px; }
.nav__icon {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid #e7dfcd; background: #fff; cursor: pointer; padding: 0;
}

/* =============================================================
   1. STACKED PINNING
   Every band is sticky at the top, so the next one scrolls up and
   covers it. min-height keeps a pinned band filling the viewport
   so no gap shows behind.
   ============================================================= */
.band {
  position: sticky;
  top: 0;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- hero ---------- */
.ab-intro {
  background: linear-gradient(180deg, #fff9f1 0%, #e7d6bd 100%);
  color: var(--about-ink);
  --intro-scale: 1;                 /* JS shrinks the 1440x812 frame to fit */
  height: calc(812px * var(--intro-scale));
  display: grid;
  place-items: center;
}
.ab-intro__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
}
.ab-intro__inner {
  position: relative; z-index: 1;
  width: 1440px;
  height: 812px;
  transform: scale(var(--intro-scale));
  transform-origin: center center;
}
.ab-copy { position: absolute; left: var(--gutter); top: 232px; width: 600px; }
.ab-copy h1 {
  margin: 0 0 28px;
  font-family: "TASA Orbiter", var(--sans);
  font-weight: 700;
  font-size: 40px;
  line-height: 49px;
  letter-spacing: -0.01em;
  max-width: 588px;
}
.ab-copy p { margin: 0 0 22px; width: 571px; font-size: 19px; line-height: 32px; }
.ab-copy p.g { font-family: var(--grotesk); }

/* =============================================================
   2. POLAROID DRAG
   ============================================================= */
.ab-photos { position: absolute; left: 875px; top: 221px; width: 409px; height: 467px; }

.ab-polaroid {
  position: absolute;
  cursor: grab;
  touch-action: none;              /* let the pointer drag beat page scroll */
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.ab-polaroid img { pointer-events: none; }   /* drag the tile, not the image */
.ab-polaroid.is-dragging { cursor: grabbing; }
.ab-polaroid.is-dragging img { box-shadow: 0 22px 48px rgba(0,0,0,.24); }

/* drop: spring the lift-scale back with a gentle overshoot */
.ab-polaroid.is-dropping { transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* reset: glide each tile home with a smooth, un-bouncy settle */
.ab-polaroid.is-settling { transition: transform .72s cubic-bezier(0.22, 1, 0.36, 1); }

/* straight from the Figma "Figure" frames inside the 409x467 container */
.ab-polaroid.p1 { left: 135px; top:  39px; width: 197px; z-index: 1; }
.ab-polaroid.p2 { left:  34px; top: 106px; width: 225px; z-index: 2; }
.ab-polaroid.p3 { left: 163px; top: 144px; width: 212px; z-index: 3; }
.ab-polaroid.p4 { left:  84px; top:  59px; width: 232px; z-index: 4; }

.ab-photos__reset {
  position: absolute; right: -8px; bottom: -34px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border: 1px solid rgba(43,43,43,.25);
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--about-ink);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, background-color .25s ease;
  cursor: pointer;
}
.ab-photos.has-moved .ab-photos__reset { opacity: 1; pointer-events: auto; }
.ab-photos__reset:hover { background: #fff; }

/* =============================================================
   3. EXPERIENCE ACCORDION
   ============================================================= */
/* sticky, not relative: `relative` here was silently overriding .band's
   sticky (same specificity, later in the file), so this section alone
   had no drag. Sticky still establishes the containing block that the
   rotated label is positioned against. */
.ab-exp { background: var(--surface-2); display: grid; place-items: center; position: sticky; top: 0; }
/* the heading is a 90deg-rotated label down the left edge (Figma x74) */
.ab-exp__label {
  position: absolute; left: 74px; top: 50%;
  margin: 0;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: "TASA Orbiter", var(--sans);
  font-weight: 400; font-size: 44px; line-height: 1.2;
  color: var(--about-ink);
  white-space: nowrap;
}
.ab-exp__inner { width: 1124px; max-width: calc(100% - 320px); margin-left: 176px; padding: 100px 0; }
.aexp-item { border-top: 1px solid rgba(43,43,43,.16); }
.aexp-item:last-child { border-bottom: 1px solid rgba(43,43,43,.16); }

/* the row is not clickable — only the + opens a job.
   company sits over role on the left; date + toggle sit right (Figma) */
.aexp-head {
  width: 100%;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 7px 0;
  text-align: left; color: inherit;
}
.aexp-left { display: flex; flex-direction: column; }
.aexp-right { display: flex; align-items: center; gap: 24px; padding-top: 4px; }
.aexp-co {
  font-family: "TASA Orbiter", var(--sans);
  font-weight: 500; font-size: 30px; line-height: 41px; color: var(--about-ink);
}
.aexp-role { font-family: var(--body); font-size: 20px; line-height: 34px; color: var(--about-ink); }
.aexp-date {
  font-family: var(--body); font-size: 20px; line-height: 34px;
  color: var(--about-ink); white-space: nowrap;
}

/* the only control: a plus that rotates 45deg into a cross when open */
.aexp-toggle {
  position: relative; width: 40px; height: 40px; flex-shrink: 0;
  padding: 0; border: 0; background: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color .2s ease;
}
.aexp-toggle:hover { background: rgba(43,43,43,.07); }
.aexp-toggle:focus-visible { outline: 2px solid var(--about-ink); outline-offset: 3px; }
.aexp-toggle::before,
.aexp-toggle::after { content: ""; position: absolute; background: var(--about-ink); }
.aexp-toggle::before { left: 50%; top: 8px; width: 2px; height: 24px; transform: translateX(-50%); }
.aexp-toggle::after  { top: 50%; left: 8px; height: 2px; width: 24px; transform: translateY(-50%); }
.aexp-item.is-open .aexp-toggle { transform: rotate(-45deg); }

.aexp-panel { overflow: hidden; max-height: 0; transition: max-height .42s ease; }
.aexp-item.is-open .aexp-panel { max-height: 700px; }
.aexp-panel-inner {
  padding: 4px 0 30px;
  font-family: var(--body); font-size: 20px; line-height: 34px;
  color: var(--about-ink);
}
.aexp-panel-inner ul { margin: 0; padding-left: 20px; display: grid; gap: 12px; max-width: 1030px; }

/* =============================================================
   4. FUN FACTS — the five cards start as one pile and fan out
   to their grid positions as the band scrolls up into view.
   JS writes --fan (0 = stacked, 1 = laid out) per card.
   ============================================================= */
/* the track is twice the viewport, so the band pins for a full screen of
   scroll — that dwell is what the cards fan out across */
.ab-fun-track { position: relative; height: 200vh; }
.ab-fun { background: var(--paper); display: grid; place-items: center; --fun-scale: 1; height: 100vh; }
.ab-fun__inner {
  position: relative;
  width: 1443px; height: 902px;
  transform: scale(var(--fun-scale));
  transform-origin: center center;
}
.ab-fun__bg { position: absolute; inset: 0; width: 1443px; height: 902px; }

/* the card field sits where Figma places it inside the band */
.ab-cards { position: absolute; left: 206px; top: 160px; width: 1030px; height: 610px; }

.fc {
  position: absolute;
  margin: 0;
  will-change: transform;
  /* --dx/--dy/--rot/--sc are written by JS; at rest they are the final layout */
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0)
             rotate(var(--rot, 0deg))
             scale(var(--sc, 1));
}
.fc img { width: 100%; height: auto; border-radius: 18px; }

/* final (fanned) positions, straight from the Figma frame */
.fc1 { left:   0px; top:   0px; width: 289px; z-index: 5; }
.fc2 { left: 370px; top:   0px; width: 289px; z-index: 4; }
.fc3 { left: 740px; top:   0px; width: 289px; z-index: 3; }
.fc4 { left: 184px; top: 328px; width: 295px; z-index: 2; }
.fc5 { left: 560px; top: 328px; width: 287px; z-index: 1; }

/* ---------- contact + footer ---------- */
.ab-contact {
  position: relative; z-index: 2;
  background: var(--paper);
  text-align: center;
  padding: 120px 24px 80px;
  display: flex; flex-direction: column; align-items: center; gap: 38px;
}
.ab-contact .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: rgba(64,60,60,.5); }
.ab-contact p { margin: 0; font-weight: 300; font-size: clamp(22px, 3.06vw, 44px); line-height: 1.32; }
.ab-contact a { font-weight: 700; font-size: clamp(30px, 5.42vw, 78px); line-height: 1.23; letter-spacing: -.025em; overflow-wrap: anywhere; }

/* full-bleed meadow illustration with the meta row on its upper half */
.ab-footer {
  position: relative; z-index: 2;
  width: 100%; aspect-ratio: 1440 / 506;
  overflow: hidden; isolation: isolate;
}
.ab-footer__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ab-footer__meta {
  position: absolute; z-index: 2;
  left: var(--gutter); right: var(--gutter); top: 11.07%;   /* 56 / 506 */
  display: flex; flex-direction: column; gap: 18px;
}
.ab-footer__rule { height: 1px; background: rgba(64,60,60,.16); }
.ab-footer__row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(64,60,60,.55);
}
.ab-footer__links { display: flex; gap: 32px; color: rgba(64,60,60,.75); }
.ab-footer__links a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .ab-polaroid, .aexp-toggle, .aexp-panel { transition: none !important; }
  html { scroll-behavior: auto; }
}

@media (max-width: 1100px) {
  .band { position: static; min-height: 0; }
  .ab-fun-track { height: auto; }
  .ab-fun { height: auto; padding: 48px 0; }
  .ab-intro { height: auto; padding: 120px 0 64px; }
  .ab-intro__inner { width: 100%; height: auto; transform: none; display: grid; gap: 40px; padding: 0 24px; }
  .ab-copy { position: static; width: auto; }
  .ab-copy p, .ab-copy h1 { width: auto; max-width: none; }
  .ab-photos { position: relative; left: 0; top: 0; width: 100%; height: 420px; }
  .ab-exp__label { position: static; writing-mode: horizontal-tb; transform: none; font-size: 32px; margin: 0 24px 24px; }
  .ab-exp__inner { width: calc(100% - 48px); max-width: none; margin-left: 0; padding: 0 0 72px; }
  .aexp-head { flex-direction: column; gap: 8px; }
  .ab-footer { aspect-ratio: 1440 / 620; }
  .aexp-head { grid-template-columns: 1fr auto; row-gap: 6px; }
  .aexp-date { grid-column: 1 / -1; }
}

/* =============================================================
   CLOSING BLOCK — contact + footer share one surface whose top
   edge is a wave that rises with scroll. Mirrors the landing page.
   ============================================================= */
.closing {
  --closing-surface: #F7F6F4;
  --wave-overlap: 170px;        /* how far the crest travels upward */

  position: relative;
  z-index: 3;
  /* no negative pull: the block sits below the fun-facts band, so those cards
     are never covered. --wave-overlap is purely the crest's travel distance. */
  margin-top: 120px;
  background: var(--closing-surface);
  /* JS swaps in the wavy path; this is the straight-edge fallback */
  clip-path: url(#waveClip);
  /* Vector 42's own drop shadow, same as the landing page */
  filter: drop-shadow(15px 0 10px #E8DDCD) drop-shadow(0 0 26px #E8DDCD);
}

/* the <defs> carrier must not take up space */
.closing__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the block owns the surface now, so contact loses its own */
/* content always clears the crest's lowest position — the wave never slices text */
.closing { --wave-band: calc(var(--wave-overlap) + 30px); }
.closing .ab-contact {
  background: none;
  padding-top: var(--wave-band);
}

/* the footer art fades into the closing surface so the join never shows */
.closing .ab-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 39.5%;                 /* 200 / 506 */
  z-index: 1;
  background: linear-gradient(var(--closing-surface), rgba(247, 246, 244, 0));
  pointer-events: none;
}

/* no clip at all when motion is reduced — a plain straight edge */
@media (prefers-reduced-motion: reduce) {
  .closing { clip-path: none; filter: none; }
  .closing .ab-contact { padding-top: 120px; }
}

@media (max-width: 900px) { .closing { --wave-overlap: 160px; } }

/* avatar in the nav pill — a home button. Figma "Navigation": pill 444x56,
   avatar 40x40 at 9,8 then a 60px gap before the 326px link group. */
.nav__pill { gap: 60px; }
.nav__items { display: flex; align-items: center; gap: 16px; }

.nav__home {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  display: block;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.nav__home img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav__home { box-shadow: 0 0 0 1px transparent; }
.nav__home:hover,
.nav__home:focus-visible { box-shadow: 0 0 0 1px currentColor; }
.nav__home:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 760px) {
  .nav__pill { gap: 14px; }
  .nav__items { gap: 10px; }
}


/* =============================================================
   SECTION WAVES — same engine and geometry as the landing page.
   The bands are already sticky, so the one behind stays painted
   across the whole viewport while the next rises over it; that
   makes the previous band the wave's backdrop and no surface
   tuck is needed here.
   ============================================================= */
.ab-exp,
.ab-fun { --wave-overlap: 170px; }

.ab-exp { clip-path: url(#expWave); }
.ab-fun { clip-path: url(#funWave); }

@media (prefers-reduced-motion: reduce) {
  .ab-exp, .ab-fun { clip-path: none; }
}

@media (max-width: 900px) {
  .ab-exp, .ab-fun { --wave-overlap: 120px; }
}


/* =============================================================
   DARK THEME — Figma "About Page dark" (1063:16140)
   Page #0A0A0F with a #111C36 closing, a night-sky intro and the
   same starry meadow as the landing page. Tokens and the three
   illustrations change; every wave and sticky stage is shared.
   ============================================================= */
:root[data-theme="dark"] {
  --paper:  #0A0A0F;
  --ink:    #FFFFFF;
  --about-ink: #FFFFFF;

  /* the flat Figma navy stepped so the section waves still read */
  --surface-2:  #141420;
  --closing-bg: #111C36;
}

/* the three illustrations swap with the theme */
.ab-intro__bg--dark,
.ab-fun__bg--dark,
.ab-footer__art--dark { display: none; }
:root[data-theme="dark"] .ab-intro__bg,
:root[data-theme="dark"] .ab-fun__bg,
:root[data-theme="dark"] .ab-footer__art { display: none; }
:root[data-theme="dark"] .ab-intro__bg--dark,
:root[data-theme="dark"] .ab-fun__bg--dark,
:root[data-theme="dark"] .ab-footer__art--dark { display: block; }

/* the closing surface follows the token, as on the landing page */
:root[data-theme="dark"] .closing { --closing-surface: var(--closing-bg); }
:root[data-theme="dark"] .closing .ab-footer::before {
  background: linear-gradient(var(--closing-bg), rgba(17, 28, 54, 0));
}

/* type, straight from the dark frame */
:root[data-theme="dark"] .ab-copy h1 { color: #E2D5B0; }
:root[data-theme="dark"] .ab-copy p,
:root[data-theme="dark"] .ab-copy p.g { color: #FFFFFF; }
:root[data-theme="dark"] .ab-exp__label,
:root[data-theme="dark"] .ab-contact p,
:root[data-theme="dark"] .ab-contact a { color: #FFFFFF; }
:root[data-theme="dark"] .aexp-co { color: #FFFFFF; }
:root[data-theme="dark"] .aexp-role,
:root[data-theme="dark"] .aexp-date { color: #E3E3E3; }
:root[data-theme="dark"] .aexp-panel-inner { color: #E3E3E3; }
:root[data-theme="dark"] .aexp-toggle::before,
:root[data-theme="dark"] .aexp-toggle::after { background: #FFFFFF; }
:root[data-theme="dark"] .aexp-item { border-color: rgba(255,255,255,.18); }
:root[data-theme="dark"] .ab-contact .eyebrow { color: rgba(255,255,255,.55); }

/* footer meta reads warm sand on the night meadow */
:root[data-theme="dark"] .ab-footer__row,
:root[data-theme="dark"] .ab-footer__links { color: #E2D5B0; }
:root[data-theme="dark"] .ab-footer__links a { color: #E2D5B0; }
:root[data-theme="dark"] .ab-footer__rule { background: rgba(226,213,176,.25); }

/* nav pill on a dark surface */
:root[data-theme="dark"] .nav__pill {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,249,234,.45);
}
:root[data-theme="dark"] .nav__brand,
:root[data-theme="dark"] .nav__link { color: #FFF9E9; }