/* Visible by default. The observer opts in only elements still below the fold. */
[data-reveal] {
  --delay:0ms
}
.motion-ready [data-reveal] {
  transition:opacity 950ms var(--ease) var(--delay),translate 1100ms var(--ease) var(--delay),filter 950ms var(--ease) var(--delay)
}
.motion-ready [data-reveal].is-pending {
  opacity:0;
  translate:0 44px;
  filter:blur(5px)
}
.motion-ready .scene-art.is-pending {
  translate:0 65px;
  filter:blur(2px)
}
.motion-ready .hero-mark.is-pending {
  translate:0 26px;
  filter:blur(6px)
}
.motion-ready .hero-wordmark.is-pending {
  translate:26px 0
}
.scene.is-entered .color-note {
  animation:paper-settle 1200ms var(--ease) both
}
.scene.is-entered .note-two {
  animation-delay:160ms
}
.scene.is-entered .journal-note {
  animation:paper-settle 1300ms var(--ease) 240ms both
}
.scene.is-entered .theme-colors i {
  animation:color-arrive 700ms var(--ease) both
}
.scene.is-entered .theme-colors i:nth-child(2) {
  animation-delay:100ms
}
.scene.is-entered .theme-colors i:nth-child(3) {
  animation-delay:200ms
}
.scene.is-entered .theme-colors i:nth-child(4) {
  animation-delay:300ms
}
@keyframes paper-settle {
  from {
    opacity:0;
    translate:0 24px;
    rotate:-5deg
  }
  to {
    opacity:1;
    translate:0 0;
    rotate:0deg
  }
}
@keyframes color-arrive {
  from {
    scale:.3;
    opacity:0
  }
  to {
    scale:1;
    opacity:1
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  [data-reveal].is-pending {
    opacity:1!important;
    translate:none!important;
    filter:none!important
  }
}