@greese/ui 0.0.0-stage → 1.0.0

package/dist/css/Motion.css

@@ -0,0 +1,1356 @@
+@import './core.css';
+@layer greese.utilities {
+  :root {
+    --greese-ease-linear: linear;
+    --greese-ease-ease: ease;
+    --greese-ease-ease-in: ease-in;
+    --greese-ease-ease-out: ease-out;
+    --greese-ease-ease-in-out: ease-in-out;
+    --greese-ease-in: cubic-bezier(0.32, 0, 0.67, 0);
+    --greese-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
+    --greese-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  }
+  .greese-Motion:dir(rtl) {
+    --greese-motion-dir: -1;
+  }
+  .greese-Motion--enter-theme,
+  .greese-Motion--view-theme {
+    --greese-motion-name: var(--greese-motion-theme, greese-fade-up);
+  }
+  .greese-Motion--enter-fade-in,
+  .greese-Motion--view-fade-in {
+    --greese-motion-name: greese-fade-in;
+  }
+  .greese-Motion--exit-fade-out {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: none;
+  }
+  .greese-Motion--enter-scale-in,
+  .greese-Motion--view-scale-in {
+    --greese-motion-name: greese-scale-in;
+  }
+  .greese-Motion--exit-scale-out {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 0;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: none;
+  }
+  .greese-Motion--enter-blur-in,
+  .greese-Motion--view-blur-in {
+    --greese-motion-name: greese-blur-in;
+  }
+  .greese-Motion--exit-blur-out {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: none;
+  }
+  .greese-Motion--enter-slide-up,
+  .greese-Motion--view-slide-up {
+    --greese-motion-name: greese-slide-up;
+  }
+  .greese-Motion--enter-slide-down,
+  .greese-Motion--view-slide-down {
+    --greese-motion-name: greese-slide-down;
+  }
+  .greese-Motion--enter-slide-right,
+  .greese-Motion--view-slide-right {
+    --greese-motion-name: greese-slide-right;
+  }
+  .greese-Motion--enter-slide-left,
+  .greese-Motion--view-slide-left {
+    --greese-motion-name: greese-slide-left;
+  }
+  .greese-Motion--enter-pop,
+  .greese-Motion--view-pop {
+    --greese-motion-name: greese-pop;
+  }
+  .greese-Motion--exit-squish {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 0.96;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: none;
+  }
+  .greese-Motion--exit-tilt {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: none;
+  }
+  .greese-Motion--exit-glow {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: none;
+  }
+  .greese-Motion--enter-wipe-right,
+  .greese-Motion--view-wipe-right {
+    --greese-motion-name: greese-wipe-right;
+  }
+  .greese-Motion--exit-wipe-out-right {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-exit-mask-size: 0% 100%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 100% 50%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 100% 100%;
+  }
+  .greese-Motion--enter-wipe-left,
+  .greese-Motion--view-wipe-left {
+    --greese-motion-name: greese-wipe-left;
+  }
+  .greese-Motion--exit-wipe-out-left {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-exit-mask-size: 0% 100%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 0% 50%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 100% 100%;
+  }
+  .greese-Motion--enter-wipe-up,
+  .greese-Motion--view-wipe-up {
+    --greese-motion-name: greese-wipe-up;
+  }
+  .greese-Motion--exit-wipe-out-up {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-exit-mask-size: 100% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 50% 0%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 100% 100%;
+  }
+  .greese-Motion--enter-wipe-down,
+  .greese-Motion--view-wipe-down {
+    --greese-motion-name: greese-wipe-down;
+  }
+  .greese-Motion--exit-wipe-out-down {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-exit-mask-size: 100% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 50% 100%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 100% 100%;
+  }
+  .greese-Motion--enter-wipe-down-right,
+  .greese-Motion--view-wipe-down-right {
+    --greese-motion-name: greese-wipe-down-right;
+  }
+  .greese-Motion--exit-wipe-out-down-right {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-exit-mask-size: 0% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 100% 100%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 100% 100%;
+  }
+  .greese-Motion--enter-wipe-down-left,
+  .greese-Motion--view-wipe-down-left {
+    --greese-motion-name: greese-wipe-down-left;
+  }
+  .greese-Motion--exit-wipe-out-down-left {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-exit-mask-size: 0% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 0% 100%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 100% 100%;
+  }
+  .greese-Motion--enter-wipe-up-right,
+  .greese-Motion--view-wipe-up-right {
+    --greese-motion-name: greese-wipe-up-right;
+  }
+  .greese-Motion--exit-wipe-out-up-right {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-exit-mask-size: 0% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 100% 0%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 100% 100%;
+  }
+  .greese-Motion--enter-wipe-up-left,
+  .greese-Motion--view-wipe-up-left {
+    --greese-motion-name: greese-wipe-up-left;
+  }
+  .greese-Motion--exit-wipe-out-up-left {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-exit-mask-size: 0% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 0% 0%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 100% 100%;
+  }
+  .greese-Motion--enter-wipe-open-x,
+  .greese-Motion--view-wipe-open-x {
+    --greese-motion-name: greese-wipe-open-x;
+  }
+  .greese-Motion--enter-wipe-open-y,
+  .greese-Motion--view-wipe-open-y {
+    --greese-motion-name: greese-wipe-open-y;
+  }
+  .greese-Motion--exit-wipe-close-x {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-exit-mask-size: 0% 100%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 50% 50%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 100% 100%;
+  }
+  .greese-Motion--exit-wipe-close-y {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-exit-mask-size: 100% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 50% 50%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 100% 100%;
+  }
+  .greese-Motion--enter-iris-in,
+  .greese-Motion--view-iris-in {
+    --greese-motion-name: greese-iris-in;
+  }
+  .greese-Motion--exit-iris-out {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: radial-gradient(closest-side, black 98%, transparent);
+    --greese-motion-exit-mask-size: 0% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 50% 50%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 142% 142%;
+  }
+  .greese-Motion--enter-iris-right,
+  .greese-Motion--view-iris-right {
+    --greese-motion-name: greese-iris-right;
+  }
+  .greese-Motion--exit-iris-out-right {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: radial-gradient(farthest-side at 100% 50%, black 98%, transparent);
+    --greese-motion-exit-mask-size: 0% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 100% 50%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 142% 142%;
+  }
+  .greese-Motion--enter-iris-left,
+  .greese-Motion--view-iris-left {
+    --greese-motion-name: greese-iris-left;
+  }
+  .greese-Motion--exit-iris-out-left {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: radial-gradient(farthest-side at 0% 50%, black 98%, transparent);
+    --greese-motion-exit-mask-size: 0% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 0% 50%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 142% 142%;
+  }
+  .greese-Motion--enter-iris-up,
+  .greese-Motion--view-iris-up {
+    --greese-motion-name: greese-iris-up;
+  }
+  .greese-Motion--exit-iris-out-up {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: radial-gradient(farthest-side at 50% 0%, black 98%, transparent);
+    --greese-motion-exit-mask-size: 0% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 50% 0%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 142% 142%;
+  }
+  .greese-Motion--enter-iris-down,
+  .greese-Motion--view-iris-down {
+    --greese-motion-name: greese-iris-down;
+  }
+  .greese-Motion--exit-iris-out-down {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: radial-gradient(farthest-side at 50% 100%, black 98%, transparent);
+    --greese-motion-exit-mask-size: 0% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 50% 100%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 142% 142%;
+  }
+  .greese-Motion--enter-iris-down-right,
+  .greese-Motion--view-iris-down-right {
+    --greese-motion-name: greese-iris-down-right;
+  }
+  .greese-Motion--exit-iris-out-down-right {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: radial-gradient(farthest-side at 100% 100%, black 98%, transparent);
+    --greese-motion-exit-mask-size: 0% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 100% 100%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 142% 142%;
+  }
+  .greese-Motion--enter-iris-down-left,
+  .greese-Motion--view-iris-down-left {
+    --greese-motion-name: greese-iris-down-left;
+  }
+  .greese-Motion--exit-iris-out-down-left {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: radial-gradient(farthest-side at 0% 100%, black 98%, transparent);
+    --greese-motion-exit-mask-size: 0% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 0% 100%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 142% 142%;
+  }
+  .greese-Motion--enter-iris-up-right,
+  .greese-Motion--view-iris-up-right {
+    --greese-motion-name: greese-iris-up-right;
+  }
+  .greese-Motion--exit-iris-out-up-right {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: radial-gradient(farthest-side at 100% 0%, black 98%, transparent);
+    --greese-motion-exit-mask-size: 0% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 100% 0%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 142% 142%;
+  }
+  .greese-Motion--enter-iris-up-left,
+  .greese-Motion--view-iris-up-left {
+    --greese-motion-name: greese-iris-up-left;
+  }
+  .greese-Motion--exit-iris-out-up-left {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: radial-gradient(farthest-side at 0% 0%, black 98%, transparent);
+    --greese-motion-exit-mask-size: 0% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 0% 0%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 142% 142%;
+  }
+  .greese-Motion--enter-turn-x,
+  .greese-Motion--view-turn-x {
+    --greese-motion-name: greese-turn-x;
+  }
+  .greese-Motion--enter-turn-y,
+  .greese-Motion--view-turn-y {
+    --greese-motion-name: greese-turn-y;
+  }
+  .greese-Motion--enter-depth,
+  .greese-Motion--view-depth {
+    --greese-motion-name: greese-depth;
+  }
+  .greese-Motion--enter-hinge,
+  .greese-Motion--view-hinge {
+    --greese-motion-name: greese-hinge;
+  }
+  .greese-Motion--enter-flip-over-up,
+  .greese-Motion--view-flip-over-up {
+    --greese-motion-name: greese-flip-over-up;
+  }
+  .greese-Motion--exit-flip-over-out-up {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: perspective(2000px) rotateX(180deg);
+  }
+  .greese-Motion--enter-flip-over-down,
+  .greese-Motion--view-flip-over-down {
+    --greese-motion-name: greese-flip-over-down;
+  }
+  .greese-Motion--exit-flip-over-out-down {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: perspective(2000px) rotateX(-180deg);
+  }
+  .greese-Motion--enter-flip-over-left,
+  .greese-Motion--view-flip-over-left {
+    --greese-motion-name: greese-flip-over-left;
+  }
+  .greese-Motion--exit-flip-over-out-left {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: perspective(2000px) rotateY(180deg);
+  }
+  .greese-Motion--enter-flip-over-right,
+  .greese-Motion--view-flip-over-right {
+    --greese-motion-name: greese-flip-over-right;
+  }
+  .greese-Motion--exit-flip-over-out-right {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: perspective(2000px) rotateY(-180deg);
+  }
+  .greese-Motion--enter-fade-up,
+  .greese-Motion--view-fade-up {
+    --greese-motion-name: greese-fade-up;
+  }
+  .greese-Motion--enter-fade-down,
+  .greese-Motion--view-fade-down {
+    --greese-motion-name: greese-fade-down;
+  }
+  .greese-Motion--enter-fade-start,
+  .greese-Motion--view-fade-start {
+    --greese-motion-name: greese-fade-start;
+  }
+  .greese-Motion--enter-fade-end,
+  .greese-Motion--view-fade-end {
+    --greese-motion-name: greese-fade-end;
+  }
+  .greese-Motion--exit-fade-out-up {
+    --greese-motion-exit-translate: 0px calc(-1 * var(--greese-motion-distance, 1rem));
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: none;
+  }
+  .greese-Motion--exit-fade-out-down {
+    --greese-motion-exit-translate: 0px var(--greese-motion-distance, 1rem);
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: none;
+  }
+  .greese-Motion--enter-pop-in,
+  .greese-Motion--view-pop-in {
+    --greese-motion-name: greese-pop-in;
+  }
+  .greese-Motion--exit-pop-out {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 0.8;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: none;
+  }
+  .greese-Motion--exit-rise {
+    --greese-motion-exit-translate: 0px -4px;
+    --greese-motion-exit-scale: 1.02;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: none;
+  }
+  .greese-Motion--exit-fall {
+    --greese-motion-exit-translate: 0px 4px;
+    --greese-motion-exit-scale: 0.98;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: none;
+  }
+  .greese-Motion--enter-pocket-right,
+  .greese-Motion--view-pocket-right {
+    --greese-motion-name: greese-pocket-right;
+  }
+  .greese-Motion--exit-pocket-out-right {
+    --greese-motion-exit-translate: 100% 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-exit-mask-size: 0% 100%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 0% 50%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 100% 100%;
+  }
+  .greese-Motion--enter-pocket-left,
+  .greese-Motion--view-pocket-left {
+    --greese-motion-name: greese-pocket-left;
+  }
+  .greese-Motion--exit-pocket-out-left {
+    --greese-motion-exit-translate: -100% 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-exit-mask-size: 0% 100%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 100% 50%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 100% 100%;
+  }
+  .greese-Motion--enter-pocket-up,
+  .greese-Motion--view-pocket-up {
+    --greese-motion-name: greese-pocket-up;
+  }
+  .greese-Motion--exit-pocket-out-up {
+    --greese-motion-exit-translate: 0px -100%;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-exit-mask-size: 100% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 50% 100%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 100% 100%;
+  }
+  .greese-Motion--enter-pocket-down,
+  .greese-Motion--view-pocket-down {
+    --greese-motion-name: greese-pocket-down;
+  }
+  .greese-Motion--exit-pocket-out-down {
+    --greese-motion-exit-translate: 0px 100%;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-exit-mask-size: 100% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 50% 0%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 100% 100%;
+  }
+  .greese-Motion--enter-pocket-down-right,
+  .greese-Motion--view-pocket-down-right {
+    --greese-motion-name: greese-pocket-down-right;
+  }
+  .greese-Motion--exit-pocket-out-down-right {
+    --greese-motion-exit-translate: 100% 100%;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-exit-mask-size: 0% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 0% 0%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 100% 100%;
+  }
+  .greese-Motion--enter-pocket-down-left,
+  .greese-Motion--view-pocket-down-left {
+    --greese-motion-name: greese-pocket-down-left;
+  }
+  .greese-Motion--exit-pocket-out-down-left {
+    --greese-motion-exit-translate: -100% 100%;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-exit-mask-size: 0% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 100% 0%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 100% 100%;
+  }
+  .greese-Motion--enter-pocket-up-right,
+  .greese-Motion--view-pocket-up-right {
+    --greese-motion-name: greese-pocket-up-right;
+  }
+  .greese-Motion--exit-pocket-out-up-right {
+    --greese-motion-exit-translate: 100% -100%;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-exit-mask-size: 0% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 0% 100%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 100% 100%;
+  }
+  .greese-Motion--enter-pocket-up-left,
+  .greese-Motion--view-pocket-up-left {
+    --greese-motion-name: greese-pocket-up-left;
+  }
+  .greese-Motion--exit-pocket-out-up-left {
+    --greese-motion-exit-translate: -100% -100%;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 1;
+    --greese-motion-exit-mask-image: linear-gradient(black, black);
+    --greese-motion-exit-mask-size: 0% 0%;
+    --greese-motion-exit-mask-repeat: no-repeat;
+    --greese-motion-exit-mask-position: 100% 100%;
+    --greese-motion-exit-transform: none;
+    --greese-motion-exit-mask-from: 100% 100%;
+  }
+  .greese-Motion--enter-flip-up,
+  .greese-Motion--view-flip-up {
+    --greese-motion-name: greese-flip-up;
+  }
+  .greese-Motion--exit-flip-out-up {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: perspective(800px) rotateX(75deg);
+  }
+  .greese-Motion--enter-flip-down,
+  .greese-Motion--view-flip-down {
+    --greese-motion-name: greese-flip-down;
+  }
+  .greese-Motion--exit-flip-out-down {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: perspective(800px) rotateX(-75deg);
+  }
+  .greese-Motion--enter-flip-left,
+  .greese-Motion--view-flip-left {
+    --greese-motion-name: greese-flip-left;
+  }
+  .greese-Motion--exit-flip-out-left {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: perspective(800px) rotateY(75deg);
+  }
+  .greese-Motion--enter-flip-right,
+  .greese-Motion--view-flip-right {
+    --greese-motion-name: greese-flip-right;
+  }
+  .greese-Motion--exit-flip-out-right {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: perspective(800px) rotateY(-75deg);
+  }
+  .greese-Motion--enter-depth-in,
+  .greese-Motion--view-depth-in {
+    --greese-motion-name: greese-depth-in;
+  }
+  .greese-Motion--exit-depth-out {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: perspective(800px) translateZ(-240px);
+  }
+  .greese-Motion--enter-swing-in,
+  .greese-Motion--view-swing-in {
+    --greese-motion-name: greese-swing-in;
+  }
+  .greese-Motion--exit-swing-out {
+    --greese-motion-exit-translate: 0px 0px;
+    --greese-motion-exit-scale: 1;
+    --greese-motion-exit-opacity: 0;
+    --greese-motion-exit-mask-image: none;
+    --greese-motion-exit-transform: perspective(800px) rotateX(-80deg);
+    --greese-motion-exit-transform-origin: 50% 0%;
+  }
+  @supports (order: sibling-index()) {
+    .greese-Motion--stagger > * {
+      --greese-motion-index: min(sibling-index() - 1, 24);
+    }
+  }
+  @supports not (order: sibling-index()) {
+    .greese-Motion--stagger > :nth-child(1) {
+      --greese-motion-index: 0;
+    }
+    .greese-Motion--stagger > :nth-child(2) {
+      --greese-motion-index: 1;
+    }
+    .greese-Motion--stagger > :nth-child(3) {
+      --greese-motion-index: 2;
+    }
+    .greese-Motion--stagger > :nth-child(4) {
+      --greese-motion-index: 3;
+    }
+    .greese-Motion--stagger > :nth-child(5) {
+      --greese-motion-index: 4;
+    }
+    .greese-Motion--stagger > :nth-child(6) {
+      --greese-motion-index: 5;
+    }
+    .greese-Motion--stagger > :nth-child(7) {
+      --greese-motion-index: 6;
+    }
+    .greese-Motion--stagger > :nth-child(8) {
+      --greese-motion-index: 7;
+    }
+    .greese-Motion--stagger > :nth-child(9) {
+      --greese-motion-index: 8;
+    }
+    .greese-Motion--stagger > :nth-child(10) {
+      --greese-motion-index: 9;
+    }
+    .greese-Motion--stagger > :nth-child(11) {
+      --greese-motion-index: 10;
+    }
+    .greese-Motion--stagger > :nth-child(12) {
+      --greese-motion-index: 11;
+    }
+    .greese-Motion--stagger > :nth-child(13) {
+      --greese-motion-index: 12;
+    }
+    .greese-Motion--stagger > :nth-child(14) {
+      --greese-motion-index: 13;
+    }
+    .greese-Motion--stagger > :nth-child(15) {
+      --greese-motion-index: 14;
+    }
+    .greese-Motion--stagger > :nth-child(16) {
+      --greese-motion-index: 15;
+    }
+    .greese-Motion--stagger > :nth-child(17) {
+      --greese-motion-index: 16;
+    }
+    .greese-Motion--stagger > :nth-child(18) {
+      --greese-motion-index: 17;
+    }
+    .greese-Motion--stagger > :nth-child(19) {
+      --greese-motion-index: 18;
+    }
+    .greese-Motion--stagger > :nth-child(20) {
+      --greese-motion-index: 19;
+    }
+    .greese-Motion--stagger > :nth-child(21) {
+      --greese-motion-index: 20;
+    }
+    .greese-Motion--stagger > :nth-child(22) {
+      --greese-motion-index: 21;
+    }
+    .greese-Motion--stagger > :nth-child(23) {
+      --greese-motion-index: 22;
+    }
+    .greese-Motion--stagger > :nth-child(24) {
+      --greese-motion-index: 23;
+    }
+    .greese-Motion--stagger > :nth-child(n+25) {
+      --greese-motion-index: 24;
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .greese-Motion--enter:not(.greese-Motion--stagger),
+    .greese-Motion--enter.greese-Motion--stagger > *,
+    .greese-Motion--view[data-greese-view=in]:not(.greese-Motion--stagger),
+    .greese-Motion--view.greese-Motion--stagger[data-greese-view=in] > * {
+      --greese-motion-offset: calc(
+        var(--greese-motion-index, 0) * var(--greese-motion-stagger, 0s)
+      );
+      --greese-motion-wait: calc(
+        var(--greese-motion-delay, 0s) + var(--greese-motion-offset)
+      );
+      animation: var(--greese-motion-name) var(--greese-motion-duration, 0.5s) var(--greese-motion-ease, var(--greese-ease-out)) calc(var(--greese-motion-wait) + var(--greese-motion-scope, 0s)) backwards;
+    }
+    .greese-Motion--scope[data-greese-scope=pending] .greese-Motion--enter,
+    .greese-Motion--scope[data-greese-scope=pending] .greese-Motion--stagger > * {
+      animation-play-state: paused;
+    }
+    .greese-Motion--view[data-greese-view=pending]:not(.greese-Motion--stagger),
+    .greese-Motion--view.greese-Motion--stagger[data-greese-view=pending] > * {
+      opacity: 0;
+    }
+    @keyframes greese-fade-in {
+      from {
+        opacity: 0;
+      }
+    }
+    @keyframes greese-scale-in {
+      from {
+        scale: 0;
+      }
+    }
+    @keyframes greese-blur-in {
+      from {
+        filter: blur(8px);
+      }
+    }
+    @keyframes greese-slide-up {
+      from {
+        translate: 0px 100%;
+      }
+    }
+    @keyframes greese-slide-down {
+      from {
+        translate: 0px -100%;
+      }
+    }
+    @keyframes greese-slide-right {
+      from {
+        translate: -100% 0px;
+      }
+    }
+    @keyframes greese-slide-left {
+      from {
+        translate: 100% 0px;
+      }
+    }
+    @keyframes greese-pop {
+      from {
+        scale: 1;
+      }
+      60% {
+        scale: 1.075;
+      }
+    }
+    @keyframes greese-wipe-right {
+      from {
+        mask-size: 0% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 50%;
+      }
+      to {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 50%;
+      }
+    }
+    @keyframes greese-wipe-left {
+      from {
+        mask-size: 0% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 50%;
+      }
+      to {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 50%;
+      }
+    }
+    @keyframes greese-wipe-up {
+      from {
+        mask-size: 100% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 100%;
+      }
+      to {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 100%;
+      }
+    }
+    @keyframes greese-wipe-down {
+      from {
+        mask-size: 100% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 0%;
+      }
+      to {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 0%;
+      }
+    }
+    @keyframes greese-wipe-down-right {
+      from {
+        mask-size: 0% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 0%;
+      }
+      to {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 0%;
+      }
+    }
+    @keyframes greese-wipe-down-left {
+      from {
+        mask-size: 0% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 0%;
+      }
+      to {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 0%;
+      }
+    }
+    @keyframes greese-wipe-up-right {
+      from {
+        mask-size: 0% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 100%;
+      }
+      to {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 100%;
+      }
+    }
+    @keyframes greese-wipe-up-left {
+      from {
+        mask-size: 0% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 100%;
+      }
+      to {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 100%;
+      }
+    }
+    @keyframes greese-wipe-open-x {
+      from {
+        mask-size: 0% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+      }
+      to {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+      }
+    }
+    @keyframes greese-wipe-open-y {
+      from {
+        mask-size: 100% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+      }
+      to {
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+      }
+    }
+    @keyframes greese-iris-in {
+      from {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(closest-side, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+      }
+      to {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(closest-side, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 50% 50%;
+      }
+    }
+    @keyframes greese-iris-right {
+      from {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(farthest-side at 100% 50%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 100% 50%;
+      }
+      to {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(farthest-side at 100% 50%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 100% 50%;
+      }
+    }
+    @keyframes greese-iris-left {
+      from {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(farthest-side at 0% 50%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 0% 50%;
+      }
+      to {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(farthest-side at 0% 50%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 0% 50%;
+      }
+    }
+    @keyframes greese-iris-up {
+      from {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(farthest-side at 50% 0%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 50% 0%;
+      }
+      to {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(farthest-side at 50% 0%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 50% 0%;
+      }
+    }
+    @keyframes greese-iris-down {
+      from {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(farthest-side at 50% 100%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 50% 100%;
+      }
+      to {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(farthest-side at 50% 100%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 50% 100%;
+      }
+    }
+    @keyframes greese-iris-down-right {
+      from {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(farthest-side at 100% 100%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 100% 100%;
+      }
+      to {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(farthest-side at 100% 100%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 100% 100%;
+      }
+    }
+    @keyframes greese-iris-down-left {
+      from {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(farthest-side at 0% 100%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 0% 100%;
+      }
+      to {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(farthest-side at 0% 100%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 0% 100%;
+      }
+    }
+    @keyframes greese-iris-up-right {
+      from {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(farthest-side at 100% 0%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 100% 0%;
+      }
+      to {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(farthest-side at 100% 0%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 100% 0%;
+      }
+    }
+    @keyframes greese-iris-up-left {
+      from {
+        mask-size: 0% 0%;
+        mask-image: radial-gradient(farthest-side at 0% 0%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 0% 0%;
+      }
+      to {
+        mask-size: 142% 142%;
+        mask-image: radial-gradient(farthest-side at 0% 0%, black 98%, transparent);
+        mask-repeat: no-repeat;
+        mask-position: 0% 0%;
+      }
+    }
+    @keyframes greese-turn-x {
+      from {
+        transform: perspective(800px) rotateX(0deg);
+      }
+    }
+    @keyframes greese-turn-y {
+      from {
+        transform: perspective(800px) rotateY(0deg);
+      }
+    }
+    @keyframes greese-depth {
+      from {
+        transform: perspective(800px) translateZ(0px);
+      }
+    }
+    @keyframes greese-hinge {
+      from {
+        transform: perspective(800px) rotateX(0deg);
+        transform-origin: 50% 0%;
+      }
+    }
+    @keyframes greese-flip-over-up {
+      from {
+        transform: perspective(2000px) rotateX(180deg);
+        backface-visibility: hidden;
+      }
+    }
+    @keyframes greese-flip-over-down {
+      from {
+        transform: perspective(2000px) rotateX(-180deg);
+        backface-visibility: hidden;
+      }
+    }
+    @keyframes greese-flip-over-left {
+      from {
+        transform: perspective(2000px) rotateY(180deg);
+        backface-visibility: hidden;
+      }
+    }
+    @keyframes greese-flip-over-right {
+      from {
+        transform: perspective(2000px) rotateY(-180deg);
+        backface-visibility: hidden;
+      }
+    }
+    @keyframes greese-fade-up {
+      from {
+        translate: 0px var(--greese-motion-distance, 1rem);
+        opacity: 0;
+      }
+    }
+    @keyframes greese-fade-down {
+      from {
+        translate: 0px calc(-1 * var(--greese-motion-distance, 1rem));
+        opacity: 0;
+      }
+    }
+    @keyframes greese-fade-start {
+      from {
+        translate: calc(-1 * var(--greese-motion-dir, 1) * var(--greese-motion-distance, 1rem)) 0px;
+        opacity: 0;
+      }
+    }
+    @keyframes greese-fade-end {
+      from {
+        translate: calc(var(--greese-motion-dir, 1) * var(--greese-motion-distance, 1rem)) 0px;
+        opacity: 0;
+      }
+    }
+    @keyframes greese-pop-in {
+      from {
+        scale: 0.8;
+        opacity: 0;
+      }
+      60% {
+        scale: 1.04;
+        opacity: 1;
+      }
+    }
+    @keyframes greese-pocket-right {
+      from {
+        translate: -100% 0px;
+        mask-size: 0% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 50%;
+      }
+      to {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 50%;
+      }
+    }
+    @keyframes greese-pocket-left {
+      from {
+        translate: 100% 0px;
+        mask-size: 0% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 50%;
+      }
+      to {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 50%;
+      }
+    }
+    @keyframes greese-pocket-up {
+      from {
+        translate: 0px 100%;
+        mask-size: 100% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 0%;
+      }
+      to {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 0%;
+      }
+    }
+    @keyframes greese-pocket-down {
+      from {
+        translate: 0px -100%;
+        mask-size: 100% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 100%;
+      }
+      to {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 50% 100%;
+      }
+    }
+    @keyframes greese-pocket-down-right {
+      from {
+        translate: -100% -100%;
+        mask-size: 0% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 100%;
+      }
+      to {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 100%;
+      }
+    }
+    @keyframes greese-pocket-down-left {
+      from {
+        translate: 100% -100%;
+        mask-size: 0% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 100%;
+      }
+      to {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 100%;
+      }
+    }
+    @keyframes greese-pocket-up-right {
+      from {
+        translate: -100% 100%;
+        mask-size: 0% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 0%;
+      }
+      to {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 100% 0%;
+      }
+    }
+    @keyframes greese-pocket-up-left {
+      from {
+        translate: 100% 100%;
+        mask-size: 0% 0%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 0%;
+      }
+      to {
+        translate: 0px 0px;
+        mask-size: 100% 100%;
+        mask-image: linear-gradient(black, black);
+        mask-repeat: no-repeat;
+        mask-position: 0% 0%;
+      }
+    }
+    @keyframes greese-flip-up {
+      from {
+        opacity: 0;
+        transform: perspective(800px) rotateX(75deg);
+      }
+      50% {
+        opacity: 1;
+      }
+    }
+    @keyframes greese-flip-down {
+      from {
+        opacity: 0;
+        transform: perspective(800px) rotateX(-75deg);
+      }
+      50% {
+        opacity: 1;
+      }
+    }
+    @keyframes greese-flip-left {
+      from {
+        opacity: 0;
+        transform: perspective(800px) rotateY(75deg);
+      }
+      50% {
+        opacity: 1;
+      }
+    }
+    @keyframes greese-flip-right {
+      from {
+        opacity: 0;
+        transform: perspective(800px) rotateY(-75deg);
+      }
+      50% {
+        opacity: 1;
+      }
+    }
+    @keyframes greese-depth-in {
+      from {
+        opacity: 0;
+        transform: perspective(800px) translateZ(-240px);
+      }
+      60% {
+        opacity: 1;
+      }
+    }
+    @keyframes greese-swing-in {
+      from {
+        opacity: 0;
+        transform: perspective(800px) rotateX(-80deg);
+        transform-origin: 50% 0%;
+      }
+      50% {
+        opacity: 1;
+      }
+    }
+  }
+}