@charset "utf-8";
/* =====================
   TOP PAGE
===================== */
.top {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4vh;
}
/* 表示制御 */
.rikishi-list .pc-only {
  display: block;
}
.rikishi-list .sp-only {
  display: none;
}
/* =====================
   TOP BACKGROUND SLIDE
===================== */
.top-bg {
  position: fixed;
  inset: 0;
  z-index: -1; /* 全要素の背面 */
  overflow: hidden;
}
.top-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  transition: opacity 1.2s ease;
  filter: blur(8px);
  transform: scale(1.05); /* ぼかしの縁対策 */
  /* 主張を抑える */
  mix-blend-mode: normal;
}
/* イントロ中だけ高速切り替え */
body.is-top-intro .top-bg img {
  transition: opacity .08s linear;
}
/* ロゴ画像 */
.logo img {
  max-width: 300px;
  height: auto;
}
/* 力士リスト */
.rikishi-list {
  list-style: none;
  display: flex;
  gap: 2.5vw;
  opacity: 0; /* フェード用 */
}
.rikishi-list li img {
  width: 160px;
  max-width: 18vw;
  height: auto;
  border-radius: 20px;
  display: block;
}
/* =====================
   RIKISHI HOVER SHAKE
===================== */
.rikishi-list li a {
  display: block;
}
.rikishi-list li img {
  display: block;
  transition: filter .2s ease;
  transform-origin: center center;
}
.rikishi-list li:hover img {
  animation: rikishiShake .35s linear infinite;
  filter: brightness(1.04) saturate(1.06);
}
@keyframes rikishiShake {
  0% {
    transform: scale(1.05) translate(0, 0) rotate(0deg);
  }
  20% {
    transform: scale(1.05) translate(-2px, 1px) rotate(-1deg);
  }
  40% {
    transform: scale(1.05) translate(2px, -1px) rotate(1deg);
  }
  60% {
    transform: scale(1.05) translate(-1px, 0) rotate(-1deg);
  }
  80% {
    transform: scale(1.05) translate(2px, 1px) rotate(1deg);
  }
  100% {
    transform: scale(1.05) translate(0, 0) rotate(0deg);
  }
}
/* =====================
   GUNBAI
===================== */
.logo {
  position: relative;
}
/* 疑似要素の土台 */
.logo::before, .logo::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 80px;
  height: 80px;
  background: url("../images/top/gunbai.png") no-repeat center / contain;
  opacity: 0;
}
/* 左 */
.logo::before {
  left: -100px;
  transform: translateY(-50%) scale(1);
}
/* 右 */
.logo::after {
  right: -110px;
  transform: translateY(-50%) scaleX(-1) scale(1);
}
/* 表示＋揺れ */
.logo.show::before {
  animation: gumbaiFade 1s ease forwards, gumbaiWobble 2.6s ease-in-out 1.1s infinite;
}
.logo.show::after {
  animation: gumbaiFadeR 1s ease forwards, gumbaiWobbleR 2.6s ease-in-out 1.1s infinite;
}
@keyframes gumbaiFade {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}
@keyframes gumbaiFadeR {
  from {
    opacity: 0;
    transform: translateY(-50%) scaleX(-1) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scaleX(-1) scale(1);
  }
}
@keyframes gumbaiWobble {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  25% {
    transform: translateY(-50%) rotate(-6deg);
  }
  50% {
    transform: translateY(-50%) rotate(0deg);
  }
  75% {
    transform: translateY(-50%) rotate(6deg);
  }
  100% {
    transform: translateY(-50%) rotate(0deg);
  }
}
@keyframes gumbaiWobbleR {
  0% {
    transform: translateY(-50%) scaleX(-1) rotate(0deg);
  }
  25% {
    transform: translateY(-50%) scaleX(-1) rotate(6deg);
  }
  50% {
    transform: translateY(-50%) scaleX(-1) rotate(0deg);
  }
  75% {
    transform: translateY(-50%) scaleX(-1) rotate(-6deg);
  }
  100% {
    transform: translateY(-50%) scaleX(-1) rotate(0deg);
  }
}
/* 遷移用：振り下ろし */
@keyframes gumbaiStrike {
  0% {
    opacity: 1;
    transform: translateY(-50%) rotate(0deg);
  }
  30% {
    opacity: 1;
    transform: translateY(-120%) rotate(-20deg);
  }
  100% {
    opacity: 1;
    transform: translateY(40%) rotate(12deg);
  }
}
@keyframes gumbaiStrikeR {
  0% {
    opacity: 1;
    transform: translateY(-50%) scaleX(-1) rotate(0deg);
  }
  30% {
    opacity: 1;
    transform: translateY(-120%) scaleX(-1) rotate(20deg);
  }
  100% {
    opacity: 1;
    transform: translateY(40%) scaleX(-1) rotate(-12deg);
  }
}
body.is-transitioning .logo::before {
  animation: gumbaiStrike 0.6s ease-in forwards;
}
body.is-transitioning .logo::after {
  animation: gumbaiStrikeR 0.6s ease-in forwards;
}
body.is-transitioning .logo::before, body.is-transitioning .logo::after {
  opacity: 1;
}
body.is-transitioning .page-fade {
  opacity: 1;
  transition-delay: 0.45s;
}
/* =====================
   TOP RESPONSIVE
===================== */
@media (max-width: 768px) {
  .top {
    margin-top: 30px;
  }
  .rikishi-list .pc-only {
    display: none;
  }
  .rikishi-list .sp-only {
    display: block;
  }
  .rikishi-list {
    flex-direction: column;
    gap: 1.2rem;
  }
  .logo::before, .logo::after {
    width: 56px;
    height: 56px;
  }
  .logo::before {
    left: -70px;
  }
  .logo::after {
    right: -70px;
  }
  /* 力士リストを縦並び */
  .rikishi-list {
    flex-direction: column;
    gap: 1.4rem;
  }
  /* 画像を横長前提に */
  .rikishi-list li img {
    width: 90vw;
    height: auto;
    max-width: none;
    object-fit: cover;
  }
}
/* =====================
   TOP INTRO
===================== */
.top-intro {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  overflow: hidden;
}
.top-intro img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  filter: blur(8px);
  transform: scale(1.1);
  transition:
    opacity .28s ease, transform 1.4s ease, filter .8s ease;
}
/* 最後の一枚を少し寄せて見せる */
.top-intro img.is-last {
  transform: scale(8);
  filter: blur(1px);
}
/* 白フェード用 */
.top-intro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity .9s ease;
}
/* 白フェード発動 */
.top-intro.is-flashing-out::after {
  opacity: 1;
}
/* イントロ終了 */
.top-intro.hide {
  opacity: 0;
  transition: opacity .9s ease;
}
.top-intro.hide img {
  opacity: 0 !important;
}
/* =====================
   TOP MAIN REVEAL
===================== */
/* イントロ中は完全非表示 */
body.top-opening .logo-wrap, body.top-opening .rikishi-list {
  opacity: 0;
  visibility: hidden;
}
/* 背景は隠さない（スライド準備のため） */
body.top-opening .top-bg {
  opacity: 1;
}
/* トップ表示開始 */
body.top-opened .logo-wrap, body.top-opened .rikishi-list {
  visibility: visible;
  opacity: 1;
}
body.top-opened .logo-wrap {
  transform: translateY(0);
  transition: opacity 1.4s ease, transform 1.4s ease;
}
body.top-opened .rikishi-list {
  transform: translateY(0);
  transition: opacity 1.6s ease, transform 1.6s ease;
}
/* =====================
   TOP SETTLE
===================== */
.top-bg {
  transition: filter 1.4s ease;
}
body.top-opened .top-bg {
  animation: topSettle 1.4s ease;
}
@keyframes topSettle {
  0% {
    filter: brightness(1.15);
  }
  100% {
    filter: brightness(1);
  }
}