@greese/ui 0.0.0-stage → 1.1.0

package/dist/css/PageTransition.css

@@ -0,0 +1,991 @@
+@import './core.css';
+@layer greese.utilities {
+  @media (prefers-reduced-motion: no-preference) {
+    html::view-transition-old(*.greese-PageTransition),
+    html::view-transition-new(*.greese-PageTransition) {
+      animation-fill-mode: both;
+    }
+    html::view-transition-group(*.greese-PageTransition),
+    html::view-transition-old(*.greese-PageTransition),
+    html::view-transition-new(*.greese-PageTransition) {
+      animation-duration: var(--greese-motion-page-duration, var(--greese-duration-normal));
+      animation-timing-function: var(--greese-motion-page-ease, var(--greese-ease-out));
+    }
+    html::view-transition-new(*.greese-PageTransition--theme) {
+      animation-name: var(--greese-motion-page, greese-fade-in);
+    }
+    html::view-transition-old(*.greese-PageTransition--theme) {
+      animation-name: var(--greese-motion-page-exit, greese-fade-out);
+    }
+    html::view-transition-new(*.greese-PageTransition--theme-back) {
+      animation-name: var(--greese-motion-page-back, var(--greese-motion-page, greese-fade-in));
+    }
+    html::view-transition-old(*.greese-PageTransition--theme-back) {
+      animation-name: var(--greese-motion-page-back-exit, var(--greese-motion-page-exit, greese-fade-out));
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-fade-in) {
+      animation-name: greese-fade-in;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-fade-out) {
+      animation-name: greese-fade-out;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-scale-in) {
+      animation-name: greese-scale-in;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-scale-out) {
+      animation-name: greese-scale-out;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-blur-in) {
+      animation-name: greese-blur-in;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-blur-out) {
+      animation-name: greese-blur-out;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-slide-up) {
+      animation-name: greese-slide-up;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-slide-down) {
+      animation-name: greese-slide-down;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-slide-right) {
+      animation-name: greese-slide-right;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-slide-left) {
+      animation-name: greese-slide-left;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-pop) {
+      animation-name: greese-pop;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-squish) {
+      animation-name: greese-squish;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-tilt) {
+      animation-name: greese-tilt;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-glow) {
+      animation-name: greese-glow;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-wipe-right) {
+      animation-name: greese-wipe-right;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-wipe-out-right) {
+      animation-name: greese-wipe-out-right;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-wipe-left) {
+      animation-name: greese-wipe-left;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-wipe-out-left) {
+      animation-name: greese-wipe-out-left;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-wipe-up) {
+      animation-name: greese-wipe-up;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-wipe-out-up) {
+      animation-name: greese-wipe-out-up;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-wipe-down) {
+      animation-name: greese-wipe-down;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-wipe-out-down) {
+      animation-name: greese-wipe-out-down;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-wipe-down-right) {
+      animation-name: greese-wipe-down-right;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-wipe-out-down-right) {
+      animation-name: greese-wipe-out-down-right;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-wipe-down-left) {
+      animation-name: greese-wipe-down-left;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-wipe-out-down-left) {
+      animation-name: greese-wipe-out-down-left;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-wipe-up-right) {
+      animation-name: greese-wipe-up-right;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-wipe-out-up-right) {
+      animation-name: greese-wipe-out-up-right;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-wipe-up-left) {
+      animation-name: greese-wipe-up-left;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-wipe-out-up-left) {
+      animation-name: greese-wipe-out-up-left;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-wipe-open-x) {
+      animation-name: greese-wipe-open-x;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-wipe-open-y) {
+      animation-name: greese-wipe-open-y;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-wipe-close-x) {
+      animation-name: greese-wipe-close-x;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-wipe-close-y) {
+      animation-name: greese-wipe-close-y;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-iris-in) {
+      animation-name: greese-iris-in;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-iris-out) {
+      animation-name: greese-iris-out;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-iris-right) {
+      animation-name: greese-iris-right;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-iris-out-right) {
+      animation-name: greese-iris-out-right;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-iris-left) {
+      animation-name: greese-iris-left;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-iris-out-left) {
+      animation-name: greese-iris-out-left;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-iris-up) {
+      animation-name: greese-iris-up;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-iris-out-up) {
+      animation-name: greese-iris-out-up;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-iris-down) {
+      animation-name: greese-iris-down;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-iris-out-down) {
+      animation-name: greese-iris-out-down;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-iris-down-right) {
+      animation-name: greese-iris-down-right;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-iris-out-down-right) {
+      animation-name: greese-iris-out-down-right;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-iris-down-left) {
+      animation-name: greese-iris-down-left;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-iris-out-down-left) {
+      animation-name: greese-iris-out-down-left;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-iris-up-right) {
+      animation-name: greese-iris-up-right;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-iris-out-up-right) {
+      animation-name: greese-iris-out-up-right;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-iris-up-left) {
+      animation-name: greese-iris-up-left;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-iris-out-up-left) {
+      animation-name: greese-iris-out-up-left;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-turn-x) {
+      animation-name: greese-turn-x;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-turn-y) {
+      animation-name: greese-turn-y;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-depth) {
+      animation-name: greese-depth;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-hinge) {
+      animation-name: greese-hinge;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-flip-over-up) {
+      animation-name: greese-flip-over-up;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-flip-over-out-up) {
+      animation-name: greese-flip-over-out-up;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-flip-over-down) {
+      animation-name: greese-flip-over-down;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-flip-over-out-down) {
+      animation-name: greese-flip-over-out-down;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-flip-over-left) {
+      animation-name: greese-flip-over-left;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-flip-over-out-left) {
+      animation-name: greese-flip-over-out-left;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-flip-over-right) {
+      animation-name: greese-flip-over-right;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-flip-over-out-right) {
+      animation-name: greese-flip-over-out-right;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-fade-up) {
+      animation-name: greese-fade-up;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-fade-down) {
+      animation-name: greese-fade-down;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-fade-start) {
+      animation-name: greese-fade-start;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-fade-end) {
+      animation-name: greese-fade-end;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-fade-out-up) {
+      animation-name: greese-fade-out-up;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-fade-out-down) {
+      animation-name: greese-fade-out-down;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-pop-in) {
+      animation-name: greese-pop-in;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-pop-out) {
+      animation-name: greese-pop-out;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-rise) {
+      animation-name: greese-rise;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-fall) {
+      animation-name: greese-fall;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-pocket-right) {
+      animation-name: greese-pocket-right;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-pocket-out-right) {
+      animation-name: greese-pocket-out-right;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-pocket-left) {
+      animation-name: greese-pocket-left;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-pocket-out-left) {
+      animation-name: greese-pocket-out-left;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-pocket-up) {
+      animation-name: greese-pocket-up;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-pocket-out-up) {
+      animation-name: greese-pocket-out-up;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-pocket-down) {
+      animation-name: greese-pocket-down;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-pocket-out-down) {
+      animation-name: greese-pocket-out-down;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-pocket-down-right) {
+      animation-name: greese-pocket-down-right;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-pocket-out-down-right) {
+      animation-name: greese-pocket-out-down-right;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-pocket-down-left) {
+      animation-name: greese-pocket-down-left;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-pocket-out-down-left) {
+      animation-name: greese-pocket-out-down-left;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-pocket-up-right) {
+      animation-name: greese-pocket-up-right;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-pocket-out-up-right) {
+      animation-name: greese-pocket-out-up-right;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-pocket-up-left) {
+      animation-name: greese-pocket-up-left;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-pocket-out-up-left) {
+      animation-name: greese-pocket-out-up-left;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-flip-up) {
+      animation-name: greese-flip-up;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-flip-out-up) {
+      animation-name: greese-flip-out-up;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-flip-down) {
+      animation-name: greese-flip-down;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-flip-out-down) {
+      animation-name: greese-flip-out-down;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-flip-left) {
+      animation-name: greese-flip-left;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-flip-out-left) {
+      animation-name: greese-flip-out-left;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-flip-right) {
+      animation-name: greese-flip-right;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-flip-out-right) {
+      animation-name: greese-flip-out-right;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-depth-in) {
+      animation-name: greese-depth-in;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-depth-out) {
+      animation-name: greese-depth-out;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-swing-in) {
+      animation-name: greese-swing-in;
+    }
+    html::view-transition-old(*.greese-PageTransition--exit-swing-out) {
+      animation-name: greese-swing-out;
+    }
+    html::view-transition-new(*.greese-PageTransition--enter-none),
+    html::view-transition-old(*.greese-PageTransition--exit-none) {
+      animation-name: none;
+    }
+    html::view-transition-new(*.greese-PageTransition--route-enter) {
+      animation-name: var(--greese-page-enter);
+    }
+    html::view-transition-old(*.greese-PageTransition--route-exit) {
+      animation-name: var(--greese-page-exit);
+    }
+    html::view-transition-group(*.greese-PageTransition--route-pace),
+    html::view-transition-old(*.greese-PageTransition--route-pace),
+    html::view-transition-new(*.greese-PageTransition--route-pace) {
+      animation-duration: var(--greese-page-duration, var(--greese-motion-page-duration, var(--greese-duration-normal)));
+      animation-timing-function: var(--greese-page-ease, var(--greese-motion-page-ease, var(--greese-ease-out)));
+    }
+    html::view-transition-group(*.greese-PageTransition--share) {
+      animation-duration: var(--greese-motion-share-duration, var(--greese-motion-page-duration, var(--greese-duration-normal)));
+      animation-timing-function: var(--greese-motion-share-ease, var(--greese-motion-page-ease, var(--greese-ease-out)));
+    }
+    html::view-transition-old(*.greese-PageTransition--left) {
+      animation-name: greese-fade-out;
+    }
+    html::view-transition-old(*.greese-PageTransition--page),
+    html::view-transition-new(*.greese-PageTransition--page) {
+      backface-visibility: hidden;
+      block-size: min(100%, 100dvh);
+      object-fit: none;
+      object-position: 50% 0;
+    }
+    html::view-transition-old(*.greese-PageTransition--page) {
+      inset-block-start: var(--greese-page-scrolled, 0);
+      object-position: 50% calc(-1 * var(--greese-page-scrolled, 0px));
+    }
+    @keyframes greese-fade-out {
+      from {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+      }
+    }
+    @keyframes greese-scale-out {
+      from {
+        scale: 1;
+      }
+      to {
+        scale: 0;
+      }
+    }
+    @keyframes greese-blur-out {
+      from {
+        filter: blur(0px);
+      }
+      to {
+        filter: blur(8px);
+      }
+    }
+    @keyframes greese-squish {
+      from {
+        scale: 1;
+      }
+      to {
+        scale: 0.96;
+      }
+    }
+    @keyframes greese-tilt {
+      from {
+        rotate: 0deg;
+      }
+      to {
+        rotate: -2deg;
+      }
+    }
+    @keyframes greese-glow {
+      from {
+        filter: brightness(1);
+      }
+      to {
+        filter: brightness(1.12);
+      }
+    }
+    @keyframes greese-wipe-out-right {
+      from {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 50%;
+      }
+      to {
+        mask-size: 0% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 50%;
+      }
+    }
+    @keyframes greese-wipe-out-left {
+      from {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 50%;
+      }
+      to {
+        mask-size: 0% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 50%;
+      }
+    }
+    @keyframes greese-wipe-out-up {
+      from {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 0%;
+      }
+      to {
+        mask-size: 100% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 0%;
+      }
+    }
+    @keyframes greese-wipe-out-down {
+      from {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 100%;
+      }
+      to {
+        mask-size: 100% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 100%;
+      }
+    }
+    @keyframes greese-wipe-out-down-right {
+      from {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 100%;
+      }
+      to {
+        mask-size: 0% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 100%;
+      }
+    }
+    @keyframes greese-wipe-out-down-left {
+      from {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 100%;
+      }
+      to {
+        mask-size: 0% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 100%;
+      }
+    }
+    @keyframes greese-wipe-out-up-right {
+      from {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 0%;
+      }
+      to {
+        mask-size: 0% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 0%;
+      }
+    }
+    @keyframes greese-wipe-out-up-left {
+      from {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 0%;
+      }
+      to {
+        mask-size: 0% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 0%;
+      }
+    }
+    @keyframes greese-wipe-close-x {
+      from {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+      }
+      to {
+        mask-size: 0% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+      }
+    }
+    @keyframes greese-wipe-close-y {
+      from {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+      }
+      to {
+        mask-size: 100% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+      }
+    }
+    @keyframes greese-iris-out {
+      from {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(closest-side, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+      }
+      to {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(closest-side, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+      }
+    }
+    @keyframes greese-iris-out-right {
+      from {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(farthest-side at 100% 50%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 100% 50%;
+      }
+      to {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(farthest-side at 100% 50%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 100% 50%;
+      }
+    }
+    @keyframes greese-iris-out-left {
+      from {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(farthest-side at 0% 50%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 0% 50%;
+      }
+      to {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(farthest-side at 0% 50%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 0% 50%;
+      }
+    }
+    @keyframes greese-iris-out-up {
+      from {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(farthest-side at 50% 0%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 50% 0%;
+      }
+      to {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(farthest-side at 50% 0%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 50% 0%;
+      }
+    }
+    @keyframes greese-iris-out-down {
+      from {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(farthest-side at 50% 100%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 50% 100%;
+      }
+      to {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(farthest-side at 50% 100%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 50% 100%;
+      }
+    }
+    @keyframes greese-iris-out-down-right {
+      from {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(farthest-side at 100% 100%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 100% 100%;
+      }
+      to {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(farthest-side at 100% 100%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 100% 100%;
+      }
+    }
+    @keyframes greese-iris-out-down-left {
+      from {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(farthest-side at 0% 100%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 0% 100%;
+      }
+      to {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(farthest-side at 0% 100%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 0% 100%;
+      }
+    }
+    @keyframes greese-iris-out-up-right {
+      from {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(farthest-side at 100% 0%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 100% 0%;
+      }
+      to {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(farthest-side at 100% 0%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 100% 0%;
+      }
+    }
+    @keyframes greese-iris-out-up-left {
+      from {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(farthest-side at 0% 0%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 0% 0%;
+      }
+      to {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(farthest-side at 0% 0%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 0% 0%;
+      }
+    }
+    @keyframes greese-flip-over-out-up {
+      from {
+        transform: perspective(2000px) rotateX(0deg);
+        backface-visibility: hidden;
+      }
+      to {
+        transform: perspective(2000px) rotateX(180deg);
+        backface-visibility: hidden;
+      }
+    }
+    @keyframes greese-flip-over-out-down {
+      from {
+        transform: perspective(2000px) rotateX(0deg);
+        backface-visibility: hidden;
+      }
+      to {
+        transform: perspective(2000px) rotateX(-180deg);
+        backface-visibility: hidden;
+      }
+    }
+    @keyframes greese-flip-over-out-left {
+      from {
+        transform: perspective(2000px) rotateY(0deg);
+        backface-visibility: hidden;
+      }
+      to {
+        transform: perspective(2000px) rotateY(180deg);
+        backface-visibility: hidden;
+      }
+    }
+    @keyframes greese-flip-over-out-right {
+      from {
+        transform: perspective(2000px) rotateY(0deg);
+        backface-visibility: hidden;
+      }
+      to {
+        transform: perspective(2000px) rotateY(-180deg);
+        backface-visibility: hidden;
+      }
+    }
+    @keyframes greese-fade-out-up {
+      from {
+        translate: 0px 0px;
+        opacity: 1;
+      }
+      to {
+        translate: 0px calc(-1 * var(--greese-motion-distance, 1rem));
+        opacity: 0;
+      }
+    }
+    @keyframes greese-fade-out-down {
+      from {
+        translate: 0px 0px;
+        opacity: 1;
+      }
+      to {
+        translate: 0px var(--greese-motion-distance, 1rem);
+        opacity: 0;
+      }
+    }
+    @keyframes greese-pop-out {
+      from {
+        scale: 1;
+      }
+      40% {
+        scale: 1.04;
+        opacity: 1;
+      }
+      to {
+        scale: 0.8;
+        opacity: 0;
+      }
+    }
+    @keyframes greese-rise {
+      from {
+        translate: 0px 0px;
+        scale: 1;
+      }
+      to {
+        translate: 0px -4px;
+        scale: 1.02;
+      }
+    }
+    @keyframes greese-fall {
+      from {
+        translate: 0px 0px;
+        scale: 1;
+      }
+      to {
+        translate: 0px 4px;
+        scale: 0.98;
+      }
+    }
+    @keyframes greese-pocket-out-right {
+      from {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 50%;
+      }
+      to {
+        translate: 100% 0px;
+        mask-size: 0% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 50%;
+      }
+    }
+    @keyframes greese-pocket-out-left {
+      from {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 50%;
+      }
+      to {
+        translate: -100% 0px;
+        mask-size: 0% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 50%;
+      }
+    }
+    @keyframes greese-pocket-out-up {
+      from {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 100%;
+      }
+      to {
+        translate: 0px -100%;
+        mask-size: 100% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 100%;
+      }
+    }
+    @keyframes greese-pocket-out-down {
+      from {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 0%;
+      }
+      to {
+        translate: 0px 100%;
+        mask-size: 100% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 0%;
+      }
+    }
+    @keyframes greese-pocket-out-down-right {
+      from {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 0%;
+      }
+      to {
+        translate: 100% 100%;
+        mask-size: 0% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 0%;
+      }
+    }
+    @keyframes greese-pocket-out-down-left {
+      from {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 0%;
+      }
+      to {
+        translate: -100% 100%;
+        mask-size: 0% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 0%;
+      }
+    }
+    @keyframes greese-pocket-out-up-right {
+      from {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 100%;
+      }
+      to {
+        translate: 100% -100%;
+        mask-size: 0% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 100%;
+      }
+    }
+    @keyframes greese-pocket-out-up-left {
+      from {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 100%;
+      }
+      to {
+        translate: -100% -100%;
+        mask-size: 0% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 100%;
+      }
+    }
+    @keyframes greese-flip-out-up {
+      from {
+        transform: perspective(800px) rotateX(0deg);
+      }
+      50% {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+        transform: perspective(800px) rotateX(75deg);
+      }
+    }
+    @keyframes greese-flip-out-down {
+      from {
+        transform: perspective(800px) rotateX(0deg);
+      }
+      50% {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+        transform: perspective(800px) rotateX(-75deg);
+      }
+    }
+    @keyframes greese-flip-out-left {
+      from {
+        transform: perspective(800px) rotateY(0deg);
+      }
+      50% {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+        transform: perspective(800px) rotateY(75deg);
+      }
+    }
+    @keyframes greese-flip-out-right {
+      from {
+        transform: perspective(800px) rotateY(0deg);
+      }
+      50% {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+        transform: perspective(800px) rotateY(-75deg);
+      }
+    }
+    @keyframes greese-depth-out {
+      from {
+        transform: perspective(800px) translateZ(0px);
+      }
+      40% {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+        transform: perspective(800px) translateZ(-240px);
+      }
+    }
+    @keyframes greese-swing-out {
+      from {
+        transform: perspective(800px) rotateX(0deg);
+        transform-origin: 50% 0%;
+      }
+      50% {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+        transform: perspective(800px) rotateX(-80deg);
+        transform-origin: 50% 0%;
+      }
+    }
+  }
+  html::view-transition-group(*.greese-PageTransition--still),
+  html::view-transition-old(*.greese-PageTransition--still),
+  html::view-transition-new(*.greese-PageTransition--still) {
+    animation: none;
+  }
+  html::view-transition-group(*.greese-PageTransition--still) {
+    z-index: 1;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    html::view-transition-group(*.greese-PageTransition),
+    html::view-transition-old(*.greese-PageTransition),
+    html::view-transition-new(*.greese-PageTransition) {
+      animation: none;
+    }
+  }
+}