.banner__graphics .messages-container .message {
  padding-inline: 0.5rem;
  padding-block: 0.1rem;
}

.banner__graphics .messages-container .message p {
  transition: transform 750ms var(--ease-out);
}

.banner__graphics .messages-container .message.hovered p {
  transform: scale(1.05) !important;
}

.banner__graphics .messages-container .message .hover-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 0.5rem;

  width: 120%;
  height: 104%;
  background: var(--hero-white);
  color: var(--hero-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  letter-spacing: 0.3rem;
  font-family: "Shippori Mincho", serif;
  font-weight: 400;

  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path 750ms var(--ease-out) 0ms;
}

.banner__graphics .messages-container #the__one .hover-message {
  text-shadow:
    1px 1px 7px rgba(0, 26, 44, 0.413),
    -1px -1px 7px rgba(0, 26, 44, 0.454);
}

.banner__graphics .messages-container .message.hovered .hover-message {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 1500ms var(--ease-out) 500ms;
}

.banner__graphics .hero-cat,
.banner__button #main-star,
.banner__graphics .floor {
  transition: all 1000ms var(--ease-out);
}

.banner__graphics .hero-cat.blur,
.banner__button #main-star.blur,
.banner__graphics .floor.blur {
  opacity: 0.5;
  filter: blur(4px) !important;

  transition: all 1000ms var(--ease-out);
}

/* .banner__graphics .messages-container .message .message-predict {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    border: 1px solid skyblue;
    top: -2%;
    left: 0;

    transition: none;
}

.banner__graphics .messages-container .message .message-predict.hovered {
    transform: scale(1.05);
    padding-inline: 8px;
} */

.hero .banner .scroll-button {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 5rem;
  backdrop-filter: blur(2px);
  background: rgba(0, 26, 44, 0.605);

  height: 100%;

  display: flex;
  align-items: center;
  opacity: 0;
  z-index: -1;
  transition:
    opacity 2000ms var(--ease-out) 2000ms,
    z-index 0ms var(--ease-out);
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  outline: none; /* Recommended to also remove default focus outline */
}

.hero .banner .scroll-button.active {
  opacity: 1;
  z-index: 9999;
  transition:
    opacity 2000ms var(--ease-out) 1000ms,
    z-index 0ms var(--ease-out);
}

.hero .banner #btn-left {
  left: 0;
  mask: linear-gradient(to left, transparent, var(--hero-dark) 70%);
  justify-content: flex-start;
  padding-left: 1rem;
}

.hero .banner #btn-right {
  mask: linear-gradient(to right, transparent, var(--hero-dark) 70%);
  right: 0;
  justify-content: flex-end;
  padding-right: 1rem;
}

.hero .banner .scroll-button i {
  color: var(--hero-white);
  opacity: 90%;
  font-size: 1.5rem;

  /*! to make debug look nicer only */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .hero .scroll-button {
  position: relative;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;

  transition: opacity 750ms var(--ease-out);
}

.hero .scroll-button button {
  background: none;
  color: var(--hero-white);
  border: none;

  cursor: pointer;
  position: relative;
  z-index: 999;
}

.hero .scroll-button.active {
  opacity: 1;
} */