@layer motion {
  /* Content only starts hidden when JS runs and nobody asked for less motion */
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      opacity: 0;
      translate: 0 1.75rem;
      transition:
        opacity 0.9s var(--ease-out) var(--delay, 0s),
        translate 0.9s var(--ease-out) var(--delay, 0s);
    }

    [data-reveal="mask"] {
      opacity: 1;
      translate: none;
      clip-path: inset(0 -0.2em 100% -0.2em);
      transform: translateY(0.35em);
      transition:
        clip-path 1.1s var(--ease-out) var(--delay, 0s),
        transform 1.1s var(--ease-out) var(--delay, 0s);
    }

    [data-reveal].is-visible {
      opacity: 1;
      translate: none;
    }

    [data-reveal="mask"].is-visible {
      clip-path: inset(-0.2em -0.2em -0.3em -0.2em);
      transform: none;
    }
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .timeline::after {
        animation: grow linear both;
        animation-timeline: view();
        animation-range: entry 20% cover 70%;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0s !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0s !important;
      scroll-behavior: auto !important;
    }
  }

  @keyframes drift {
    from { translate: 0 0; scale: 1; }
    to { translate: -6% 4%; scale: 1.08; }
  }

  @keyframes ping {
    0% { scale: 1; opacity: 0.7; }
    80%, 100% { scale: 3; opacity: 0; }
  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
  }

  @keyframes load {
    from { translate: -30% 0; }
    to { translate: 60% 0; }
  }

  @keyframes flow {
    from { stroke-dashoffset: 106; }
    to { stroke-dashoffset: 0; }
  }

  @keyframes sort {
    0%, 12% { height: var(--from); }
    40%, 75% { height: var(--to); }
    100% { height: var(--from); }
  }

  @keyframes playhead {
    from { left: calc(0.9rem + var(--label)); }
    to { left: calc(100% - 0.9rem); }
  }

  @keyframes marquee {
    to { translate: -100% 0; }
  }

  @keyframes grow {
    from { scale: 1 0; }
    to { scale: 1 1; }
  }

  @keyframes fade-in {
    from { opacity: 0; }
  }

  @keyframes vt-out {
    to { opacity: 0; translate: 0 -0.75rem; }
  }

  @keyframes vt-in {
    from { opacity: 0; translate: 0 1.25rem; }
  }
}

/* Cross-document page transitions, outside of the layers on purpose */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

::view-transition-old(root) {
  animation: 0.3s var(--ease-in-out) both vt-out;
}

::view-transition-new(root) {
  animation: 0.55s var(--ease-out) both vt-in;
}

::view-transition-group(project-cover) {
  animation-duration: 0.6s;
  animation-timing-function: var(--ease-out);
}