/* Layout states adapted from Codrops ScrollTextMotion; see vendor/Codrops-LICENSE.txt. */
@font-face {
  font-family: 'About Mono'; src: url('/assets/IBMPlexMono-Light.ttf') format('truetype');
  font-style: normal; font-weight: 300; font-display: swap;
}
html:has(.about-motion-page) { scroll-behavior: auto; scrollbar-width: none; background: #000; }
html:has(.about-motion-page)::-webkit-scrollbar { display: none; }
.about-motion-page {
  background: #000; color: #fff; overscroll-behavior: none;
  font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased;
}
.about-motion-page main { min-height: 100svh; }
.about-mark { display: block; width: 150px; margin: 80px auto; }
.about-mark img { display: block; width: 100%; height: auto; filter: invert(1); }
.about-motion-page a:focus-visible { outline-color: #fff; }
.about-statements { list-style: none; padding: 0 var(--page-inline-space) 80px; margin: 0; }
.about-statements li {
  font-family: 'About Mono', monospace; text-transform: uppercase;
  font-size: 16px; font-weight: 300; line-height: 1.4;
  letter-spacing: normal; max-width: 560px; margin: 0 0 32px;
}
.about-stage { display: none; }
.motion-ready .about-mark {
  position: fixed; z-index: 3; left: 50%; top: 50%;
  margin: 0; transform: translate(-50%, -50%);
}
.motion-ready .about-statements {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  padding: 0; clip-path: inset(50%); white-space: nowrap;
}
.motion-ready .about-stage { display: block; visibility: hidden; }
.motion-initialized .about-stage { visibility: visible; }
#about-smooth-content { overflow: hidden; }
.about-cycle { padding: 85vh var(--page-inline-space) 12vh; }
.motion-group { display: flex; flex-direction: column; margin-bottom: 6vh; }
.motion-el {
  white-space: nowrap; opacity: .6;
  font-family: 'About Mono', monospace; text-transform: uppercase;
  font-size: 13px; font-weight: 300; line-height: 1.35; letter-spacing: normal;
}
.motion-el:not(.motion-el--xl) {
  width: min(46ch, calc(100vw - 2 * var(--page-inline-space)));
  white-space: normal; overflow-wrap: anywhere;
}
.motion-el--xl { font-size: clamp(2rem, 20vw, 15rem); opacity: 1; line-height: 1; }
.pos-2 { margin-left: 25vw; }
.pos-3 { margin-left: 70vw; }
.motion-el:not(.motion-el--xl).pos-3 { margin-left: min(70vw, calc(100vw - 2 * var(--page-inline-space) - 46ch)); }
.pos-4 { margin-left: auto; }
.pos-5 { margin-top: 200px; opacity: 1; }
.pos-6 { margin-left: auto; margin-top: 200px; opacity: 1; }
.pos-7 { margin-top: 200px; opacity: 1; }
.pos-8 { margin-left: 0; margin-top: 50px; opacity: 1; }
.pos-9 { margin-left: 25vw; margin-top: 250px; }
.pos-10 { margin-left: 70vw; margin-top: 40vh; }
@media (max-width: 767px) {
  .about-mark { width: 100px; }
  .motion-el { font-size: 11px; }
  .motion-el:not(.motion-el--xl) {
    width: 26ch;
  }
  .motion-el--xl { font-size: clamp(82px, 22vw, 130px); }
  .pos-3, .pos-10, .motion-el:not(.motion-el--xl).pos-3 { margin-left: max(0px, calc(100vw - 2 * var(--page-inline-space) - 26ch)); }
  .motion-el--xl.pos-3, .motion-el--xl.pos-10 { margin-left: 48vw; }
  .pos-2, .pos-9 { margin-left: 16vw; }
}