/* =========================================================
   NorthCell About page
   Design reference: Figma "Landing Page" → "00/01/02 About" (1920 x 2930)
   Loaded after styles.css, which provides the tokens, header and footer.
   ========================================================= */

/* ---------- 1. Scale ----------
   Same scale unit as the header and the landing page (--u, set in
   styles.css), so both pages look the same size on every screen.
   On screens wider than 16:9, the headline stays anchored to the left edge,
   lined up with the banner text; the coral box and the founder photos
   anchor to the right edge, like the landing page; the hands float midway
   between the headline and the coral box. */
body.page-about { overflow-x: clip; }

/* The hands illustration: exactly as in Figma on a 16:9 screen. On wider
   screens it moves right with 90% of the extra width (the coral box moves
   with all of it), so it floats in the open space between the headline and
   the coral box instead of crowding the headline. */
.frame-float {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((100% - 1920 * var(--u)) * 0.9);
  width: calc(1920 * var(--u));
}

/* A 1920-wide Figma frame pinned to the right edge, for right-side artwork */
.frame-right {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% - 1920 * var(--u));
  width: calc(1920 * var(--u));
}

/* ---------- 2. Intro (Figma y 240–1411; positions are Figma y - 240) ---------- */
.about-intro {
  position: relative;
  height: calc(1171 * var(--u));
  overflow: hidden;
}
.about-intro__title {
  position: absolute;
  z-index: 2;
  left: calc((var(--text-x) - 1) * var(--u));   /* first letter under the "N" of the logo */
  top: calc(102 * var(--u));           /* y 342 */
  width: calc(858 * var(--u));
  font-size: var(--h2);
  line-height: var(--h2-lh);
  color: var(--text-primary);
}

/* Hands and logo illustration (Figma "Group 7"), each piece at its own
   Figma position. Stacking order as in Figma: bottom hand, logo, left hand,
   top hand. */
.about-art { z-index: 4; pointer-events: none; }   /* in front of the coral box, as in Figma */
.about-art__piece { position: absolute; max-width: none; }
.about-art__hand--bottom { left: calc(865.5 * var(--u)); top: calc(634.7 * var(--u)); width: calc(568.1 * var(--u)); height: calc(376.9 * var(--u)); }
.about-art__logo         { left: calc(718.1 * var(--u)); top: calc(255.3 * var(--u)); width: calc(403.3 * var(--u)); height: calc(458.6 * var(--u)); }
.about-art__hand--left   { left: calc(305 * var(--u));   top: calc(333.3 * var(--u)); width: calc(433.4 * var(--u)); height: calc(578.9 * var(--u)); }
.about-art__hand--top    { left: calc(957.7 * var(--u)); top: calc(7 * var(--u));   width: calc(661.1 * var(--u)); height: calc(635.8 * var(--u)); }

/* Coral box: x 1321, y 693, 527 x 179, 40 padding; text Inter 22, 457 wide */
.about-intro__box {
  position: absolute;
  z-index: 3;
  left: calc(100% - 577 * var(--u));   /* right edge lines up with the banner buttons, 50 in (Figma 52) */
  top: calc(513 * var(--u));           /* Figma y 693, moved 60 lower */
  width: calc(527 * var(--u));
  height: calc(179 * var(--u));
  display: flex;
  align-items: center;
  padding: 0 calc(30 * var(--u)) 0 calc(40 * var(--u));
  background: var(--brand-coral);
}
.about-intro__box p {
  width: calc(447 * var(--u));         /* Figma 457; the browser sets Inter a touch narrower, so this keeps Figma's line breaks */
  font-size: var(--body-1);
  line-height: var(--body-1-lh);
  color: var(--bg-cream);
}

/* ---------- 3. Founders (Figma "Frame 20", positions relative to it) ---------- */
.founders {
  position: relative;
  height: calc(928 * var(--u));
  background: var(--bg-sand);
}
.founders__head {
  position: absolute;
  left: calc((var(--text-x) - 1) * var(--u));   /* under the "N" of the logo (Figma 85) */
  top: calc(69 * var(--u));
  width: calc(623 * var(--u));
}
.founders__title {
  font-size: var(--h2);
  line-height: var(--h2-lh);
  color: var(--text-primary);
}
.founders__label {
  position: absolute;
  left: 0;
  top: calc(203 * var(--u));           /* y 272 */
  font-size: var(--h3);
  line-height: var(--h3-lh);
  color: var(--brand-coral);
  white-space: nowrap;
}
.founders__underline {
  position: absolute;
  left: calc(-2 * var(--u));
  top: calc(268.7 * var(--u));          /* y 337.7 (the 6.6px stroke centred on y 341) */
  width: calc(320 * var(--u));
  height: calc(6.6 * var(--u));
  max-width: none;
}

/* Name, role and bio: x 98, y 442, 597 wide */
.founders__people {
  position: absolute;
  left: calc(var(--text-x) * var(--u));
  top: calc(442 * var(--u));
  width: calc(597 * var(--u));
}
.founder { display: flex; flex-direction: column; gap: calc(24 * var(--u)); }
.founder[hidden] { display: none; }
.founder__name {
  margin-left: calc(-2 * var(--u));    /* bold capitals sit a little further in; keeps the edge straight */
  font-size: var(--h3);
  line-height: var(--h3-lh);
  font-weight: 600;
  color: var(--text-primary);
}
.founder__role {
  margin-top: calc(-24 * var(--u));     /* name and role sit together, as in Figma */
  width: calc(503 * var(--u));
  font-size: var(--h5);
  line-height: var(--h5-lh);
  color: var(--text-primary);
}
.founder__bio {
  font-size: var(--body-1);
  line-height: var(--body-1-lh);
  color: var(--text-primary);
}

/* Photo stack. Every card is the size of the main card (551.4 x 790) and is
   moved into place with a transform, so the swap animates smoothly:
   main x 844, y 69 · first peek x 1217, y 172 (423 wide) · second peek
   x 1536.5, y 240 (312.6 wide). */
.founders__stack { pointer-events: none; }
.founder-card {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(551.4 * var(--u));
  height: calc(790 * var(--u));
  padding: 0;
  border: 0;
  background: #B1BFB1;
  transform-origin: 0 0;
  cursor: pointer;
  pointer-events: auto;
}
.founder-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.founder-card[data-pos="main"] {
  z-index: 3;
  cursor: default;
  transform: translate(calc(844 * var(--u)), calc(69 * var(--u)));
}
.founder-card[data-pos="peek1"] {
  z-index: 2;
  transform: translate(calc(1217 * var(--u)), calc(172 * var(--u))) scale(0.7671);
}
.founder-card[data-pos="peek2"] {
  z-index: 1;
  transform: translate(calc(1536.5 * var(--u)), calc(240.2 * var(--u))) scale(0.5669);
}
/* Figma drop shadow: x 20, y 5, blur 50, spread -20, brand green 80% */
.founder-card[data-pos="main"],
.founder-card[data-pos="peek1"] {
  box-shadow: calc(20 * var(--u)) calc(5 * var(--u)) calc(50 * var(--u)) calc(-20 * var(--u)) rgba(30, 58, 47, 0.8);
}
.founder-card:focus-visible { outline: 2px solid var(--brand-coral); outline-offset: 4px; }

/* Next button: same size as the landing page's (131 x 131 box, 92.7 square
   turned 45deg, 10px border), centred on the main card's left edge (x 778, y 398) */
.founders__next {
  position: absolute;
  left: calc(778 * var(--u));
  top: calc(398 * var(--u));
  z-index: 5;
  width: calc(131.147 * var(--u));
  height: calc(131.147 * var(--u));
  padding: 0;
  border: 0;
  background: none;
  color: var(--bg-sand);               /* arrow and outline match the section background */
  cursor: pointer;
  pointer-events: auto;
  clip-path: polygon(50% -2%, 102% 50%, 50% 102%, -2% 50%);
}
.founders__next::before {
  content: "";
  position: absolute;
  left: calc(19.206 * var(--u));
  top: calc(19.206 * var(--u));
  width: calc(92.735 * var(--u));
  height: calc(92.735 * var(--u));
  box-sizing: border-box;
  background: var(--brand-coral);
  border: calc(10 * var(--u)) solid var(--bg-sand);
  background-clip: padding-box;
  transform: rotate(45deg);
}
.founders__next svg {
  position: absolute;
  left: calc(40.6 * var(--u));
  top: calc(43 * var(--u));
  width: calc(50 * var(--u));
  height: calc(42 * var(--u));
  overflow: visible;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.founders__next:hover svg { transform: translateX(calc(6 * var(--u))); }
.founders__next:focus,
.founders__next:focus-visible { outline: none; }
.founders__next.is-hidden {
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  pointer-events: none;
}

/* ---------- 4. Footer area (Figma: footer at y 928 of Frame 20, 60 below) ---------- */
.about-footer {
  background: var(--bg-sand);
  padding-bottom: calc(60 * var(--u));
}

/* ---------- 5. Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* Text and boxes rise in as they scroll into view (js/about.js adds .is-visible) */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(var(--rise));
    transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
  }
  .js [data-reveal].is-visible { opacity: 1; transform: none; }
  .js .about-intro__box[data-reveal] { transition-delay: 1.2s; }

  /* Hands ease in towards the logo from their own side */
  .js .about-art__piece {
    opacity: 0;
    transition: opacity 1.2s ease, transform 1.8s var(--ease-out);
  }
  .js .about-art__hand--left   { transform: translate(calc(-90 * var(--u)), calc(40 * var(--u))); }
  .js .about-art__hand--top    { transform: translate(calc(90 * var(--u)), calc(-50 * var(--u))); }
  .js .about-art__hand--bottom { transform: translate(calc(40 * var(--u)), calc(90 * var(--u))); }
  .js .about-art__logo         { transform: scale(0.96); }
  .js .about-art.is-visible .about-art__piece { opacity: 1; transform: none; }
  .js .about-art.is-visible .about-art__logo        { transition-delay: 0.1s; }
  .js .about-art.is-visible .about-art__hand--left  { transition-delay: 0.35s; }
  .js .about-art.is-visible .about-art__hand--top   { transition-delay: 0.5s; }
  .js .about-art.is-visible .about-art__hand--bottom{ transition-delay: 0.65s; }

  /* Founder cards: the chosen card slides forward, the others step back */
  .founder-card {
    transition: transform 1s var(--ease-in-out), box-shadow 0.8s ease;
  }
  /* Name, role and bio swap with a quick fade */
  .founder { transition: opacity 0.45s ease, transform 0.6s var(--ease-out); }
  .founder.is-leaving { opacity: 0; transform: translateY(calc(-12 * var(--u))); transition-duration: 0.25s; }
  .founder.is-entering { opacity: 0; transform: translateY(calc(16 * var(--u))); transition: none; }

  /* Next button: grows out from its centre once the cards have settled */
  .founders__next { transition: clip-path 0.7s var(--ease-out); }
  .founders__next.is-hidden { transition: clip-path 0.2s ease-in; }
}