/* Compose with the existing paper cuts and the character's own animations. */
#main[data-screen="home"] .v2-hero-parallax-surface {
  position: absolute;
  inset: -4px;
  pointer-events: none;
  background: linear-gradient(153deg, transparent 0 63%, #11111219 63% 68%, transparent 68%);
}

#main[data-screen="home"] .v2-hero[data-parallax-active] .hero-type-stage {
  touch-action: pan-y pinch-zoom;
}

#main[data-screen="home"] .v2-hero[data-parallax-active] :is(.v2-hero-parallax-surface, .hero-cut) {
  translate: var(--px-back-x) var(--px-back-y);
  transition: translate var(--px-recovery, 0ms) cubic-bezier(.22, 1, .36, 1);
}
#main[data-screen="home"] .v2-hero[data-parallax-active]::before,
#main[data-screen="home"] .v2-hero[data-parallax-active] .v2-hero-grid {
  transform: translate3d(var(--px-dots-x), var(--px-dots-y), 0);
  transition: transform var(--px-recovery, 0ms) cubic-bezier(.22, 1, .36, 1);
}
#main[data-screen="home"] .v2-hero[data-parallax-active] .frost-character > svg {
  transform: translate3d(var(--px-figure-x), var(--px-figure-y), 0);
  transition: transform var(--px-recovery, 0ms) cubic-bezier(.22, 1, .36, 1);
}
#main[data-screen="home"] .v2-hero[data-parallax-active] .v2-hero-title {
  transform: translate3d(var(--px-type-x), var(--px-type-y), 0);
  transition: transform var(--px-recovery, 0ms) cubic-bezier(.22, 1, .36, 1);
}