@import url("https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap");

:root,
body {
  font-family: "Zen Kurenaido", sans-serif;
}

body {
  position: relative;
  min-height: 90vh;
  overflow-x: hidden;
}

body::before {
  content: "島袋";
  position: fixed;
  top: 50%;
  left: 50%;
  font-size: min(70vh, 70vw);
  font-weight: 700;
  color: rgba(0, 0, 0, 0.05);
  transform: translate(-50%, -50%) rotate(30deg);
  writing-mode: horizontal-tb;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

body.shimabukuro-spin::before {
  animation: shimabukuro-spin 0.1s linear infinite;
  will-change: transform;
}

body.shimabukuro-rainbow::before {
  background-image: repeating-linear-gradient(
    90deg,
    #ff004c 0%,
    #ffa600 12.5%,
    #ffee00 25%,
    #00d084 37.5%,
    #00a8ff 50%,
    #6c5ce7 62.5%,
    #ff4fd8 75%,
    #ff004c 87.5%,
    #ffa600 100%
  );

  background-size: 700% 500%;
  background-repeat: repeat;
  background-position: 0% 50%;

  color: transparent;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;

  animation: shimabukuro-rainbow 2.2s linear infinite;
}

body.shimabukuro-spin.shimabukuro-rainbow::before {
  animation: shimabukuro-spin 0.1s linear infinite,
    shimabukuro-rainbow 2.2s linear infinite;
  will-change: transform, background-position;
}

@keyframes shimabukuro-rainbow {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

@keyframes shimabukuro-spin {
  from {
    transform: translate(-50%, -50%) rotate(30deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(390deg);
  }
}


/* Toast notification fade out animation */
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

.toast-notification {
  transition: all 0.3s ease-out;
}

.toast-notification.fade-out {
  animation: fadeOut 0.5s ease-out forwards;
  opacity: 0;
  transform: translateX(20px);
}