/* ===================== MOTION: CURTAIN TITLES ===================== */
/* motion.js splits each .section-title into one slot per line; until then keep it hidden so it never jumps */
.motion-on .section-title:not(.is-split) {
  visibility: hidden;
}

.section-title .ln {
  display: block;
  /* clips like overflow: hidden, but leaves room for descenders and the swoosh without changing the layout */
  clip-path: inset(-0.1em -50vw -0.42em -50vw);
}

.section-title .li {
  display: block;
  transform: translateY(150%) rotate(4deg);
  transform-origin: 0 0;
  transition: transform 1s cubic-bezier(0.16, 0.84, 0.24, 1);
  transition-delay: calc(var(--i, 0) * 0.12s);
}

.section-title.is-in .li {
  transform: none;
}

.section-title em {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.title-swoosh {
  position: absolute;
  left: -4%;
  top: 88%;
  width: 108%;
  height: 0.36em;
  overflow: visible;
  pointer-events: none;
}

.title-swoosh path {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.title-swoosh + .title-swoosh path {
  stroke-width: 1.6;
  opacity: 0.8;
}

/* the swoosh draws itself once the last line has landed; the thinner flick follows */
.motion-on .title-swoosh {
  clip-path: inset(-50% 100% -50% 0);
  transition: clip-path 0.9s cubic-bezier(0.65, 0, 0.25, 1);
  transition-delay: calc(var(--lines, 1) * 0.12s + 0.55s);
}

.motion-on .title-swoosh + .title-swoosh {
  transition-duration: 0.6s;
  transition-delay: calc(var(--lines, 1) * 0.12s + 0.95s);
}

.motion-on .section-title.is-in .title-swoosh {
  clip-path: inset(-50% 0 -50% 0);
}

/* ===================== MOTION: $ DECODE LABELS ===================== */
.motion-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===================== MOTION: VELOCITY RIBBON ===================== */
.ribbon-band {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.6rem;
  padding: 2.2rem 0;
  overflow: hidden;
  background: var(--black);
  border-top: 1px solid rgba(202, 251, 12, 0.15);
  border-bottom: 1px solid rgba(202, 251, 12, 0.15);
}

.ribbon-row {
  display: flex;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
}

.ribbon-row span {
  font-family: 'Archivo', 'Arial Black', sans-serif;
  font-stretch: 125%;
  font-variation-settings: 'wdth' 125;
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--white);
  padding-right: 0.45em;
}

.ribbon-row span i {
  font-style: normal;
  color: var(--green);
  padding-left: 0.45em;
}

.ribbon-row--outline span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(245, 245, 240, 0.5);
}

/* At rest (reduced motion or before the script runs), offset the second row so the two don't line up */
.ribbon-row--outline {
  transform: translateX(-12%);
}

/* ===================== MOTION: SIDEWAYS VISION ===================== */
/* motion.js wraps the section in a sticky frame and sets the section's height to give the scroll room */
body.vision-pins {
  /* hidden would make body a scroll container and break the sticky pin; clip trims the same overflow */
  overflow-x: clip;
}

#vision.vision-sideways {
  padding-top: 0;
  padding-bottom: 0;
}

.vision-pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5.5rem 0 3rem;
}

.vision-lane {
  position: relative;
  margin-top: 2.5rem;
  /* the years run out to the screen edges, not just the content column */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(2rem, calc(50vw - 550px + 2rem));
  overflow: hidden;
}

#vision.vision-sideways .roadmap {
  display: flex;
  gap: clamp(3rem, 8vw, 7rem);
  width: max-content;
  margin: 0;
  padding-right: max(2rem, calc(50vw - 550px + 2rem));
  will-change: transform;
}

#vision.vision-sideways .roadmap::before {
  content: none;
}

#vision.vision-sideways .roadmap li {
  width: min(78vw, 30rem);
  flex: none;
  padding: 2.4rem 0 0;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--grey);
  transition: color 0.5s;
}

#vision.vision-sideways .roadmap li.on {
  color: var(--white);
}

#vision.vision-sideways .roadmap li::before {
  background: var(--black);
  border: 1px solid rgba(202, 251, 12, 0.5);
  box-shadow: none;
  transition: background 0.4s, box-shadow 0.4s;
}

#vision.vision-sideways .roadmap li.on::before {
  background: var(--green);
  box-shadow: 0 0 14px rgba(202, 251, 12, 0.5);
}

#vision.vision-sideways .roadmap li span {
  font-family: 'Archivo', 'Arial Black', sans-serif;
  font-stretch: 125%;
  font-variation-settings: 'wdth' 125;
  font-weight: 900;
  font-size: clamp(4rem, 11vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245, 245, 240, 0.45);
  transition: color 0.5s, -webkit-text-stroke-color 0.5s;
}

#vision.vision-sideways .roadmap li.on span {
  color: var(--green);
  -webkit-text-stroke-color: var(--green);
}

/* the rail stays put while the years (and their dots) slide along it */
.vision-rail {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 1px;
  z-index: -1;
  background: rgba(202, 251, 12, 0.15);
}

.vision-rail i {
  position: absolute;
  inset: 0;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
}

#vision.vision-sideways .section-kicker {
  margin-top: 2.5rem;
}