@charset "UTF-8";

/* =========================================================
   Loading（ローディング画面）
   ・<html> に .is-loading が付いている間だけ表示（<head> 内のスクリプトで付与）
     → JavaScript が無効な環境では表示されない
   ・REM のロゴを 1 文字ずつ表示（--i = 文字の順番）
   ・assets/js/common/loading.js が .is-loaded を付けてフェードアウト
   ========================================================= */
.loading {
  display: none;
}

.is-loading .loading {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-loading-bg);
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loading.is-loaded {
  opacity: 0;
  visibility: hidden;
}

.loading__logo {
  width: 273px;
  max-width: 56vw;
  height: auto;
  overflow: visible;
}

.loading__char {
  fill: #fff;
  opacity: 0;
  transform: translateY(16px);
  transform-box: fill-box;
  filter: blur(6px);
  animation: loadingChar 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(0.2s + var(--i) * 0.3s);
}

@keyframes loadingChar {
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ローディング中はスクロールさせず、TOP のヒーローのアニメーションも待たせる */
.is-loading body {
  overflow: hidden;
}

.is-loading .hero__item,
.is-loading .hero__list {
  animation-play-state: paused;
}

@media (max-width: 768px) {
  .loading__logo {
    width: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading__char {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}