.container {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
}
main {
  margin-bottom: 10rem;
  flex-grow: 1;
}
/* sidebar */
.sidebar-container {
  display: flex;
  gap: 1rem;
  position: sticky;
  top: 2rem;
  align-self: flex-start;
  width: 15rem;
  overflow: hidden;
  transition: var(--transition);
}
.sidebar-container.sidebar-collapsed {
  width: 2rem;
  transition: var(--transition);
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: max-content;
  opacity: 1;
  transition: var(--transition);
}
.sidebar-container.sidebar-collapsed .sidebar-nav {
  pointer-events: none;
  opacity: 0;
  transition: var(--transition);
}

.sidebar-icon {
  position: absolute;
  top: 0;
  right: 0;
  height: 1.5rem;
  width: 1.5rem;
  stroke: var(--text-muted);
  border-radius: 0.25rem;
  transition: var(--transition);
}

.sidebar-icon:hover {
  stroke: var(--text);
  background: var(--bg);
  cursor: pointer;
  transition: var(--transition);
}

/* mobile */
.sidebar-icon-mobile {
  display: none;
  position: fixed;
  top: 4rem;
  right: 5vw;
  height: 2.5rem;
  width: 2.5rem;
  stroke: var(--text-muted);
  transition: var(--transition);
  background: var(--bg-light);
  box-shadow: var(--shadow-m);
  filter: drop-shadow(0 0 30px var(--bg-dark));
  padding: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
}
@media (max-width: 50rem) {
  .sidebar-container {
    display: flex;
    position: fixed;
    top: 5rem;
    right: -15rem;
    background: var(--bg-light);
    width: fit-content;
    height: fit-content;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-m);
    filter: drop-shadow(0 0 60px var(--bg-dark));
    z-index: 2;
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
  }
  .sidebar-icon {
    display: none;
  }
  .sidebar-icon-mobile {
    display: block;
  }
  /* reset on resize */
  .sidebar-container.sidebar-collapsed .sidebar-nav {
    pointer-events: auto;
    opacity: 1;
    transition: var(--transition);
  }
  .sidebar-container.sidebar-collapsed {
    width: 15rem;
    transition: var(--transition);
  }
}

.sidebar-container.sidebar-mobile {
  right: 5vw;
  opacity: 1;
  pointer-events: auto;
  transition: var(--transition);
}

/* sections */
section {
  margin: 3rem 0;
  background: var(--bg);
  padding: 1.5rem;
  border-radius: 1.5rem;
  box-shadow: var(--shadow-s);
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.grid-items {
  background: var(--bg-light);
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  box-shadow: var(--shadow-s);
}

/* intro-effects */
/* translation */
.yellow-block {
  width: 2rem;
  aspect-ratio: 16/9;
  background-color: var(--primary);
  margin: 1rem 0 0.5rem 0;
  border-radius: 0.25rem;
}
.codepen-link {
  background: var(--bg-light);
  padding: 0.25rem 0.75rem;
  margin: 0.5rem 0;
}
.codepen-link svg {
  height: 1rem;
  width: 1rem;
  stroke: var(--text);
  transition: var(--transition);
}
.codepen-link:hover svg {
  stroke: var(--primary);
  transition: var(--transition);
}
.translation {
  animation: translation 2s ease-in-out infinite;
}
@keyframes translation {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(2rem);
  }
}

/* rotation */
.rotation {
  animation: rotation 2s linear infinite;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* scaling */
.scaling {
  animation: scaling 2s ease-in-out infinite;
}
@keyframes scaling {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* skewing */
.skewing {
  animation: skewing 2s ease-in-out infinite;
}
@keyframes skewing {
  0%,
  100% {
    transform: skew(0deg);
  }
  50% {
    transform: skew(45deg);
  }
}

/* morph */
.morph {
  animation: morph 2s ease-in-out infinite;
}
@keyframes morph {
  0%,
  100% {
    width: 2rem;
    height: 1.125rem;
  }
  50% {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
  }
}

/* opacity */
.opacity {
  animation: opacity 2s ease-in-out infinite;
}
@keyframes opacity {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* blur */
.blur {
  animation: blur 2s ease-in-out infinite;
}
@keyframes blur {
  0%,
  100% {
    filter: blur(0px);
  }
  50% {
    filter: blur(5px);
  }
}
/* glow */
.glow {
  animation: glow 2s ease-in-out infinite;
}
@keyframes glow {
  0%,
  100% {
    filter: drop-shadow(0 0 0px var(--primary));
  }
  50% {
    filter: drop-shadow(0 0 10px var(--primary));
  }
}

/* color */
.color {
  animation: color 2s ease-in-out infinite;
}
@keyframes color {
  0%,
  100% {
    background-color: var(--primary);
  }
  50% {
    background-color: var(--secondary);
  }
}

/* mask */
.mask {
  background: var(--primary);
  clip-path: circle(0% at center);
  animation: mask 2s ease-in-out infinite;
}
@keyframes mask {
  0%,
  100% {
    clip-path: circle(0% at center);
  }
  50% {
    clip-path: circle(75% at center);
  }
}

/* perspective */

.p-container {
  perspective: 20rem;
}
.perspective {
  animation: perspective 2s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes perspective {
  0%,
  100% {
    transform: rotateY(0deg) translateZ(0);
  }
  50% {
    transform: rotateY(-45deg) translateZ(2rem);
  }
}

/* translation + rotation */
.translation-rotation {
  animation: translation-rotation 2s ease-in-out infinite;
}
@keyframes translation-rotation {
  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }
  50% {
    transform: translateX(2rem) rotate(180deg);
  }
}

/* translation + scaling */
.translation-scaling {
  animation: translation-scaling 2s ease-in-out infinite;
}
@keyframes translation-scaling {
  0%,
  100% {
    transform: translateX(0) scale(1);
  }
  50% {
    transform: translateX(2rem) scale(0.5);
  }
}

/* rotation + scaling */
.rotation-scaling {
  animation: rotation-scaling 2s ease-in-out infinite;
}
@keyframes rotation-scaling {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.5);
  }
}

/* translation + skewing */
.translation-skewing {
  animation: translation-skewing 2s ease-in-out infinite;
}
@keyframes translation-skewing {
  0%,
  100% {
    transform: translateX(0) skew(0deg);
  }
  50% {
    transform: translateX(2rem) skew(45deg);
  }
}

/* scaling + opacity */
.scaling-opacity {
  animation: scaling-opacity 2s ease-in-out infinite;
}
@keyframes scaling-opacity {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
}
/* blur + opacity */
.blur-opacity {
  animation: blur-opacity 2s ease-in-out infinite;
}
@keyframes blur-opacity {
  0%,
  100% {
    filter: blur(0px);
    opacity: 1;
  }
  50% {
    filter: blur(5px);
    opacity: 0.5;
  }
}

/* blur + opacity + color */
.blur-opacity-color {
  animation: blur-opacity-color 2s ease-in-out infinite;
}
@keyframes blur-opacity-color {
  0%,
  100% {
    filter: blur(0px);
    opacity: 1;
    background-color: var(--primary);
  }
  50% {
    filter: blur(5px);
    opacity: 0.5;
    background-color: var(--secondary);
  }
}

/* mask + color */
.mask-color {
  clip-path: circle(0% at center);
  animation: mask-color 2s ease-in-out infinite;
}
@keyframes mask-color {
  0%,
  100% {
    background: var(--secondary);
    clip-path: circle(0% at center);
  }
  50% {
    background: var(--primary);
    clip-path: circle(75% at center);
  }
}

/* perspective + scaling */
.perspective-scaling {
  animation: perspective-scaling 2s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes perspective-scaling {
  0%,
  100% {
    transform: rotateY(0deg) translateZ(0) scale(1);
  }
  50% {
    transform: rotateY(-45deg) translateZ(2rem) scale(1.5);
  }
}

/* timing function */
.timing-path {
  margin: 1rem 0 2rem 0;
  width: 18rem;
  background: var(--bg-light);
  border-radius: 1rem;
}
.timing {
  width: 1rem;
  aspect-ratio: 1;
  background: var(--primary);
  border-radius: 50%;
  animation: timing-animation 6s linear infinite;
}
.ease-timing {
  animation-timing-function: ease;
}
.ease-in-timing {
  animation-timing-function: ease-in;
}
.ease-out-timing {
  animation-timing-function: ease-out;
}
.ease-in-out-timing {
  animation-timing-function: ease-in-out;
}
/* cubic timing */
.cubic-bezier-svg {
  margin: 1rem 0;
  width: 18rem;
  height: 18rem;
  background: var(--bg-dark);
  stroke-width: 5;
}
.cubic-timing-2 {
  animation-timing-function: cubic-bezier(0, 0, 0, 1);
}
.cubic-timing-3 {
  animation-timing-function: cubic-bezier(0, 0, 1, 0);
}

.cubic-timing-7 {
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.cubic-timing-10 {
  animation-timing-function: cubic-bezier(1, 0, 0, 1);
}
/* popular */
.cubic-timing-smooth-1 {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.cubic-timing-smooth-2 {
  animation-timing-function: cubic-bezier(0.6, 0, 0.2, 1);
}
/* fav */
.cubic-fav {
  animation-timing-function: cubic-bezier(0.3, 0.8, 0.2, 1.3);
}
@keyframes timing-animation {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(17rem);
  }
}

/* links section */
/* translation */
.links-example {
  width: fit-content;
  background: var(--bg-light);
  padding: 0.5rem 1.25rem;
  border-radius: 1rem;
  display: flex;
  gap: 1.5rem;
  margin: 1rem 0 2rem 0;
}
.links-translate a:hover {
  transform: translateY(-0.25rem);
  transition: var(--transition);
}

/* links hover */
.links-hover {
  display: flex;
  position: relative;
  margin: 1rem 0 2rem 0;
}
.links-hover:hover .links-tab-active {
  background: var(--bg-light);
  box-shadow: var(--shadow-s);
}
.links-tab {
  z-index: 1;
  padding: 0.5rem 1rem;
}
.links-tab-active {
  position: absolute;
  border-radius: 0.5rem;
  width: 1rem;
  height: 1rem;
  z-index: 0;
  transition: var(--transition);
}

/* links-lines */
.links-lines a {
  position: relative;
  padding-bottom: 0.25rem;
}
.links-lines a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.1rem;
  bottom: 0;
  left: 0;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition);
}
.links-lines a:hover::after {
  transform: scaleX(1);
  transition: var(--transition);
}

/* links-lines-x */
.links-lines-x {
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 0;
}
.links-lines-x a {
  position: relative;
  padding-left: 1rem;
}
.links-lines-x a:hover {
  position: relative;
  transform: translateX(0.5rem);
}
.links-lines-x a::after {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 0.1rem;
  top: 50%;
  left: 0;
  background: var(--text);
  transition: var(--transition);
}
.links-lines-x a:hover::after {
  width: 1rem;
  left: -0.5rem;
  background: var(--primary);
  transition: var(--transition);
}
/* buttons section */
.btn-ex {
  margin: 1rem 0 2rem 0;
}

/* 911 */
.nine11-wrapper {
  position: relative;
  width: 15rem;
  height: 15rem;
  border-radius: 1rem;
  background: var(--bg-dark);
}
.nine11 {
  width: fit-content;
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  font: var(--h2);
  z-index: 1;
}
.police,
.fire,
.medical {
  position: absolute;
  top: 45%;
  left: 40%;
  transform: translateY(-50%) translateX(-50%);
  transition: var(--transition);
  scale: 0.5;
}
.nine11-wrapper.active .nine11 {
  left: 10%;
  transform: translateY(-50%) translateX(0);
  transition: var(--transition);
}
.nine11-wrapper.active .police {
  top: 10%;
  left: 50%;
  scale: 1;
  transform: translateY(0) translateX(0);
  transition: var(--transition);
}
.nine11-wrapper.active .fire {
  scale: 1;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(0);
  transition: var(--transition);
}
.nine11-wrapper.active .medical {
  scale: 1;
  left: 50%;
  top: 70%;
  transform: translateY(0) translateX(0);
  transition: var(--transition);
}

/* heart love */
.heart-love {
  background: var(--bg-dark);
  padding: 4rem;
  border-radius: 1rem;
  width: fit-content;
}
.heart-love-icon {
  width: 3rem;
  height: 3rem;
  stroke: var(--text-muted);
  stroke-width: 1;
  cursor: pointer;
  transition: var(--transition);
  border-radius: 50%;
  background: transparent;
}
.heart-love-icon:hover {
  stroke: var(--text);
  transition: var(--transition);
}
.heart-love-icon.heart-filled {
  fill: var(--primary);
  stroke: var(--primary);
  animation: heart-filled 0.7s ease-in-out;
}

@keyframes heart-filled {
  0% {
    transform: scale(1) translateY(0px) rotate(0deg);
    filter: drop-shadow(0 0 0px var(--primary));
  }
  25% {
    transform: scale(0.9) translateY(2px) rotate(5deg);
    filter: drop-shadow(0 0 5px var(--primary));
  }
  50% {
    transform: scale(1.2) translateY(-4px) rotate(-5deg);
    filter: drop-shadow(0 0 10px var(--primary));
  }
  100% {
    transform: scale(1) translateY(0px) rotate(0deg);
    filter: drop-shadow(0 0 20px transparent);
  }
}

/* shiny button */
.shiny-button {
  margin-top: 1rem;
  position: relative;
  overflow: hidden;
  background: var(--bg-light);
}
.shiny-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  background: linear-gradient(
    to right,
    #ffffff00 0%,
    var(--primary) 50%,
    #ffffff00 100%
  );
  transform: skewX(-20deg);
  transition: var(--transition);
}

.shiny-button:hover::before {
  left: 100%;
}

/* card flip */
.card-flip-container {
  margin-top: 1rem;
  width: 18rem;
  aspect-ratio: 4/5;
  position: relative;
  perspective: 800px;
  cursor: pointer;
}
.card-flip {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.3, 0.8, 0.2, 1.3);
  border-radius: 1rem;
  z-index: 1;
}

.card-flip-front,
.card-flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 0.5rem;
  background: var(--bg-dark);
  box-shadow: var(--shadow-m);
  border-radius: 1rem;
  overflow: hidden;
}
.card-flip-back {
  transform: rotateY(180deg);
}
.card-flip.flipped {
  transform: rotateY(180deg);
}

.card-flip-front {
  background-image: url("/motion-design/img/john_wick.webp");
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.cff-content {
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--bg) 50%, transparent),
    transparent
  );
  backdrop-filter: blur(4px);
  padding: 1rem;
}
.cfb-content {
  background: linear-gradient(color-mix(in oklch, var(--bg) 90%, transparent)),
    url("/motion-design/img/john_wick.webp");
  background-size: cover;
  height: 100%;
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: var(--shadow-m);
}

.card-flip-btn {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  padding: 0.25rem 0.75rem;
  pointer-events: none;
}

/* add to cart */

.atc-container {
  margin-top: 1rem;
  background: var(--bg-light);
  border-radius: 1rem;
  box-shadow: var(--shadow-s);
  position: relative;
  padding: 1rem;
}
.cart-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
}
.cart-items {
  position: absolute;
  top: 0.25rem;
  right: 1rem;
  width: 1rem;
  aspect-ratio: 1;
  font: var(--small);
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1em;
  background: var(--bg-light);
  border-radius: 50%;
  z-index: 1;
}
.atc-image {
  border-radius: 1rem;
  width: 100%;
}
.atc-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.atc-btn {
  padding: 0.25rem 0.75rem;
}

/* offset path */

.paths {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.path {
  width: 8rem;
  height: 8rem;
  border: 1px dashed var(--text-muted);
  position: relative;
}
.path-circle {
  border-radius: 50%;
}
.path-square {
  border-radius: 10%;
}
.path-blob {
  border-radius: 40% 60% 70% 30% / 40% 30% 70% 60%;
}

.path-element {
  width: 1rem;
  height: 1rem;
  background: var(--primary);
  border-radius: 50%;
  offset-path: content-box;
  offset-distance: 0%;
  position: absolute;
  animation: path-loop 6s linear infinite;
}

@keyframes path-loop {
  to {
    offset-distance: 100%;
  }
}

/* custom svg path */

.custom-svg-paths {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.custom-svg-path {
  width: 10rem;
  height: 10rem;
  stroke-width: 0.1;
  stroke: var(--text-muted);
  stroke-dasharray: 0.4 0.4;
}
.gradient-path {
  width: 10rem;
  height: 10rem;
  stroke-width: 0.2;
}

/* auth */
.auth {
  width: 18rem;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  margin-top: 1rem;
  background: var(--gradient);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.auth::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: var(--bg-dark);
  filter: blur(1px);
  opacity: 0.9;
  transition: width 1s ease-in-out;
}
.auth::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: var(--bg-dark);
  filter: blur(1px);
  opacity: 0.9;
  transition: width 1s ease-in-out;
}
.auth:hover::before,
.auth:hover::after {
  width: 0;
  transition: width 1s ease-in-out;
  transition-delay: 1s;
}
.fingerprint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 4rem;
  height: 4rem;
  fill: none;
  stroke: var(--bg-dark);
  stroke-width: 1;
  background: var(--bg-light);
  border-radius: 3rem;
  padding: 0.25rem;
  box-shadow: 0 0 4px 2px var(--bg);
  z-index: 1;
  transition: var(--transition);
}
.auth:hover .fingerprint {
  animation: border-glow 6s ease-in-out infinite;
  animation-delay: 0.6s;
  transition: var(--transition);
}
@keyframes border-glow {
  0%,
  100% {
    box-shadow: 0 0 4px 2px var(--primary);
  }
  50% {
    box-shadow: 0 0 8px 4px var(--primary);
  }
}
.fingerprint-animate {
  stroke: var(--primary);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s ease-in-out;
}
.auth:hover .fingerprint-animate {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s ease-in-out;
  transition-delay: 0.3s;
}
.shiny-card {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  background: linear-gradient(
    to right,
    #ffffff00 0%,
    var(--primary) 50%,
    #ffffff00 100%
  );
  transform: skew(145deg);
  z-index: 2;
  transition: var(--transition);
}

.auth:hover .shiny-card {
  left: 120%;
  transition: var(--transition);
}

/* pin auth */
.pin-auth {
  width: 18rem;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  margin-top: 1rem;
  background: var(--gradient);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pin-auth::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: var(--bg-dark);
  filter: blur(1px);
  opacity: 0.9;
  transition: width 1s ease-in-out;
}
.pin-auth::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: var(--bg-dark);
  filter: blur(1px);
  opacity: 0.9;
  transition: width 1s ease-in-out;
}
.pin-boxes {
  background: var(--bg-light);
  padding: 0.5rem;
  border-radius: 0.5rem;
  display: flex;
  gap: 0.5rem;
  z-index: 1;
  box-shadow: 0 0 4px 2px var(--bg);
}
.auth-failure {
  animation: auth-failure 0.3s ease-in-out 2;
}
.pin {
  width: 2.5rem;
  aspect-ratio: 1;
  border-radius: 0.25rem;
  border: none;
  background: var(--bg-dark);
  color: var(--text);
  text-align: center;
  font: var(--h2);
  transition: color 0.3s ease;
}
.pin:focus {
  outline: none;
  outline: 2px solid var(--primary);
}

/* auth animation */
@keyframes auth-failure {
  0%,
  100% {
    transform: translateX(0);
  }
  25%,
  75% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(4px);
  }
}
/* success */
.pin-auth.success::before,
.pin-auth.success::after {
  width: 0;
  transition: width 1s ease-in-out;
  transition-delay: 1s;
}
.border-glow {
  animation: border-glow 6s ease-in-out infinite;
  animation-delay: 0.6s;
  transition: var(--transition);
}

/*  */

/* morph svg */
#morph-svg {
  position: relative;
  height: 500px;
  overflow: hidden;
}

.morph-container {
  position: absolute;
  top: 60%;
  left: 50%;
  translate: -50% -50%; /* Standard centering */
  width: 300px; /* Adjusted to match aspect ratio of viewbox */
  height: 300px;
  transition: top 0.6s cubic-bezier(0.3, 0.8, 0.2, 1.3);
  /* Flex to help center text overlay */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Moves the whole container up */
.morph-container.trigger {
  top: 50%;
}

.morph-svg {
  width: 20rem;
  height: 20rem;
  overflow: visible;
  fill: none;
  stroke: var(--primary);
  stroke-width: 1;
  filter: drop-shadow(0 0 8px var(--primary));
  cursor: pointer;
}

.morph-shape {
  /* Default State (Pill) */
  d: path(
    "M 70 130  L 130 130  C 130 135 130 150 130 150  L 70 150  C 70 150 70 135 70 135 Z"
  );
}

/* TEXT STYLES */
.text-overlay {
  position: absolute;
  text-align: center;
  color: var(--text);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  margin: 0;
  width: 100%;
}

.svg-text-close {
  top: 67%;
  left: 0;
  opacity: 1;
}

.svg-text-open {
  top: 40%;
  transform: translateY(-50%);
  font-size: 24px;
  width: 80%;
}
.svg-text-open.cat-text-move {
  top: 50%;
  transition: top 0.6s cubic-bezier(0.3, 0.8, 0.2, 1.3) 0.6s;
}
#cat-svg {
  width: 5rem;
  height: 5rem;
  stroke: var(--primary);
  stroke-width: 0.6;
  fill: none;
  filter: drop-shadow(0 0 8px var(--primary));
  scale: 0;
  translate: 0 -40px;
}
#cat-svg.cat-jump {
  scale: 1;
  translate: 0 0px;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s;
}
#cat-path.morph-cat {
  animation: morph-cat 1.5s ease-in-out 2 1.5s;
}
@keyframes morph-cat {
  0%,
  20%,
  100% {
    d: path(
      "M 12 5 C 12.223 5 12.448 5.01 12.672 5.03 C 12.896 5.049 13.12 5.079 13.341 5.117 C 13.563 5.156 13.783 5.203 14 5.26 C 15.78 3.26 19.03 2.42 20.42 3 C 21.12 3.29 21.015 5.04 20.735 6.718 C 20.455 8.395 20 10 20 10 C 20.57 11.07 21 12.24 21 13.44 C 21 14.927 20.552 16.262 19.771 17.382 C 18.99 18.502 17.876 19.407 16.542 20.031 C 15.209 20.656 13.657 21 12 21 C 9.515 21 7.265 20.25 5.636 18.93 C 4.008 17.61 3 15.72 3 13.44 C 3 12.19 3.5 11.04 4 10 C 4 10 3.527 8.395 3.229 6.718 C 2.93 5.04 2.805 3.29 3.5 3 C 4.89 2.42 8.22 3.23 10 5.23 C 10.656 5.079 11.327 5.002 12 5 C 12 5 12 5 12 5 M 8 14.5 L 8 14 M 16 14.5 L 16 14"
    );
  }
  50%,
  70% {
    d: path(
      "M 11.849 5.981 C 11.948 6.008 12.052 6.008 12.151 5.981 C 12.25 5.953 12.339 5.899 12.409 5.824 C 13.15 4.991 14.128 4.403 15.212 4.14 C 16.295 3.876 17.434 3.948 18.475 4.347 C 19.516 4.747 20.411 5.454 21.041 6.374 C 21.671 7.294 22.005 8.385 22 9.5 C 22 11.79 20.5 13.5 19 15 C 17.169 16.771 15.339 18.542 13.508 20.313 C 13.259 20.599 12.933 20.809 12.57 20.917 C 12.206 21.025 11.819 21.027 11.454 20.924 C 11.089 20.82 10.761 20.615 10.508 20.332 C 8.672 18.555 6.836 16.777 5 15 C 3.5 13.5 2 11.8 2 9.5 C 2 8.387 2.338 7.3 2.968 6.384 C 3.599 5.467 4.493 4.763 5.532 4.364 C 6.571 3.966 7.706 3.892 8.788 4.153 C 9.87 4.414 10.847 4.996 11.591 5.824 C 11.661 5.899 11.75 5.953 11.849 5.981 M 8 14 L 8 14 M 16 14 L 16 14"
    );
  }
}