:root {
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-expo: cubic-bezier(0.23, 1, 0.32, 1);
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

section[id], .section { scroll-margin-top: 72px; }

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 20;
  pointer-events: none;
}

.site-header { transition: transform 0.7s var(--ease-expo); }
.site-header.is-hidden { transform: translateY(-100%); }

@media (min-width: 900px) {
  .nav a {
    padding-bottom: 4px;
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
    transition: background-size 0.5s var(--ease-expo), opacity 0.25s ease, color 0.25s ease;
  }
  .nav a:hover { background-size: 100% 1px; }
}

.js [data-split] .ln,
.js [data-lines] .ln {
  display: block;
  overflow: hidden;
  position: relative;
  top: -0.1em;
  padding-top: 0.1em;
  padding-bottom: 0.12em;
  margin-bottom: -0.22em;
}

.js [data-split] .ln-i,
.js [data-lines] .ln-i {
  display: block;
  transform: translate3d(0, 130%, 0);
  transition: transform 1.6s var(--ease-out) calc(var(--i, 0) * 130ms);
}

.js [data-split].is-in .ln-i,
.js [data-lines].is-in .ln-i { transform: none; }

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 1.4rem, 0);
  transition:
    opacity 1.2s ease calc(var(--i, 0) * 150ms),
    transform 1.2s var(--ease-out) calc(var(--i, 0) * 150ms);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.js [data-curtain] { position: relative; overflow: hidden; }

.js [data-curtain]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--violet);
  transform: scaleY(1);
  transform-origin: 50% 50%;
  transition: transform 1.3s var(--ease-expo);
  pointer-events: none;
}

.js [data-curtain].is-in::after {
  transform: scaleY(0);
  transform-origin: 50% 50%;
}

.js [data-curtain] > * {
  transform: scale(1.16);
  transition: transform 2s var(--ease-out), opacity 0.4s ease;
}

.js [data-curtain].is-in > * { transform: none; }

[data-parallax] { will-change: transform; }

.cr {
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
  height: 1.3em;
  line-height: 1.3;
  vertical-align: top;
}

.cr-l { display: block; white-space: nowrap; }

.cr-l span {
  display: inline-block;
  transform: translate3d(0, calc(var(--roll, 0) * -100%), 0);
  transition: transform 0.55s var(--ease-expo) calc(var(--i, 0) * 16ms);
}

a:hover > .cr,
a:focus-visible > .cr { --roll: 1; }

.frame .still { inset: auto; top: -10%; left: 0; width: 100%; height: 120%; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-split] .ln-i,
  .js [data-lines] .ln-i,
  .cr-l span,
  .js [data-curtain]::after,
  .js [data-curtain] > *,
  .site-header { transition: none !important; }
  .progress { display: none; }
}