/* ==========================================================================
   Freedom Machine: About page motion layer
   --------------------------------------------------------------------------
   Same system as the home page (assets/css/anim.css): everything is scoped
   to html.fm-anim, which an inline head script adds only when the browser
   supports IntersectionObserver and the visitor has not asked for reduced
   motion. Without it the page is exactly the static design.

   about-anim.js adds .fm-in to each group as it scrolls into view (once
   only). Every element ends in its natural state: transform none, opacity 1,
   clip-path inset(0), so the finished page is pixel-identical to the static
   one. The About page is a touch slower and more editorial than the home.

   Photos are scaled without wrappers: the scale is paired with a clip-path
   inset of (1 - 1/s) / 2 so the image never spills outside its own frame.
   ========================================================================== */

/* 1. Tokens
   ========================================================================== */
.fm-anim {
  --fm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fm-ease-soft: cubic-bezier(0.33, 0, 0.2, 1);
  --fm-rise: 26px;
  --fm-k: 1.5;          /* delay multiplier (matches the home page pacing) */
  --fm-text: 1.08s;     /* same as the home page */
  --fm-lead: 1.4s;      /* expressive copy is slightly slower */
  --fm-photo: 1.5s;     /* same as the home page */
}

/* 2. Text reveals (opacity + rise)
   ========================================================================== */
.fm-anim .a-hero > .wrap > .eyebrow,
.fm-anim .a-hero__title span,
.fm-anim .a-intro__lead,
.fm-anim .a-intro .copy:not(.a-intro__lead) > p:not(.a-intro__close),
.fm-anim .a-intro__close,
.fm-anim .a-sig figcaption,
.fm-anim .a-garage .eyebrow,
.fm-anim .a-garage .a-title,
.fm-anim .a-garage__copy p,
.fm-anim .a-quote .eyebrow,
.fm-anim .a-quote__text,
.fm-anim .a-find__head .eyebrow,
.fm-anim .a-find__head .a-title,
.fm-anim .a-find__head .copy,
.fm-anim .a-pullquote,
.fm-anim .a-doing .fm-line,
.fm-anim .a-doing .copy,
.fm-anim .a-founders .eyebrow,
.fm-anim .a-founders .a-title,
.fm-anim .a-person figcaption,
.fm-anim .a-founders .copy,
.fm-anim .a-closing__eyebrow,
.fm-anim .a-closing h2,
.fm-anim .a-closing__copy,
.fm-anim .foot .foot__eyebrow,
.fm-anim .foot .foot__title,
.fm-anim .foot .foot__words li {
  opacity: 0;
  transform: translateY(var(--fm-rise));
  transition:
    opacity var(--fm-dur-x, var(--fm-text)) var(--fm-ease) calc(var(--fm-d, 0s) * var(--fm-k)),
    transform var(--fm-dur-x, var(--fm-text)) var(--fm-ease) calc(var(--fm-d, 0s) * var(--fm-k));
}

/* the two lines of "Less scrolling. More doing." need a box to move */
.fm-anim .a-doing .fm-line { display: inline-block; }

.fm-anim .a-hero.fm-in > .wrap > .eyebrow,
.fm-anim .a-hero.fm-in .a-hero__title span,
.fm-anim .a-intro.fm-in .a-intro__lead,
.fm-anim .a-intro.fm-in .copy:not(.a-intro__lead) > p:not(.a-intro__close),
.fm-anim .a-intro.fm-in .a-intro__close,
.fm-anim .fm-in .a-sig figcaption,
.fm-anim .a-garage.fm-in .eyebrow,
.fm-anim .a-garage.fm-in .a-title,
.fm-anim .a-garage.fm-in .a-garage__copy p,
.fm-anim .a-quote.fm-in .eyebrow,
.fm-anim .a-quote.fm-in .a-quote__text,
.fm-anim .a-find__head.fm-in .eyebrow,
.fm-anim .a-find__head.fm-in .a-title,
.fm-anim .a-find__head.fm-in .copy,
.fm-anim .a-pullquote.fm-in,
.fm-anim .a-doing.fm-in .fm-line,
.fm-anim .a-doing.fm-in .copy,
.fm-anim .a-founders.fm-in .eyebrow,
.fm-anim .a-founders.fm-in .a-title,
.fm-anim .a-founders.fm-in .a-person figcaption,
.fm-anim .a-founders.fm-in .copy,
.fm-anim .a-closing.fm-in .a-closing__eyebrow,
.fm-anim .a-closing.fm-in h2,
.fm-anim .a-closing.fm-in .a-closing__copy,
.fm-anim .foot.fm-in .foot__eyebrow,
.fm-anim .foot.fm-in .foot__title,
.fm-anim .foot.fm-in .foot__words li {
  opacity: 1;
  transform: none;
}

/* 3. Photo reveals (opacity + settle from a slight scale, clipped)
   ========================================================================== */
.fm-anim .a-hero__photo,
.fm-anim .a-garage__photo,
.fm-anim .a-find__photo,
.fm-anim .a-duo img,
.fm-anim .a-person__img {
  opacity: 0;
  transform: scale(var(--fm-s, 1.04));
  clip-path: inset(var(--fm-c, 1.923%));
  transition:
    opacity var(--fm-dur-x, var(--fm-photo)) var(--fm-ease-soft) calc(var(--fm-d, 0s) * var(--fm-k)),
    transform var(--fm-dur-x, var(--fm-photo)) var(--fm-ease-soft) calc(var(--fm-d, 0s) * var(--fm-k)),
    clip-path var(--fm-dur-x, var(--fm-photo)) var(--fm-ease-soft) calc(var(--fm-d, 0s) * var(--fm-k));
}

.fm-anim .a-hero.fm-in .a-hero__photo,
.fm-anim .a-garage.fm-in .a-garage__photo,
.fm-anim .a-find__photo.fm-in,
.fm-anim .a-duo.fm-in img,
.fm-anim .a-founders.fm-in .a-person__img {
  opacity: 1;
  transform: none;
  clip-path: inset(0);
}

/* hero photo: 1.035, garage 1.04 (default), people photo 1.05 */
.fm-anim .a-hero__photo  { --fm-s: 1.035; --fm-c: 1.691%; --fm-dur-x: 1.9s; }
.fm-anim .a-find__photo  { --fm-s: 1.05;  --fm-c: 2.381%; --fm-dur-x: 1.6s; }
.fm-anim .a-garage__photo { --fm-dur-x: 1.5s; }

/* the motorcycle and cycling photos and the portraits settle with a small
   rise rather than a scale */
.fm-anim .a-duo img,
.fm-anim .a-person__img {
  --fm-dur-x: 1.35s;
  transform: translateY(var(--fm-rise));
  clip-path: inset(0);
}

/* 4. Signatures: a left-to-right masked reveal, as if being written
   ========================================================================== */
.fm-anim .a-sig__img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.8s cubic-bezier(0.45, 0.05, 0.35, 1) calc(var(--fm-d, 0s) * var(--fm-k));
}

.fm-anim .fm-in .a-sig__img { clip-path: inset(0 0 0 0); }

/* 5. Sequencing (seconds after the group enters; scaled by --fm-k)
   ========================================================================== */

/* opening: eyebrow, then the two beats of the headline, then the photo */
.fm-anim .a-hero > .wrap > .eyebrow        { --fm-d: 0s; }
.fm-anim .a-hero__title span:first-child  { --fm-d: 0.14s; --fm-dur-x: 1.35s; }
.fm-anim .a-hero__title span:last-child   { --fm-d: 0.5s;  --fm-dur-x: 1.35s; }
.fm-anim .a-hero__photo                   { --fm-d: 0.7s; }

/* early morning, founder copy, closing line, signatures, names */
.fm-anim .a-intro__lead { --fm-dur-x: var(--fm-lead); }
.fm-anim .a-intro .copy:not(.a-intro__lead) > p:not(.a-intro__close) { --fm-d: 0.2s; }
.fm-anim .a-intro__close { --fm-d: 0.45s; }
.fm-anim .a-intro .a-sig:first-child .a-sig__img { --fm-d: 0.75s; }
.fm-anim .a-intro .a-sig:last-child  .a-sig__img { --fm-d: 1.05s; }
.fm-anim .a-intro .a-sig figcaption  { --fm-d: 1.9s; --fm-dur-x: 1.1s; }

/* garage: eyebrow, headline, photo, then the copy in two blocks */
.fm-anim .a-garage .a-title          { --fm-d: 0.14s; }
.fm-anim .a-garage__photo            { --fm-d: 0.3s; }
.fm-anim .a-garage__copy p           { --fm-d: 0.6s; }
.fm-anim .a-garage__copy p:first-child { --fm-d: 0.45s; --fm-dur-x: var(--fm-lead); }

/* black statement: first sentence, a pause, then the conclusion */
.fm-anim .a-quote__text { --fm-d: 0.15s; --fm-dur-x: 1.35s; }
.fm-anim .a-quote__text span {
  opacity: 0;
  transition: opacity 1.5s var(--fm-ease) calc(1.05s * var(--fm-k));
}
.fm-anim .a-quote.fm-in .a-quote__text span { opacity: 1; }

/* why we built it */
.fm-anim .a-find__head .a-title { --fm-d: 0.14s; }
.fm-anim .a-find__head .copy    { --fm-d: 0.32s; }
.fm-anim .a-pullquote           { --fm-dur-x: var(--fm-lead); }

/* motorcycle first, cycling after */
.fm-anim .a-duo__large { --fm-d: 0.15s; }

/* less scrolling, then (more decisively) more doing, then the copy */
.fm-anim .a-doing .fm-line:first-child { --fm-d: 0s; }
.fm-anim .a-doing .fm-line:last-child  { --fm-d: 0.22s; --fm-dur-x: 1s; }
.fm-anim .a-doing .copy                { --fm-d: 0.5s; }

/* founders: eyebrow, headline, portraits one by one, names, story */
.fm-anim .a-founders .a-title                          { --fm-d: 0.14s; }
.fm-anim .a-founders .a-person:first-child .a-person__img { --fm-d: 0.3s; }
.fm-anim .a-founders .a-person:last-child  .a-person__img { --fm-d: 0.45s; }
.fm-anim .a-founders .a-person:first-child figcaption  { --fm-d: 0.65s; }
.fm-anim .a-founders .a-person:last-child  figcaption  { --fm-d: 0.8s; }
.fm-anim .a-founders .copy                             { --fm-d: 0.35s; }

/* "Fancy going somewhere?" lands a beat after its sentence */
.fm-anim .a-founders .copy em {
  opacity: 0.25;
  transition: opacity 1.3s var(--fm-ease) calc(1.25s * var(--fm-k));
}
.fm-anim .a-founders.fm-in .copy em { opacity: 1; }

/* the road ahead: the slowest reveal on the page */
.fm-anim .a-closing__bg {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 2.2s var(--fm-ease-soft), transform 3.4s var(--fm-ease-soft);
}
.fm-anim .a-closing.fm-in .a-closing__bg { opacity: 1; transform: none; }
.fm-anim .a-closing__eyebrow  { --fm-d: 0.35s; }
.fm-anim .a-closing h2        { --fm-d: 0.5s; --fm-dur-x: 1.5s; }
.fm-anim .a-closing__copy     { --fm-d: 0.8s; }
.fm-anim .a-sigs--light .a-sig:first-child .a-sig__img { --fm-d: 1.1s; }
.fm-anim .a-sigs--light .a-sig:last-child  .a-sig__img { --fm-d: 1.4s; }
.fm-anim .a-sigs--light .a-sig figcaption { --fm-d: 2.2s; --fm-dur-x: 1.1s; }

/* footer: headline block and category words only; the rest stays still */
.fm-anim .foot .foot__title { --fm-d: 0.12s; }
.fm-anim .foot .foot__words li:nth-child(1) { --fm-d: 0.35s; }
.fm-anim .foot .foot__words li:nth-child(2) { --fm-d: 0.43s; }
.fm-anim .foot .foot__words li:nth-child(3) { --fm-d: 0.51s; }
.fm-anim .foot .foot__words li:nth-child(4) { --fm-d: 0.59s; }
.fm-anim .foot .foot__words li:nth-child(5) { --fm-d: 0.67s; }
.fm-anim .foot .foot__words li:nth-child(6) { --fm-d: 0.75s; }

/* 6. Hover (desktop). Photos lift very slightly, clipped to their frame.
   ========================================================================== */
@media (hover: hover) and (min-width: 851px) {
  .a-duo img,
  .a-person__img {
    clip-path: inset(0);
    transition: transform 0.35s var(--fm-ease, ease), clip-path 0.35s var(--fm-ease, ease);
  }

  .a-duo img:hover     { transform: scale(1.025); clip-path: inset(1.22%); }
  .a-person__img:hover { transform: scale(1.02);  clip-path: inset(0.98%); }

  /* once a group has finished its reveal, hand the photos back to hover */
  .fm-anim .fm-settled .a-duo img,
  .fm-anim .fm-settled .a-person__img,
  .fm-anim .a-duo.fm-settled img {
    transition: transform 0.35s var(--fm-ease), clip-path 0.35s var(--fm-ease);
  }

  .fm-anim .a-duo.fm-settled img:hover { transform: scale(1.025); clip-path: inset(1.22%); }
  .fm-anim .a-founders.fm-settled .a-person__img:hover { transform: scale(1.02); clip-path: inset(0.98%); }
}

/* finished reveals drop their clip so photo edges render exactly as the
   static page (the hover photos above keep a zero clip to animate from) */
.fm-anim .fm-settled .a-hero__photo,
.fm-anim .fm-settled .a-garage__photo,
.fm-anim .a-find__photo.fm-settled,
.fm-anim .fm-settled .a-sig__img {
  clip-path: none;
}

.about a,
.foot a {
  transition: color 0.25s ease, opacity 0.25s ease, text-decoration-color 0.25s ease;
}

/* 7. Phones: less travel, no scaling, shorter pauses
   ========================================================================== */
@media (max-width: 850px) {
  .fm-anim {
    --fm-rise: 16px;
    --fm-k: 0.9;
    --fm-photo: 1.3s;
  }

  .fm-anim .a-hero__photo,
  .fm-anim .a-garage__photo,
  .fm-anim .a-find__photo {
    --fm-dur-x: 1.3s;
    transform: translateY(var(--fm-rise));
    clip-path: inset(0);
  }

  .fm-anim .a-closing__bg { transform: none; }
}

/* where there is no hover (phones, touch), those photos drop their clip too */
@media (max-width: 850px), (hover: none) {
  .fm-anim .a-duo.fm-settled img,
  .fm-anim .a-founders.fm-settled .a-person__img {
    clip-path: none;
  }
}