:root {
  --pointer-x: 0px;
  --pointer-y: 0px;
}

/* Content remains visible without JavaScript or IntersectionObserver. */
.is-motion-ready [data-reveal] {
  opacity: 0;
  transition: opacity 750ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.is-motion-ready [data-reveal="ledger"] {
  transform: perspective(1000px) rotateY(-5deg);
  transform-origin: left center;
  transition: opacity 650ms ease, transform 850ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.is-motion-ready [data-reveal="veil"] {
  clip-path: inset(0 8% 0 0);
  transition: opacity 850ms ease, clip-path 1100ms cubic-bezier(.19, 1, .22, 1);
}

.is-motion-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

[data-parallax] {
  translate: var(--pointer-x) var(--pointer-y);
  transition: translate 700ms cubic-bezier(.2, .75, .25, 1);
}

.is-entered .hero-title {
  animation: hero-type-reveal 1100ms cubic-bezier(.16, 1, .3, 1) both;
}

.is-entered .hero-copy {
  animation: hero-copy-reveal 1100ms 100ms ease both;
}

.is-entered .hero-scene {
  animation: hero-light-reveal 1500ms cubic-bezier(.2, .65, .2, 1) both;
}

.is-page-hidden *,
.is-page-hidden *::before,
.is-page-hidden *::after,
.is-scene-paused,
.is-scene-paused::before,
.is-scene-paused::after {
  animation-play-state: paused !important;
}

@keyframes hero-type-reveal {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(10px); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}

@keyframes hero-copy-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hero-light-reveal {
  from { opacity: .2; filter: brightness(.7); }
  to { opacity: 1; filter: brightness(1); }
}

@media (max-width: 640px) {
  .is-motion-ready [data-reveal="ledger"] { transform: perspective(1000px) rotateY(-3deg); }
  .is-motion-ready [data-reveal="ledger"].is-revealed { transform: none; }
  [data-parallax] { translate: 0 0; }
}