@charset "UTF-8";

#article-323 .box {
  width: min(300px, calc(300 / 640 * 100vw));
  height: min(150px, calc(150 / 640 * 100vw));
  background: #3498db;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.5s ease;
  margin-inline: auto;
}
#article-323 .box-wrap:hover .box {
  clip-path: inset(0 0 0 0);
}

#article-323 .circle {
  width: min(200px, calc(200 / 640 * 100vw));
  height: min(200px, calc(200 / 640 * 100vw));
  background: #e74c3c;
  clip-path: circle(10% at 50% 50%);
  transition: clip-path 0.5s ease;
  margin-inline: auto;
}
#article-323 .circle:hover {
  clip-path: circle(75% at 50% 50%);
}

#article-323 .diagonal {
  width: 300px;
  height: 150px;
  background: #2ecc71;
  clip-path: polygon(0 0, 0 0, -40% 100%, 0 100%);
  transition: clip-path 0.5s ease;
  margin-inline: auto;
}
#article-323 .diagonal-wrap:hover .diagonal {
  clip-path: polygon(0 0, 140% 0, 100% 100%, 0 100%);
}

#article-323 .text-reveal {
  display: inline-block;
  background-color: #fafafa;
  overflow: hidden;
}
#article-323 .text-reveal span {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 0.5s ease;
}
#article-323 .text-reveal:hover span {
  transform: translateY(0);
}

#article-323 .clip-reveal {
  display: inline-block;
}
#article-323 .clip-reveal span {
  display: inline-block;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.5s ease;
}
#article-323 .clip-reveal:hover span {
  clip-path: inset(0 0 0 0);
}

@keyframes wave {
  0% {
    clip-path: polygon(0 50%, 25% 55%, 50% 50%, 75% 45%, 100% 50%, 100% 100%, 0 100%);
  }
  50% {
    clip-path: polygon(0 55%, 25% 50%, 50% 55%, 75% 50%, 100% 55%, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 50%, 25% 55%, 50% 50%, 75% 45%, 100% 50%, 100% 100%, 0 100%);
  }
}
#article-323 .wave {
  width: 100%;
  height: min(200px, calc(200 / 640 * 100vw));
  background: #9b59b6;
  animation: wave 3s infinite ease-in-out;
}

#article-323 .slice {
  width: min(300px, calc(300 / 640 * 100vw));
  height: min(150px, calc(150 / 640 * 100vw));
  background: #f1c40f;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.4s ease;
  margin-inline: auto;
}
#article-323 .slice:hover {
  clip-path: polygon(0 0, 80% 0, 100% 100%, 20% 100%);
}