/* Stay Average: home.css
   Layout of the start page only. Every value comes from the tokens in
   system.css. */

/* Load sequence (start page only: the shared header stays quiet elsewhere).
   Slow on purpose, in this order:
   0.0s logo, 0.3s menu,
   0.4s "Fast enough to feel it," snaps in word by word (quick),
   0.9s "slow enough to enjoy it." rises word by word (slow, soft),
   2.6s sentence, 2.9s links, 3.1s the photo is uncovered.
   About 5 seconds in all. */

@keyframes word-up {
  from {
    transform: translateY(110%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes word-up-soft {
  from {
    opacity: 0;
    transform: translateY(110%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .page-home .site-header__logo,
  .page-home .site-header__nav a,
  .hero .rise {
    --rise: var(--rise-lg);
  }

  .page-home .site-header__logo {
    animation: rise var(--dur-enter) var(--ease-out) both;
  }

  .page-home .site-header__nav a {
    animation: rise var(--dur-enter) var(--ease-out) both;
    animation-delay: 300ms;
  }

  .page-home .site-header__nav a + a {
    animation-delay: calc(300ms + var(--stagger));
  }

  .slogan__half--fast .w__i {
    animation: word-up 700ms var(--ease-out) both;
    animation-delay: calc(400ms + var(--n, 0) * 70ms);
  }

  .slogan__half--slow .w__i {
    animation: word-up-soft 1500ms var(--ease-in-out) both;
    animation-delay: calc(900ms + var(--n, 0) * 180ms);
  }

  .hero__context {
    --delay: 2600ms;
  }

  .hero__links {
    --delay: 2900ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w__i {
    animation: fade 200ms var(--ease-out) both;
  }
}

/* Hero ---------------------------------------------------------------- */

.hero {
  padding-block: var(--s12) var(--s8);
}

/* The two halves of the slogan sit on their own lines. Each word sits in a
   mask (.w) and moves up out of it (.w__i). The padding keeps the tails of
   g, j and y inside the mask. */
.slogan__half {
  display: block;
}

.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

.w__i {
  display: inline-block;
}

.slogan__half .w:nth-child(1) { --n: 0; }
.slogan__half .w:nth-child(2) { --n: 1; }
.slogan__half .w:nth-child(3) { --n: 2; }
.slogan__half .w:nth-child(4) { --n: 3; }
.slogan__half .w:nth-child(5) { --n: 4; }

.hero__slogan {
  max-width: 14em;
  font-weight: var(--w-slogan);
  font-stretch: var(--stretch-wide);
  font-size: var(--fs-slogan);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero__body {
  display: grid;
  gap: var(--s8);
  margin-top: var(--s8);
}

.hero__context {
  max-width: 28ch;
  font-weight: 500;
  font-stretch: var(--stretch-wide);
  font-size: var(--fs-lead);
  line-height: 1.3;
  text-wrap: balance;
}

.hero__links {
  display: grid;
  gap: var(--s2);
  align-content: start;
}

@media (min-width: 768px) {
  .hero {
    padding-block: var(--s16) var(--s12);
  }

  .hero__body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    margin-top: var(--s12);
  }

  .hero__context {
    grid-column: 1 / span 5;
  }

  .hero__links {
    grid-column: 7 / -1;
  }
}

@media (min-width: 1024px) {
  .hero__context {
    grid-column: 1 / span 5;
    font-size: var(--fs-h2);
  }

  .hero__links {
    grid-column: 8 / -1;
  }
}

/* Hero photo: full width, fixed box so nothing shifts while it loads. */

.hero__photo {
  --delay: 3100ms;
  --dur-reveal: 1800ms;
  height: min(100vw, 100svh);
  overflow: hidden;
  background: var(--card);
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .hero__photo {
    height: min(66.667vw, 100svh);
  }
}

/* Facts --------------------------------------------------------------- */

.facts {
  padding-block: var(--s12);
}

.facts__list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s8) var(--s12);
  padding-top: var(--s6);
}

/* Rules draw themselves from the left when they scroll in (data-line). */
.facts__list::before,
.ride::before,
.tools-teaser::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bw-thin);
  background: var(--line-quiet);
  transform-origin: left center;
}


.facts__value {
  font-weight: var(--w-display);
  font-stretch: var(--stretch-wide);
  font-size: var(--fs-slogan);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Manifesto ----------------------------------------------------------- */

.manifesto {
  padding-block: var(--s12) var(--s16);
}

.manifesto__label {
  margin-bottom: var(--s6);
}

.manifesto__lead {
  font-weight: var(--w-slogan);
  font-stretch: var(--stretch-wide);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.manifesto__body {
  max-width: 54ch;
  margin-top: var(--s6);
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.manifesto__sign {
  margin-top: var(--s8);
  font-weight: var(--w-display);
  font-stretch: var(--stretch-wide);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

@media (min-width: 1024px) {
  .manifesto {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    padding-block: var(--s16) var(--s24);
  }

  .manifesto__label {
    grid-column: 1 / span 3;
    margin-bottom: 0;
    padding-top: var(--s2);
  }

  .manifesto__text {
    grid-column: 4 / span 8;
  }
}

/* How we ride --------------------------------------------------------- */

.ride {
  position: relative;
  padding-block: var(--s12) var(--s16);
}

.ride h2 {
  margin-bottom: var(--s6);
}

.ride__lead {
  max-width: 14em;
  font-weight: var(--w-slogan);
  font-stretch: var(--stretch-wide);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ride__pace {
  max-width: 40ch;
  margin-top: var(--s6);
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.ride__rules {
  margin-top: var(--s12);
}

.ride__rules .label {
  margin-bottom: var(--s2);
}

.ride__download {
  max-width: 28rem;
  margin-top: var(--s8);
}

.ride__rules .label:not(:first-child) {
  margin-top: var(--s12);
}

.rules-list {
  max-width: 62ch;
}

/* One count runs through both lists. */
.ride__rules {
  counter-reset: rule;
}

.rules-list li {
  display: grid;
  grid-template-columns: var(--s12) minmax(0, 1fr);
  column-gap: var(--s2);
  padding-block: var(--s4);
  border-bottom: var(--bw-thin) solid var(--line-quiet);
}

.rules-list li::before {
  counter-increment: rule;
  content: counter(rule, decimal-leading-zero);
  color: var(--mute);
  font-weight: var(--w-display);
  font-stretch: var(--stretch-wide);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-body);
}

.rules-list__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (min-width: 1024px) {
  .ride {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    padding-block: var(--s16) var(--s24);
  }

  .ride__intro {
    grid-column: 1 / span 5;
    position: sticky;
    top: var(--s6);
    align-self: start;
  }

  .ride__rules {
    grid-column: 7 / -1;
    margin-top: 0;
  }
}

/* Tools teaser -------------------------------------------------------- */

.tools-teaser {
  position: relative;
  padding-block: var(--s12) var(--s16);
}

.tools-teaser h2 {
  margin-bottom: var(--s4);
}

.tools-teaser__lead {
  max-width: 36ch;
  font-size: var(--fs-lead);
  line-height: 1.45;
}

/* Visible placeholder for content that is not confirmed yet. */
.todo {
  display: inline-block;
  padding: var(--s3) var(--s4);
  border: var(--bw) dashed var(--accent);
  color: var(--fg);
  font-weight: var(--w-strong);
}

/* Contact: the one violet surface, the violet of the logo bars.
   Asphalt on violet: 5.8:1. Chalk would only reach 2.4:1. -------------- */

.contact {
  position: relative;
  isolation: isolate;
  margin-top: var(--s16);
  color: var(--bg);
  padding-block: clamp(64px, 10vw, 160px);
}

/* The violet surface is its own layer, so it can rise like a curtain
   before the text arrives (see .contact in the motion block below). */
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform-origin: center bottom;
}

.contact :focus-visible {
  outline-color: var(--bg);
}

.contact ::selection {
  background: var(--bg);
  color: var(--fg);
}

.contact__inner {
  container-type: inline-size;
}

.contact .label {
  margin-bottom: var(--s6);
}

/* Font size from the measured advance width of the address at width 125,
   weight 900: 14.49 em on one line, 10.15 em for the longer line when it
   breaks after the @, minus the -0.02 em tracking per character. */
.contact__mail {
  font-weight: var(--w-display);
  font-stretch: var(--stretch-wide);
  font-size: 10vw;
  font-size: calc(100cqi / 10.3);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--bg);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.1em;
  transition: text-decoration-color var(--dur-ui) var(--ease-out);
}

@media (min-width: 640px) {
  .contact__mail {
    font-size: 6.4vw;
    font-size: min(calc(100cqi / 14.4), 8rem);
  }
}

.contact__mail:focus-visible,
.contact__mail:active {
  text-decoration-color: var(--bg);
}

@media (hover: hover) and (pointer: fine) {
  .contact__mail:hover {
    text-decoration-color: var(--bg);
  }
}

/* The footer follows the contact band directly on this page. */
.page-home .site-footer {
  margin-top: 0;
  border-top: 0;
}

/* Scroll build-up ----------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @media (scripting: enabled) {
    .contact[data-line]::before {
      transform: scaleY(0);
      transition: transform var(--dur-leave) var(--ease-in-out);
    }

    .contact[data-line].is-in::before {
      transform: scaleY(1);
      transition: transform var(--dur-draw) var(--ease-in-out);
    }

    /* The text arrives once the curtain is mostly up. */
    .contact .reveal {
      --delay: 800ms;
    }
  }
}