/* ============================================================
 * Hero — LOUNGE 幸良(KOURA) — Bright Luxury
 * ============================================================ */

.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  isolation: isolate;
}

/* --- Background image -------------------------------------- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: none;
}

.hero.is-ready .hero__image {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* KV 動画 — 2枚重ねクロスフェード(継ぎ目を1秒ディゾルブで溶かす)。
 * 2枚を同じ場所に絶対配置で重ね、is-active の不透明度をJSで入れ替える。 */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background-color: #0a0a0b;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2000ms linear;
}
/* JS 不在/失敗時のフォールバック: 先頭を表示しネイティブ loop に任せる。 */
.hero__video--primary { opacity: 1; }
.hero__video--fallback { opacity: 1; }
/* JS 制御時: 既定を一旦伏せ、is-active のみ表示してクロスフェード。 */
.hero.has-js-crossfade .hero__video { opacity: 0; }
.hero.has-js-crossfade .hero__video.is-active { opacity: 1; }

/* シネマ調カラーグレード — soft-light で動画に“なじむ”暖色 veil。
 * フラットな白塗りと違い、ハイライトは温め/持ち上げ、暗部(黒VIP)は
 * 浮かせず締める。hero__media 内に置き、映像にのみブレンドする。 */
.hero__grade {
  position: absolute;
  inset: 0;
  z-index: 0; /* hero__media 内で video の上に重ねる */
  pointer-events: none;
  mix-blend-mode: soft-light;
  background:
    radial-gradient(120% 85% at 50% 28%,
      rgba(255, 246, 224, 0.55) 0%,
      rgba(255, 238, 206, 0.18) 46%,
      rgba(18, 14, 10, 0.30) 100%);
}

/* --- Overlays --------------------------------------------- */
/* Bright image — use subtle gradients only at top/bottom for text legibility */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* Gentle dark veil — strong at the very bottom (where the marble
     * counter is brightest and the English caption sits), light at
     * the top so the chandelier still glows. */
    linear-gradient(180deg,
      rgba(20, 18, 15, 0.22) 0%,
      rgba(20, 18, 15, 0.10) 32%,
      rgba(20, 18, 15, 0.18) 70%,
      rgba(20, 18, 15, 0.58) 100%);
  pointer-events: none;
}

/* Very soft dark vignette directly behind the brand title — just
 * enough to hold the title against the chandelier hot-spot. */
.hero__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 52% at 50% 48%,
      rgba(0, 0, 0, 0.34) 0%,
      transparent 78%);
  pointer-events: none;
}

/* --- Content ---------------------------------------------- */
.hero__inner {
  position: relative;
  width: var(--container);
  max-width: 1200px;
  height: 100%;
  margin-inline: auto;
  padding: clamp(2rem, 6vh, 4rem) 1.5rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
}

.hero__eyebrow {
  font-family: var(--font-serif-en);
  font-style: normal;
  letter-spacing: 0.55em;
  font-size: clamp(0.7rem, 1vw, 0.85rem);
  color: rgba(255, 250, 235, 0.85);
  text-transform: uppercase;
  margin: 0;
  opacity: 0;
  /* Tight 1-2px shadows act as a soft black stroke so the muted
   * text reads against marble highlights, plus a wider halo for
   * the darker walls. */
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.95),
    0 0 2px rgba(0, 0, 0, 0.85),
    0 0 6px rgba(0, 0, 0, 0.55),
    0 1px 14px rgba(0, 0, 0, 0.4);
}

.hero__center {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  text-align: center;
}

/* Brand title — PDFカバーに合わせ「LOUNGE」(セリフ・イタリック) + 「幸良」(筆書き) */
.hero__brand {
  font-family: var(--font-brush-jp);
  font-weight: 400;
  font-size: clamp(4.5rem, 13vw, 10rem);
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0;
  /* Slightly deeper than --color-text (#2A2723) so the brushed
   * 「幸良」holds against the warm bottle shelf behind the bar. */
  color: #0e0c0a;
  /* Tight cream halo lifts the ink off the dark wall, without
   * smearing on the chandelier side. */
  text-shadow:
    0 2px 10px rgba(250, 248, 243, 0.6),
    0 0 18px rgba(250, 248, 243, 0.35);
}

.hero__brand .brand-en {
  position: relative;
  display: block;
  /* 局所的な暗ヴェール(::before)を文字幅に収めるための基準ボックス。 */
  width: fit-content;
  margin-inline: auto;
  font-family: var(--font-serif-en);
  font-style: italic;
  font-weight: 400;
  font-size: 0.28em;
  letter-spacing: 0.5em;
  color: var(--color-gold-strong);
  margin-bottom: 0.3em;
  /* 黒ストロークは2段まで＋不透明度を下げ、金色が地から浮くようにする。
   * 文字形を支配せず、明るいKV上での輪郭づけ程度に留める。 */
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.55),
    0 1px 8px rgba(0, 0, 0, 0.35);
}

/* 文字直下に敷く局所的な暗ヴェール。明るいKV上でも金のbrand-enが
 * 読めるようにしつつ、text-shadowによるストローク依存を下げる。 */
.hero__brand .brand-en::before {
  content: '';
  position: absolute;
  z-index: -1;
  /* ぼかし分の余白を広めに取り、矩形の縁が出ないようにする。 */
  inset: -1em -1.6em;
  background:
    radial-gradient(ellipse 58% 120% at 50% 50%,
      rgba(0, 0, 0, 0.24) 0%,
      rgba(0, 0, 0, 0.10) 42%,
      transparent 70%);
  /* グラデの境目をさらにぼかし、矩形感を完全に消してソフトな暈しに。 */
  filter: blur(12px);
  pointer-events: none;
}

.hero__brand .brand-jp {
  display: block;
}

.hero__catch {
  font-family: var(--font-serif-jp);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  letter-spacing: 0.18em;
  line-height: 1.6;
  margin: 0;
  /* Match the deeper ink used on the brand title. */
  color: #0e0c0a;
  /* Tight cream halo — same logic as the brand title above. */
  text-shadow:
    0 2px 10px rgba(250, 248, 243, 0.65),
    0 0 16px rgba(250, 248, 243, 0.3);
}

.hero__sub {
  font-family: var(--font-serif-jp);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  letter-spacing: 0.3em;
  color: var(--color-gold-strong);
  margin: 0;
  opacity: 0;
  /* Gold sub-caption sits on the brightest part of the counter —
   * needs a tight black stroke or it disappears. */
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.95),
    0 0 2px rgba(0, 0, 0, 0.9),
    0 0 4px rgba(0, 0, 0, 0.75),
    0 2px 10px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(0, 0, 0, 0.35);
}

.hero__bottom {
  align-self: end;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 2rem;
  flex-wrap: wrap;
  opacity: 0;
}

.hero__english {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  letter-spacing: 0.2em;
  color: rgba(255, 250, 235, 0.92);
  margin: 0;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.95),
    0 0 2px rgba(0, 0, 0, 0.8),
    0 1px 6px rgba(0, 0, 0, 0.6),
    0 0 14px rgba(0, 0, 0, 0.35);
}

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-serif-en);
  font-style: italic;
  letter-spacing: 0.25em;
  font-size: 0.85rem;
  color: rgba(255, 250, 235, 0.92);
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.5rem;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.95),
    0 0 2px rgba(0, 0, 0, 0.8),
    0 1px 6px rgba(0, 0, 0, 0.6),
    0 0 14px rgba(0, 0, 0, 0.35);
}

.hero__scroll::after {
  content: '';
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, var(--color-gold) 0%, transparent 100%);
  display: block;
  transform-origin: top;
  animation: scroll-line 2.4s ease-in-out infinite;
}

@keyframes scroll-line {
  0%   { transform: scaleY(0);   opacity: 0; }
  50%  { transform: scaleY(1);   opacity: 1; }
  100% { transform: scaleY(0);   opacity: 0; transform-origin: bottom; }
}

/* --- Split text helpers ----------------------------------- */
.hero__catch .split-char,
.hero__brand .split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  will-change: transform, opacity;
}

/* --- Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__image,
  .hero__eyebrow,
  .hero__sub,
  .hero__bottom,
  .hero__catch .split-char,
  .hero__brand .split-char {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero__scroll::after {
    animation: none;
  }

  /* 動画クロスフェードのフェードも無効化(JS側で再生も止め poster を据え置く)。 */
  .hero__video {
    transition: none;
  }
}

/* --- Mobile tweaks ---------------------------------------- */
@media (max-width: 600px) {
  .hero__inner {
    padding-block: 2rem;
  }

  .hero__brand {
    letter-spacing: 0.1em;
  }

  .hero__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}