/* ============================================================
   v2モック：ヒーローカルーセル
   既存のヒーロー（写真＋Sky Blueグラデーション＋コピー）を1枚目として残し、
   2枚目以降をクロスフェードで入れ替える。
   ============================================================ */

.hero-slides,
.hero-slide {
  position: absolute;
  inset: 0;
}

.hero-slide {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.2s ease,
    visibility 0s linear 1.2s;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.2s ease,
    visibility 0s;
}

/* --- 告知画像（縦長フライヤー）用スライド ---
   文字入りの画像は切り抜くと読めなくなるので全体を収め、
   余白は同じ画像をぼかして敷く。 */
.hero-slide[data-kind='poster'] {
  background: var(--mm-black, #111);
  overflow: hidden;
}

.hero-poster-bg {
  position: absolute;
  inset: -48px;
  width: calc(100% + 96px);
  height: calc(100% + 96px);
  object-fit: cover;
  filter: blur(28px) brightness(0.55);
}

.hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 告知画像には文字が入っているので、ロゴとコピーは写真スライドのときだけ出す。 */
.hero .hero-copy {
  transition:
    opacity 0.8s ease,
    visibility 0s;
}

.hero.has-rotated .hero-copy {
  animation: none;
}

.hero[data-active-kind='poster'] .hero-copy {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.8s ease,
    visibility 0s linear 0.8s;
}

/* --- インジケーター --- */
.hero-dots {
  position: absolute;
  right: clamp(20px, 5vw, 72px);
  bottom: clamp(14px, 3vh, 24px);
  display: flex;
  gap: 8px;
}

.hero-dot {
  position: relative;
  width: 36px;
  height: 28px; /* 押しやすさのための当たり判定。見た目は中の2pxの線 */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero-dot::before,
.hero-dot::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
}

.hero-dot::before {
  width: 100%;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 6px rgba(16, 46, 74, 0.45);
}

.hero-dot::after {
  width: 0;
  background: #fff;
}

.hero-dot[aria-current='true']::after {
  width: 100%;
}

/* 自動再生中は、次の切り替えまでの残り時間を線の伸びで示す */
.hero-slides.is-playing ~ .hero-dots .hero-dot[aria-current='true']::after {
  animation: heroDotFill var(--hero-interval, 6000ms) linear both;
}

.hero-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@keyframes heroDotFill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide.is-active,
  .hero .hero-copy,
  .hero[data-active-kind='poster'] .hero-copy {
    transition: none;
  }
}