/* ==========================================================================
   Freedom Machine — motion layer
   --------------------------------------------------------------------------
   Everything here is scoped to html.fm-anim, which is added by a small inline
   script only when the browser supports the APIs we need and the visitor has
   not asked for reduced motion.  With the class absent the page renders
   exactly as it does without this file, so the site degrades to the static
   design if JavaScript fails.

   Each section is given .fm-in by an IntersectionObserver; the rules below
   move its contents from a start state to their natural, untouched state.
   No element keeps a transform, filter or opacity once its reveal is done.
   ========================================================================== */

/* 1. Motion 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-dur: 1.08s;
  --fm-photo: 1.5s;
}

/* a reveal that is still pending must never swallow clicks */
.fm-anim [data-fm-hidden] {
  pointer-events: none;
}

/* 2. Shared reveal patterns
   --------------------------------------------------------------------------
   The start states are written as full selectors rather than being tagged on
   by script, so an element is hidden from the very first paint and can never
   be seen fading *out* after the page has already drawn it.
   ---------------------------------------------------------------------- */
.fm-anim .hero .brand,
.fm-anim .hero .mega,
.fm-anim .hero .hero__lede,
.fm-anim .hero .hero__actions,
.fm-anim #why .eyebrow,
.fm-anim #why .section-title,
.fm-anim #why .intro__copy,
.fm-anim .discover .discover__eyebrow,
.fm-anim .discover .discover__title,
.fm-anim .discover .discover__lede,
.fm-anim #people .eyebrow,
.fm-anim #people .section-title,
.fm-anim .adv .adv__eyebrow,
.fm-anim .adv .adv__title,
.fm-anim .adv .adv__lede,
.fm-anim .route .route__eyebrow,
.fm-anim .route .route__title,
.fm-anim .route .route__lede,
.fm-anim #hangouts .eyebrow,
.fm-anim #hangouts .section-title,
.fm-anim #hangouts .hangouts__text,
.fm-anim .statement .eyebrow,
.fm-anim .statement .mega,
.fm-anim .statement .statement__text,
.fm-anim .ride .ride__eyebrow,
.fm-anim .ride .ride__title,
.fm-anim .ride .ride__lede,
.fm-anim .final .eyebrow,
.fm-anim .final .mega,
.fm-anim .final .final__text,
.fm-anim .foot .foot__eyebrow,
.fm-anim .foot .foot__title {
  opacity: 0;
  transform: translate3d(0, var(--fm-rise), 0);
  transition:
    opacity var(--fm-dur) var(--fm-ease) var(--fm-d, 0s),
    transform var(--fm-dur) var(--fm-ease) var(--fm-d, 0s);
}

.fm-anim .hero.fm-in .brand,
.fm-anim .hero.fm-in .mega,
.fm-anim .hero.fm-in .hero__lede,
.fm-anim .hero.fm-in .hero__actions,
.fm-anim #why.fm-in .eyebrow,
.fm-anim #why.fm-in .section-title,
.fm-anim #why.fm-in .intro__copy,
.fm-anim .discover.fm-in .discover__eyebrow,
.fm-anim .discover.fm-in .discover__title,
.fm-anim .discover.fm-in .discover__lede,
.fm-anim #people.fm-in .eyebrow,
.fm-anim #people.fm-in .section-title,
.fm-anim .adv.fm-in .adv__eyebrow,
.fm-anim .adv.fm-in .adv__title,
.fm-anim .adv.fm-in .adv__lede,
.fm-anim .route.fm-in .route__eyebrow,
.fm-anim .route.fm-in .route__title,
.fm-anim .route.fm-in .route__lede,
.fm-anim #hangouts.fm-in .eyebrow,
.fm-anim #hangouts.fm-in .section-title,
.fm-anim #hangouts.fm-in .hangouts__text,
.fm-anim .statement.fm-in .eyebrow,
.fm-anim .statement.fm-in .mega,
.fm-anim .statement.fm-in .statement__text,
.fm-anim .ride.fm-in .ride__eyebrow,
.fm-anim .ride.fm-in .ride__title,
.fm-anim .ride.fm-in .ride__lede,
.fm-anim .final.fm-in .eyebrow,
.fm-anim .final.fm-in .mega,
.fm-anim .final.fm-in .final__text,
.fm-anim .foot.fm-in .foot__eyebrow,
.fm-anim .foot.fm-in .foot__title {
  opacity: 1;
  transform: none;
}

.fm-anim #why .intro__app {
  opacity: 0;
  transform: scale(1.035);
  transition:
    opacity var(--fm-photo) var(--fm-ease-soft) var(--fm-d, 0s),
    transform var(--fm-photo) var(--fm-ease-soft) var(--fm-d, 0s);
}

.fm-anim #why.fm-in .intro__app {
  opacity: 1;
  transform: none;
}

/* a left-to-right "written" reveal for the handwritten marks */
.fm-anim .route .route__script,
.fm-anim .foot .foot__script {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.725s var(--fm-ease-soft) var(--fm-d, 0s);
}

.fm-anim .route.fm-in .route__script,
.fm-anim .foot.fm-in .foot__script {
  clip-path: inset(0 0 0 0);
}

/* 3. Hero
   ========================================================================== */
.fm-anim .hero__bg {
  opacity: 0;
  transform: scale(1.055);
  transition:
    opacity 2.25s var(--fm-ease-soft),
    transform 2.4s var(--fm-ease-soft);
}

.fm-anim .hero.fm-in .hero__bg {
  opacity: 1;
  transform: none;
}

.fm-anim .hero .brand   { --fm-d: 0.225s; }
.fm-anim .hero .mega    { --fm-d: 0.45s; }
.fm-anim .hero__lede    { --fm-d: 0.72s; }
.fm-anim .hero__actions { --fm-d: 0.93s; }

/* 4. Why / app screens
   ========================================================================== */
.fm-anim #why .eyebrow       { --fm-d: 0s; }
.fm-anim #why .section-title { --fm-d: 0.12s; }
.fm-anim #why .intro__copy   { --fm-d: 0.24s; }
.fm-anim .intro__app         { --fm-d: 0.36s; }

/* 5. Discover — the route draws itself
   ========================================================================== */
.fm-anim .discover__eyebrow { --fm-d: 0s; }
.fm-anim .discover__title   { --fm-d: 0.12s; }
.fm-anim .discover__lede    { --fm-d: 0.27s; }

/* the topo map and its wedge carry their own opacity in the design, so they
   are left alone rather than being faded to a value this layer would have to
   hard-code */

.fm-anim .discover__trails {
  opacity: 0;
  transition: opacity 1.65s var(--fm-ease-soft) 0.375s;
}

.fm-anim .discover.fm-in .discover__trails {
  opacity: 1;
}

/* the orange line: stroke-dashoffset is primed by the script, which knows
   each path's true length */
.fm-anim .discover__line-glow,
.fm-anim .discover__line,
.fm-anim .discover__line-core,
.fm-anim .discover__line-tail {
  stroke-dashoffset: var(--fm-len, 0);
  transition: stroke-dashoffset 3.15s var(--fm-ease-soft) var(--fm-d, 0.3s);
}

.fm-anim .discover.fm-in .discover__line-glow,
.fm-anim .discover.fm-in .discover__line,
.fm-anim .discover.fm-in .discover__line-core,
.fm-anim .discover.fm-in .discover__line-tail {
  stroke-dashoffset: 0;
}

.fm-anim .discover__line-tail { --fm-d: 3.375s; }

/* markers pop as the line reaches them; --fm-d is written by the script from
   each marker's position along the path */
.fm-anim .discover__stops circle,
.fm-anim .discover__stop-light,
.fm-anim .discover__route > circle,
.fm-anim .discover__pin {
  opacity: 0;
  transform: scale(0.4);
  transform-origin: center;
  transform-box: fill-box;
  transition:
    opacity 0.48s var(--fm-ease) var(--fm-d, 0s),
    transform 0.63s var(--fm-ease) var(--fm-d, 0s);
}

.fm-anim .discover.fm-in .discover__stops circle,
.fm-anim .discover.fm-in .discover__stop-light,
.fm-anim .discover.fm-in .discover__route > circle,
.fm-anim .discover.fm-in .discover__pin {
  opacity: 1;
  transform: none;
}

.fm-anim .discover__photo {
  opacity: 0;
  transform: rotate(var(--r, 0deg)) scale(1.04);
  transition:
    opacity var(--fm-photo) var(--fm-ease-soft) var(--fm-d, 0s),
    transform var(--fm-photo) var(--fm-ease-soft) var(--fm-d, 0s);
}

.fm-anim .discover.fm-in .discover__photo {
  opacity: 1;
  transform: rotate(var(--r, 0deg));
}

.fm-anim .discover__photo--top   { --fm-d: 0.825s; }
.fm-anim .discover__photo--left  { --fm-d: 1.275s; }
.fm-anim .discover__photo--right { --fm-d: 1.725s; }

.fm-anim .dcard {
  opacity: 0;
  transform: rotate(var(--r, 0deg)) translate3d(0, 22px, 0);
  transition:
    opacity 0.93s var(--fm-ease) var(--fm-d, 0s),
    transform 0.93s var(--fm-ease) var(--fm-d, 0s),
    filter 0.2s;
}

.fm-anim .discover.fm-in .dcard {
  opacity: 1;
  transform: rotate(var(--r, 0deg));
}

.fm-anim .dcard--places  { --fm-d: 1.575s; }
.fm-anim .dcard--people  { --fm-d: 1.875s; }
.fm-anim .dcard--events  { --fm-d: 2.175s; }
.fm-anim .dcard--routes  { --fm-d: 2.475s; }

.fm-anim .dlabel {
  opacity: 0;
  transition: opacity 1.2s var(--fm-ease-soft) 2.4s;
}

.fm-anim .discover.fm-in .dlabel {
  opacity: 1;
}

/* 6. Find your people
   ========================================================================== */
.fm-anim #people .eyebrow       { --fm-d: 0s; }
.fm-anim #people .section-title { --fm-d: 0.12s; }

.fm-anim .social-strip .tile {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition:
    opacity 1.08s var(--fm-ease) var(--fm-d, 0s),
    transform 1.08s var(--fm-ease) var(--fm-d, 0s);
}

.fm-anim #people.fm-in .social-strip .tile {
  opacity: 1;
  transform: none;
}

.fm-anim .social-strip .tile:nth-child(1) { --fm-d: 0.3s; }
.fm-anim .social-strip .tile:nth-child(2) { --fm-d: 0.51s; }
.fm-anim .social-strip .tile:nth-child(3) { --fm-d: 0.72s; }

/* the copy lifts a little with the photo on hover */
.fm-anim .tile .overlay-copy,
.fm-anim .place .overlay-copy {
  transition: transform 0.3s var(--fm-ease);
}

@media (hover: hover) {
  .fm-anim .tile:hover .overlay-copy,
  .fm-anim .place:hover .overlay-copy {
    transform: translate3d(0, -5px, 0);
  }

  .fm-anim .place > img {
    transition: transform 0.35s var(--fm-ease);
  }

  .fm-anim .place:hover > img {
    transform: scale(1.03);
  }
}

/* 7. Adventures
   ========================================================================== */
.fm-anim .adv__stage {
  opacity: 0;
  transform: scale(0.982);
  transition:
    opacity 1.8s var(--fm-ease-soft),
    transform 2.4s var(--fm-ease-soft);
}

.fm-anim .adv.fm-in .adv__stage {
  opacity: 1;
  transform: none;
}

.fm-anim .adv__arcs path {
  stroke-dashoffset: var(--fm-len, 0);
  transition: stroke-dashoffset 3s var(--fm-ease-soft) 0.9s;
}

.fm-anim .adv.fm-in .adv__arcs path {
  stroke-dashoffset: 0;
}

.fm-anim .advcard,
.fm-anim .advmachines,
.fm-anim .advgo {
  opacity: 0;
  transform: rotate(var(--r, 0deg)) translate3d(0, 24px, 0);
  transition:
    opacity 1.35s var(--fm-ease) var(--fm-d, 0s),
    transform 1.425s var(--fm-ease) var(--fm-d, 0s);
}

.fm-anim .adv.fm-in .advcard,
.fm-anim .adv.fm-in .advmachines,
.fm-anim .adv.fm-in .advgo {
  opacity: 1;
  transform: rotate(var(--r, 0deg));
}

.fm-anim .advcard--when   { --fm-d: 0.675s; }
.fm-anim .advcard--route  { --fm-d: 1.125s; }
.fm-anim .advmachines     { --fm-d: 1.575s; }
.fm-anim .advcard--people { --fm-d: 2.025s; }

/* the oversized GO grows the last few per cent into place */
.fm-anim .advgo {
  --fm-d: 2.4s;

  transform: rotate(var(--r, 0deg)) scale(0.95);
}

.fm-anim .adv.fm-in .advgo {
  transform: rotate(var(--r, 0deg));
}

.fm-anim .advlabel {
  opacity: 0;
  transition: opacity 1.5s var(--fm-ease-soft) 2.85s;
}

.fm-anim .adv.fm-in .advlabel {
  opacity: 1;
}

.fm-anim .adv__eyebrow { --fm-d: 0.375s; }
.fm-anim .adv__title   { --fm-d: 0.675s; }
.fm-anim .adv__lede    { --fm-d: 1.125s; }

/* 8. Routes — planning a journey
   ========================================================================== */
.fm-anim .route__eyebrow { --fm-d: 0s; }
.fm-anim .route__title   { --fm-d: 0.12s; }
.fm-anim .route__lede    { --fm-d: 0.3s; }

/* the map fades in, then a soft diagonal wipe travels the way the route runs,
   so the journey appears to be laid down from start to finish */
.fm-anim .route__map {
  opacity: 0;
  transform: scale(1.02);
  clip-path: polygon(0% 0%, 0% 0%, -62% 100%, 0% 100%);
  transition:
    opacity 1.05s var(--fm-ease-soft),
    transform 1.65s var(--fm-ease-soft),
    clip-path 3.15s var(--fm-ease-soft) 0.525s;
}

.fm-anim .route.fm-in .route__map {
  opacity: 1;
  transform: none;
  clip-path: polygon(0% 0%, 168% 0%, 106% 100%, 0% 100%);
}

.fm-anim .route__card {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.985);
  transition:
    opacity 0.9s var(--fm-ease) var(--fm-d, 0s),
    transform 0.9s var(--fm-ease) var(--fm-d, 0s),
    box-shadow 0.3s var(--fm-ease);
}

.fm-anim .route.fm-in .route__card {
  opacity: 1;
  transform: none;
}

.fm-anim .route__card--scenic { --fm-d: 1.725s; }
.fm-anim .route__card--food   { --fm-d: 2.775s; }

.fm-anim .route__phone {
  --fm-d: 3.075s;

  opacity: 0;
  transform: rotate(-6.9deg) translate3d(0, 34px, 0);
  transition:
    opacity 1.2s var(--fm-ease) var(--fm-d),
    transform 1.35s var(--fm-ease) var(--fm-d);
}

.fm-anim .route.fm-in .route__phone {
  opacity: 1;
  transform: rotate(-6.9deg);
}

.fm-anim .route__types {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 1.05s var(--fm-ease) 3.525s,
    transform 1.05s var(--fm-ease) 3.525s;
}

.fm-anim .route.fm-in .route__types {
  opacity: 1;
  transform: none;
}

.fm-anim .route__script { --fm-d: 3.825s; }

.fm-anim .route__tag {
  opacity: 0;
  transition: opacity 1.2s var(--fm-ease-soft) 4.05s;
}

.fm-anim .route.fm-in .route__tag {
  opacity: 1;
}

@media (hover: hover) {
  .fm-anim .route__card:hover {
    box-shadow:
      0 calc(22 * var(--px)) calc(44 * var(--px)) rgba(28, 24, 16, 0.3);
  }
}

/* 9. Hangouts
   ========================================================================== */
.fm-anim #hangouts .eyebrow       { --fm-d: 0s; }
.fm-anim #hangouts .section-title { --fm-d: 0.12s; }
.fm-anim .hangouts__text          { --fm-d: 0.27s; }

.fm-anim .places .place {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition:
    opacity 1.11s var(--fm-ease) var(--fm-d, 0s),
    transform 1.11s var(--fm-ease) var(--fm-d, 0s);
}

.fm-anim .hangouts.fm-in .places .place {
  opacity: 1;
  transform: none;
}

.fm-anim .places .place:nth-child(1) { --fm-d: 0.33s; }
.fm-anim .places .place:nth-child(2) { --fm-d: 0.57s; }

/* 10. Less scrolling. More doing.
   ========================================================================== */
.fm-anim .statement .eyebrow        { --fm-d: 0s; }
.fm-anim .statement .mega           { --fm-d: 0.18s; }
.fm-anim .statement__text           { --fm-d: 0.825s; }

.fm-anim .statement__accent {
  opacity: 0;
  transition: opacity 1.05s var(--fm-ease) 0.51s;
}

.fm-anim .statement.fm-in .statement__accent {
  opacity: 1;
}

/* 11. Different machines. Same feeling.
   ========================================================================== */
.fm-anim .ghost {
  opacity: 0;
  transition: opacity 2.25s var(--fm-ease-soft) 0.3s;
}

.fm-anim .ride.fm-in .ghost {
  opacity: 1;
}

.fm-anim .rcard {
  opacity: 0;
  transition:
    opacity 1.5s var(--fm-ease) var(--fm-d, 0s),
    transform 1.725s var(--fm-ease) var(--fm-d, 0s),
    box-shadow 0.3s var(--fm-ease);
}

.fm-anim .ride.fm-in .rcard {
  opacity: 1;
  transform: rotate(var(--r, 0deg));
}

/* each card arrives from a slightly different direction */
.fm-anim .rcard--james {
  --fm-d: 0.45s;

  transform: rotate(var(--r, 0deg)) translate3d(-38px, 26px, 0) scale(0.97);
}

.fm-anim .rcard--sophie {
  --fm-d: 1.125s;

  transform: rotate(var(--r, 0deg)) translate3d(0, -34px, 0) scale(0.97);
}

.fm-anim .rcard--tom {
  --fm-d: 1.8s;

  transform: rotate(var(--r, 0deg)) translate3d(34px, 30px, 0) scale(0.97);
}

@media (hover: hover) {
  .fm-anim .rcard:hover {
    transform: rotate(var(--r, 0deg)) translate3d(0, 0, 0) scale(1.018);
    box-shadow: 0 calc(32 * var(--px)) calc(70 * var(--px)) rgba(20, 18, 12, 0.26);
  }
}

.fm-anim .ride__eyebrow { --fm-d: 0.75s; }
.fm-anim .ride__title   { --fm-d: 1.125s; }
.fm-anim .ride__lede    { --fm-d: 1.575s; }

/* 12. Find your tribe
   ========================================================================== */
.fm-anim .final .eyebrow  { --fm-d: 0s; }
.fm-anim .final .mega     { --fm-d: 0.18s; }
.fm-anim .final__text     { --fm-d: 0.45s; }

/* 13. Footer
   ========================================================================== */
.fm-anim .foot__eyebrow { --fm-d: 0s; }
.fm-anim .foot__title   { --fm-d: 0.15s; }
.fm-anim .foot__script  { --fm-d: 1.05s; }

.fm-anim .foot__fmark span {
  opacity: 0;
  transform: translate3d(22px, -14px, 0);
  transition:
    opacity 1.35s var(--fm-ease-soft) var(--fm-d, 0s),
    transform 1.5s var(--fm-ease-soft) var(--fm-d, 0s);
}

.fm-anim .foot.fm-in .foot__fmark span {
  opacity: 1;
  transform: none;
}

.fm-anim .foot__fmark-a { --fm-d: 0.27s; }
.fm-anim .foot__fmark-b { --fm-d: 0.45s; }

.fm-anim .foot__words,
.fm-anim .foot__words-rule,
.fm-anim .foot__brand,
.fm-anim .foot__cols > *,
.fm-anim .foot__copy {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 0.9s var(--fm-ease) var(--fm-d, 0s),
    transform 0.9s var(--fm-ease) var(--fm-d, 0s);
}

.fm-anim .foot.fm-in .foot__words,
.fm-anim .foot.fm-in .foot__words-rule,
.fm-anim .foot.fm-in .foot__brand,
.fm-anim .foot.fm-in .foot__cols > *,
.fm-anim .foot.fm-in .foot__copy {
  opacity: 1;
  transform: none;
}

.fm-anim .foot__words      { --fm-d: 0.75s; }
.fm-anim .foot__words-rule { --fm-d: 0.9s; }
.fm-anim .foot__brand      { --fm-d: 0.45s; }
.fm-anim .foot__cols > *   { --fm-d: 0.6s; }
.fm-anim .foot__col--company { --fm-d: 0.72s; }
.fm-anim .foot__col--app     { --fm-d: 0.84s; }
.fm-anim .foot__col--loop    { --fm-d: 0.96s; }
.fm-anim .foot__copy       { --fm-d: 1.05s; }

/* restrained footer hovers */
.fm-anim .foot__badge,
.fm-anim .foot__social a {
  transition: opacity 0.25s var(--fm-ease), transform 0.25s var(--fm-ease);
}

@media (hover: hover) {
  .fm-anim .foot__badge:hover,
  .fm-anim .foot__social a:hover {
    opacity: 0.82;
    transform: translate3d(0, -2px, 0);
  }

  .fm-anim .store-badge {
    transition: opacity 0.25s var(--fm-ease), transform 0.25s var(--fm-ease);
  }
}

/* 14. Phones — keep the long sequences short and the heavy work off
   ========================================================================== */
@media (max-width: 850px) {
  .fm-anim {
    --fm-rise: 18px;
  }

  .fm-anim .route__map {
    clip-path: none;
    transition:
      opacity 1.05s var(--fm-ease-soft),
      transform 1.5s var(--fm-ease-soft);
  }

  .fm-anim .discover__line-glow,
  .fm-anim .discover__line,
  .fm-anim .discover__line-core,
  .fm-anim .discover__line-tail {
    transition-duration: 2.25s;
  }

  .fm-anim .route__card--scenic { --fm-d: 0.45s; }
  .fm-anim .route__card--food   { --fm-d: 0.63s; }

  /* the phone is upright on phones, so the reveal must not reintroduce the
     desktop rotation */
  .fm-anim .route__phone {
    --fm-d: 0.3s;

    transform: translate3d(0, 26px, 0);
  }

  .fm-anim .route.fm-in .route__phone {
    transform: none;
  }

  .fm-anim .route__types {
    transition-delay: 0.75s;
  }

  /* the long desktop build is compressed on a small screen */
  .fm-anim .advcard--when   { --fm-d: 0.45s; }
  .fm-anim .advcard--route  { --fm-d: 0.675s; }
  .fm-anim .advmachines     { --fm-d: 0.9s; }
  .fm-anim .advcard--people { --fm-d: 1.125s; }
  .fm-anim .advgo           { --fm-d: 1.35s; }
  .fm-anim .advlabel        { transition-delay: 1.575s; }
  .fm-anim .adv__eyebrow    { --fm-d: 0.225s; }
  .fm-anim .adv__title      { --fm-d: 0.42s; }
  .fm-anim .adv__lede       { --fm-d: 0.675s; }

  .fm-anim .rcard--james    { --fm-d: 0.3s; }
  .fm-anim .rcard--sophie   { --fm-d: 0.63s; }
  .fm-anim .rcard--tom      { --fm-d: 0.96s; }
  .fm-anim .ride__eyebrow   { --fm-d: 0.45s; }
  .fm-anim .ride__title     { --fm-d: 0.66s; }
  .fm-anim .ride__lede      { --fm-d: 0.9s; }

  .fm-anim .route__tag,
  .fm-anim .route__script {
    --fm-d: 0.9s;

    transition-delay: 0.9s;
  }
}

/* 15. Anyone who asks for less motion gets none of it
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fm-anim *,
  .fm-anim *::before,
  .fm-anim *::after {
    transition: none !important;
    animation: none !important;
  }
}