/* =============================================================
   HOLY-MOLY LP — #hero セクション（仕様書 §5-02 / §6 / §7）
   モバイルファースト：SPはブランドブロックがH1の下に中央揃えで流れ、
   768px以上で左上テキスト＋右下ブランドブロックの絶対配置にする。
   ============================================================= */

.hero {
  position: relative;
  height: min(100svh, 745px);
  overflow: hidden;
  color: var(--c-text);
}

/* ---------------------------------------------------------
   背景スライド（クロスフェード）。js/hero-slider.js が .is-active を付け替える。
   JS無効時は最初のスライド（.is-active）のみ表示される。
   --------------------------------------------------------- */

.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  animation: hero-bg-in 1.6s var(--ease-out) both;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__slide-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 解像度が足りない追加写真の粗さを隠す細かい格子（Figma配置案どおり。不要なら修飾クラスを外す） */
.hero__slide--rough::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 4px);
  pointer-events: none;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(25, 6, 64, 0.5), transparent 25%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding-top: calc(var(--header-h-sp) + 40px);
}

/* ---------------------------------------------------------
   左上：英字ラベル + H1
   --------------------------------------------------------- */

.hero__intro {
  animation: hero-text-in var(--dur-reveal) var(--ease-out) both;
}

.hero__heading {
  margin-top: var(--space-4);
  font-size: 22px;
}

/* ---------------------------------------------------------
   ブランドブロック（SP: H1の下に中央揃え / PC: 右下）
   --------------------------------------------------------- */

.hero__brand {
  margin-top: var(--space-8);
  text-align: center;
  animation: hero-text-in var(--dur-reveal) var(--ease-out) both;
  animation-delay: 0.15s;
}

.hero__brand-name {
  font-family: var(--ff-display);
  font-size: 22px;
  color: var(--c-text);
}

.hero__brand-name rt {
  font-family: var(--ff-body);
  font-size: 9px;
}

.hero__tagline {
  margin-top: var(--space-2);
  font-family: var(--ff-body);
  font-size: 12px;
  color: var(--c-text);
}

.hero__cta {
  margin-top: 14px;
}

/* ---------------------------------------------------------
   下部中央キャプション
   --------------------------------------------------------- */

.hero__caption {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 2;
  animation: hero-caption-in var(--dur-reveal) var(--ease-out) both;
  animation-delay: 0.3s;
}

/* ---------------------------------------------------------
   ロード時アニメーション
   --------------------------------------------------------- */

@keyframes hero-bg-in {
  from {
    transform: scale(1.06);
  }

  to {
    transform: scale(1);
  }
}

@keyframes hero-text-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* .hero__caption は left:50% + translateX(-50%) で中央寄せしているため、
   translateY のスライドと合成した専用キーフレームを使う
   （hero-text-in をそのまま使うと to 側の transform で -50% が上書きされていた） */
@keyframes hero-caption-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (min-width: 768px) {
  .hero__inner {
    padding-top: calc(var(--header-h) + 40px);
  }

  .hero__heading {
    font-size: var(--fs-h1);
  }

  .hero__brand {
    position: absolute;
    right: 0;
    bottom: 78px;
    margin-top: 0;
  }
}