/* About page: builds on ../home/home.css (nav, footer, buttons, cursor). */

/* ---------- Portrait + bio ---------- */
.intro-about {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 81px;
  padding-top: var(--hang); /* Figma: content starts at y 195 under the 72px nav */
}

/* ---------- Hanging portrait ----------
   The photo hangs from a hand-drawn string that starts at the very top of the page (behind
   the nav). The whole thing swings from that top point (--hang above the photo): it swings in
   on load, sways as you scroll, and gets nudged on hover (about.js). */
.intro-about {
  --hang: 195px; /* distance from the top of the page to the photo */
}

.hang {
  --swing: 0deg;
  position: relative;
  flex: none;
  width: min(425px, 100%);
  transform-origin: 50% calc(var(--hang) * -1);
  rotate: var(--swing);
}

.hang__string {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 6px);
  width: 20px;
  height: calc(var(--hang) + 6px);
  translate: -50% 0;
  overflow: visible;
}

.hang__string path {
  fill: none;
  stroke: var(--color-text-primary);
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* A little binder clip holding the photo */
.hang__clip {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: -12px;
  width: 34px;
  height: 22px;
  translate: -50% 0;
  overflow: visible;
}

.hang__clip path,
.hang__clip rect {
  fill: var(--color-bg-primary);
  stroke: var(--color-text-primary);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.hang__clip path {
  fill: none;
}

.intro-about__portrait {
  position: relative;
  flex: none;
  width: min(425px, 100%);
  aspect-ratio: 425 / 447;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: linear-gradient(#928f8f -13.42%, var(--color-neutral-950) 121.92%);
}

/* Placed as in Figma: 457 × 685 at (-16, -36) inside the 425 × 447 frame. */
.intro-about__portrait img {
  position: absolute;
  left: -3.76%;
  top: -8.05%;
  width: 107.53%;
  max-width: none;
  height: auto;
}

.intro-about__text {
  display: flex;
  flex-direction: column;
  gap: var(--type-body-lg-line-height); /* one blank line between paragraphs */
  width: 520px;
  max-width: 100%;
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
}

.intro-about__text p {
  margin: 0;
}

/* ---------- Scroll hint ----------
   Small caption and a hairline with a dot sliding down it, pinned to the bottom of the
   screen. Fades in shortly after load and out as soon as you scroll. */
.scroll-hint {
  position: fixed;
  z-index: 5;
  left: 50%;
  bottom: var(--space-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  translate: -50% 0;
  color: var(--color-text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  letter-spacing: 0.04em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.scroll-hint.is-shown {
  opacity: 1; /* text-secondary, as is */
}

.scroll-hint__track {
  position: relative;
  width: 1px;
  height: 28px;
  overflow: hidden;
  background: var(--color-border-default);
}

.scroll-hint__track::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 10px;
  background: var(--color-text-secondary);
  animation: scroll-hint 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scroll-hint {
  0% { translate: 0 -10px; }
  100% { translate: 0 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint__track::after {
    animation: none;
    translate: 0 9px;
  }
}

/* ---------- Horizontal moodboard ----------
   The section is as tall as the sideways journey; its stage sticks under the nav while
   about.js slides the track left as you scroll down. */
.mood {
  --stage-h: calc(100svh - var(--layout-nav-height));
  position: relative;
  height: 400vh; /* replaced by the real journey length in about.js */
  margin-top: var(--space-8xl);
}

.mood__stage {
  --fade: 0; /* 0 = grey intro, 1 = page background once the photos arrive (set in about.js) */
  position: sticky;
  top: var(--layout-nav-height);
  height: var(--stage-h);
  overflow: hidden;
  background: color-mix(in srgb, var(--color-bg-primary) calc(var(--fade) * 100%), var(--color-bg-secondary));
}

/* Layout units come from the Figma example: a 1370-tall board, scaled to the stage height. */
.mood__track {
  --u: calc(var(--stage-h) / 1370);
  position: relative;
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform;
}

.mood__intro {
  flex: none;
  display: grid;
  place-items: center;
  width: 100vw;
}

.mood__intro h2 {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
  letter-spacing: -0.01em;
}

/* One phase = one stretch of the board. No dividers: phases simply follow each other. */
.mood__phase {
  /* The story keeps a readable width even when the board is scaled down; anything placed
     after it shifts right by however much wider it got, so nothing ever sits under the text. */
  --text-w: max(calc(486 * var(--u)), min(520px, 78vw));
  --text-extra: calc(var(--text-w) - 486 * var(--u));
  position: relative;
  flex: none;
  width: calc(var(--w) * var(--u) + var(--text-extra));
  height: 100%;
}

.mood__text ~ .mood__photo {
  left: calc(var(--x) * var(--u) + var(--text-extra));
}

.mood__item {
  position: absolute;
  z-index: 1;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
}

/* ---------- The line + the rider ----------
   A hand-drawn-feeling line runs the whole journey: solid where you've been, dashed ahead.
   The skating girl rides it, always about a third of the way across the screen. */
.mood__line {
  position: absolute;
  z-index: 0;
  inset: 0 auto auto 0;
  overflow: visible;
  pointer-events: none;
}

.mood__line path {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.mood__line-ahead {
  stroke: var(--color-text-secondary);
  stroke-dasharray: 4 7;
  opacity: 0.5;
}

.mood__line-done {
  stroke: var(--color-text-primary);
}

/* The rider is a zero-size anchor sitting on the line; each pose hangs from it by her feet.
   Poses are scaled to the same drawn height (--rh) and swap with a quick, springy morph. */
.mood__rider {
  --rh: max(75px, calc(196 * var(--u)));
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
}

.mood__pose {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--rh) * var(--wf));
  max-width: none;
  height: auto;
  translate: calc(var(--ax) * -1) calc(var(--ay) * -1); /* feet on the anchor */
  transform-origin: var(--ax) var(--ay);
  opacity: 0;
  scale: 0.35;
  rotate: -16deg;
  transition:
    opacity 0.3s ease,
    scale 0.6s var(--ease-drop),
    rotate 0.6s var(--ease-drop);
}

.mood__pose.is-active {
  opacity: 1;
  scale: 1;
  rotate: 0deg;
  transition-delay: 0.12s; /* the old pose shrinks away first, then the new one springs up */
}

/* ---------- Giant phase words ----------
   Soft, oversized words (like the month names on unseen.co) that drift slower than the board. */
.mood__word {
  position: absolute;
  z-index: 0;
  left: calc(var(--wx, 80) * var(--u)); /* --wx nudges a word clear of the one before it */
  top: calc(520 * var(--u));
  margin: 0;
  color: var(--color-bg-secondary);
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: calc(440 * var(--u));
  line-height: 0.8;
  letter-spacing: -0.05em;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}

/* ---------- Photos: wipe up into view while settling from a slight zoom ---------- */
.mood__photo {
  height: calc(var(--h) * var(--u));
  margin: 0;
  overflow: hidden;
  border-radius: max(12px, calc(20 * var(--u)));
  clip-path: inset(100% 0 0 0 round max(12px, calc(20 * var(--u))));
  transition: clip-path 1.2s var(--ease-morph);
}

.mood__photo img {
  display: block;
  width: auto;
  height: 100%;
  scale: 1.22;
  transition: scale 1.6s var(--ease-morph);
}

.mood__photo.is-in {
  clip-path: inset(0 0 0 0 round max(12px, calc(20 * var(--u))));
}

.mood__photo.is-in img {
  scale: 1;
}

/* ---------- Stories ---------- */
.mood__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: var(--text-w);
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 0.9s var(--ease-morph) 0.2s,
    translate 1.1s var(--ease-morph) 0.2s;
}

.mood__text.is-in {
  opacity: 1;
  translate: 0 0;
}

.mood__tag {
  color: var(--color-text-secondary);
  letter-spacing: 0.04em;
}

.mood__text h3 {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h4-size);
  line-height: var(--type-h4-line-height);
}

.mood__text p {
  margin: 0;
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line-height);
}

/* ---------- Closing note ---------- */
.mood__outro {
  flex: none;
  display: grid;
  place-items: center;
  width: 100vw;
  padding-inline: var(--page-margin);
}

.mood__reveal {
  position: relative;
  z-index: 4; /* above the line and the rider */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  max-width: 560px;
  margin-bottom: 18%; /* sits above the line's band */
  text-align: center;
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 0.9s var(--ease-morph),
    translate 1.1s var(--ease-morph);
}

.mood__reveal.is-in {
  opacity: 1;
  translate: 0 0;
}

.mood__reveal h2 {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 600;
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
  letter-spacing: -0.01em;
}

.mood__reveal p {
  margin: 0 0 var(--space-sm);
  color: var(--color-text-secondary);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line-height);
}

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
  .intro-about {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5xl);
    --hang: calc(var(--layout-nav-height) + var(--space-6xl));
    padding-top: var(--hang);
  }
}

@media (max-width: 767px) {
  .intro-about {
    --hang: calc(var(--layout-nav-height) + var(--space-4xl));
    padding-top: var(--hang);
  }

  .mood {
    margin-top: var(--layout-block-gap);
  }


}

@media (prefers-reduced-motion: reduce) {
  .mood__photo,
  .mood__photo img,
  .mood__text,
  .mood__reveal {
    transition: none;
  }

  .mood__pose {
    scale: 1;
    rotate: 0deg;
    transition: opacity 0.3s ease;
  }
}