@charset "UTF-8";

/* Shared stage motion. Content stays visible without JavaScript. */
.wrapper .header .slogan {
  animation: mu-title-in 850ms cubic-bezier(.16, 1, .3, 1) both,
    mu-title-float 3s 850ms ease-in-out;
  transform-origin: 50% 60%;
}

.wrapper .navBtn a,
.wrapper .content__btn a,
.wrapper .btnBox a,
.wrapper .gotoheader a,
.wrapper .item__box-img img {
  transition: transform 220ms ease, filter 220ms ease;
}


@media (hover: hover) and (pointer: fine) {
  .wrapper .navBtn a:hover,
  .wrapper .content__btn a:hover,
  .wrapper .btnBox a:hover {
    transform: translateY(-4px) scale(1.025);
    filter: brightness(1.2);
  }

  .wrapper .gotoheader a:hover {
    transform: translateY(-4px);
  }
}

.wrapper .navBtn a:active,
.wrapper .content__btn a:active,
.wrapper .btnBox a:active,
.wrapper .gotoheader a:active {
  transform: scale(.97);
}

@keyframes mu-title-in {
  from { opacity: 0; transform: translateY(22px) scale(.88); }
  70% { opacity: 1; transform: translateY(-4px) scale(1.025); }
  to { opacity: 1; transform: none; }
}

@keyframes mu-title-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  .wrapper .header .slogan { animation: none; }
  .wrapper .navBtn a,
  .wrapper .content__btn a,
  .wrapper .btnBox a,
  .wrapper .gotoheader a,
  .wrapper .item__box-img img {
    transition: none;
    transform: none !important;
  }
}