/* ─────────────────────────────────────────────
   about.css — About page: intro, photo pile, "hey!" sign-off
   ───────────────────────────────────────────── */

.about-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 24px 0;
}

/* ── Intro ── */
.about-intro {
  text-align: center;
  margin-bottom: var(--space-15);
}

/* Same register as .hero-p-sentence on index, one step below it in size */
.about-intro h1 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 400;
  color: #111;
  letter-spacing: -0.02em;
  line-height: 1.45;
  max-width: 640px;
  margin: 0 auto;
}

/* Sign-off line between the headline and the photos */
.about-sub {
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.5vw, 20px);
  color: #111;
  max-width: 640px;
  margin: 20px auto 0;
}

.about-sub em {
  font-style: italic;
}

/* ── Intro choreography ──
   html.about-choreo is set by js/headline-animation.js; without JS the
   page renders static and fully visible. The page opens white with the
   headline centered, then everything settles into place. */
.about-choreo body {
  overflow-x: hidden;
}

.about-choreo.intro-lock body {
  overflow: hidden;
}

/* Rising words: overflow mask + inner span. Padding + negative margin
   give italic overhang and descenders room inside the mask. */
.mw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.12em 0.18em 0.24em;
  margin: -0.12em -0.18em -0.24em;
}

.mw-i {
  display: inline-block;
  transform: translateY(145%);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.about-intro h1.play .mw-i,
.about-sub.play .mw-i {
  transform: translateY(0);
}

/* Particle words: the text reserves layout space, particles draw it */
.pw {
  position: relative;
  display: inline-block;
  color: transparent;
}

.pw-canvas {
  position: absolute;
  pointer-events: none;
}

/* Pin the desktop line break after "amount" so the 2-line split
   stays stable regardless of window width; mobile wraps naturally */
.hl-br {
  display: none;
}

@media (min-width: 769px) {
  .hl-br {
    display: inline;
  }
}

/* Extra air around the particle words */
em[data-particle="explode"] {
  margin: 0 0.3em 0 0.15em;
}

em[data-particle="pen"] {
  margin: 0 0.15em 0 0.2em;
}

/* The sub's words are held inside their masks until the photo fan-out
   finishes, then drop in from above (the headline's words rise; the
   sub's fall). Timing lives in js/headline-animation.js. */
.about-sub .mw-i {
  transform: translateY(-145%);
}

.about-choreo .about-photos {
  transform: translateY(100vh);
}

/* ── "hey!" sign-off ── */
.about-hey {
  margin-bottom: var(--space-17);
}

.intro-canvas-wrap {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: clamp(140px, 20vw, 230px);
  margin: 0 auto;
}

#introCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Nav: index delays 1800ms for the hero particles; here there's no wait */
.landing-nav {
  animation-delay: 400ms;
}

/* ── Photo pile → row ── */
.about-photos {
  margin-bottom: var(--space-18);
}

/* Squiggle choreography: fanned pile → arc (one-shot), with idle float.
   Coordinates are the squiggle-motion export (668×538 scene, 104×116
   cards) with positions ×1.9 and card size ×1.75, card centers
   preserved, shifted into a tight box; arc x positions slotted
   left-to-right with a uniform 38px neighbor overlap. */
.sq-viewport {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.sq-scene {
  position: relative;
  width: 950px;
  height: 476px;
  flex: 0 0 auto;
  transform-origin: top center;
}

.sq-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 182px;
  height: 203px;
  transform-origin: center;
  will-change: transform;
  animation-duration: 3.04s;
  animation-timing-function: cubic-bezier(0.6, 0.37, 0.44, 0.98);
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-play-state: paused;
}

.sq-scene.is-live .sq-card {
  animation-play-state: running;
}

.sq-card:nth-child(1) {
  animation-name: sq-move-0;
  animation-delay: 0s;
}

.sq-card:nth-child(2) {
  animation-name: sq-move-1;
  animation-delay: 0.06s;
}

.sq-card:nth-child(3) {
  animation-name: sq-move-2;
  animation-delay: 0.12s;
}

.sq-card:nth-child(4) {
  animation-name: sq-move-3;
  animation-delay: 0.18s;
}

.sq-card:nth-child(5) {
  animation-name: sq-move-4;
  animation-delay: 0.24s;
}

.sq-card:nth-child(6) {
  animation-name: sq-move-5;
  animation-delay: 0.3s;
}

/* Grid-installation shot: bottom-align the cover crop so the full
   figure shows instead of the centered band cutting it at the hips */
.sq-card:nth-child(4) img {
  object-position: 50% 100%;
}

.sq-idle {
  width: 100%;
  height: 100%;
  animation: sq-float 3.2s ease-in-out infinite;
}

.sq-card:nth-child(1) .sq-idle {
  animation-delay: 0s;
}

.sq-card:nth-child(2) .sq-idle {
  animation-delay: 0.3s;
}

.sq-card:nth-child(3) .sq-idle {
  animation-delay: 0.6s;
}

.sq-card:nth-child(4) .sq-idle {
  animation-delay: 0.9s;
}

.sq-card:nth-child(5) .sq-idle {
  animation-delay: 1.2s;
}

.sq-card:nth-child(6) .sq-idle {
  animation-delay: 1.5s;
}

.sq-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 26px rgba(12, 12, 12, 0.18);
  background: #F2F2F2;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sq-card:hover img {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 18px 36px rgba(12, 12, 12, 0.24);
}

@keyframes sq-move-0 {
  0% {
    transform: translate(346.0px, 44.0px) rotate(-15deg);
  }

  21% {
    transform: translate(346.0px, 44.0px) rotate(-15deg);
  }

  50% {
    transform: translate(24.0px, 101.0px) rotate(0deg);
  }

  100% {
    transform: translate(24.0px, 101.0px) rotate(0deg);
  }
}

@keyframes sq-move-1 {
  0% {
    transform: translate(361.2px, 63.0px) rotate(-10deg);
  }

  21% {
    transform: translate(361.2px, 63.0px) rotate(-10deg);
  }

  50% {
    transform: translate(168.0px, 165.0px) rotate(0deg);
  }

  100% {
    transform: translate(168.0px, 165.0px) rotate(0deg);
  }
}

@keyframes sq-move-2 {
  0% {
    transform: translate(376.4px, 82.0px) rotate(-5deg);
  }

  21% {
    transform: translate(376.4px, 82.0px) rotate(-5deg);
  }

  50% {
    transform: translate(312.0px, 205.0px) rotate(0deg);
  }

  100% {
    transform: translate(312.0px, 205.0px) rotate(0deg);
  }
}

@keyframes sq-move-3 {
  0% {
    transform: translate(391.6px, 101.0px) rotate(0deg);
  }

  21% {
    transform: translate(391.6px, 101.0px) rotate(0deg);
  }

  50% {
    transform: translate(456.0px, 205.0px) rotate(0deg);
  }

  100% {
    transform: translate(456.0px, 205.0px) rotate(0deg);
  }
}

@keyframes sq-move-5 {
  0% {
    transform: translate(422.0px, 139.0px) rotate(10deg);
  }

  21% {
    transform: translate(422.0px, 139.0px) rotate(10deg);
  }

  50% {
    transform: translate(744.0px, 101.0px) rotate(0deg);
  }

  100% {
    transform: translate(744.0px, 101.0px) rotate(0deg);
  }
}

@keyframes sq-move-4 {
  0% {
    transform: translate(406.8px, 120.0px) rotate(5deg);
  }

  21% {
    transform: translate(406.8px, 120.0px) rotate(5deg);
  }

  50% {
    transform: translate(600.0px, 165.0px) rotate(0deg);
  }

  100% {
    transform: translate(600.0px, 165.0px) rotate(0deg);
  }
}


@keyframes sq-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .about-main {
    padding-top: 100px;
  }

  .about-intro h1 {
    font-size: 24px;
    padding: 0 8px;
  }
}