/* =====================================================================
   moatabi Home v2 — 追加レイヤー
   - main.css のDesign Tokenを土台にした「上書き専用」。main.cssの構造は変えない
   - トップページでのみ読み込む(home_v2.html)。?ui=classic では読み込まれない
   - アニメーションは transform / opacity のみ。width/height/top は触らない
   - 季節差は背景動画と Token(--hero-wash)だけ。HTML構造は季節で変わらない(ADR-0004)
   ===================================================================== */

/* ---------- 季節Token(v2で追加する分だけ) ---------- */
.theme-spring {
  --hero-wash: rgba(224, 92, 123, 0.34);
}
.theme-summer {
  --hero-wash: rgba(14, 127, 192, 0.34);
}
.theme-autumn {
  --hero-wash: rgba(201, 93, 44, 0.34);
}
.theme-winter {
  --hero-wash: rgba(79, 95, 174, 0.36);
}

/* =====================================================================
   1画面目: 全画面ヒーロー
   ===================================================================== */
.hero-v2 {
  /* header 56px と mobileのbottom-nav 76px を引いて、ちょうど1画面に収める */
  min-height: calc(100vh - 132px);
  min-height: calc(100svh - 132px);
  display: grid;
  /* minmax(0,1fr) が必須。既定の auto トラックは中身の min-content で膨らむため、
     横スクロールの中央値レール(.hero-index)が狭幅でヒーロー全体を押し広げてしまう */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  background-image: none; /* main.cssのscrim+画像は hero-canvas が担当する */
  border-radius: 0; /* 1画面目は全幅で断ち切る(main.cssの28px角丸を打ち消す) */
  isolation: isolate;
}
.hero-v2 .hero-inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-xl);
}

/* ---------- 背景レイヤー ---------- */
.hero-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-drift {
  position: absolute;
  inset: -8%;
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  /* イラストが淡いので少しだけ締める。合成レイヤーに1回焼き込まれるだけで毎フレームの負荷にはならない */
  filter: saturate(1.18) contrast(1.06);
}
/* 景色がゆっくり近づく。合成レイヤー1枚しか使わない */
@media (prefers-reduced-motion: no-preference) {
  .hero-drift {
    animation: hero-drift 32s ease-in-out infinite alternate;
    will-change: transform;
  }
}
@keyframes hero-drift {
  from { transform: scale(1.05) translate3d(-1.2%, 0.8%, 0); }
  to   { transform: scale(1.16) translate3d(1.4%, -1.6%, 0); }
}
/* 季節色のwash + 文字の可読性を確保するscrim */
.hero-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 80% at 8% 4%, var(--hero-wash, transparent), transparent 58%),
    linear-gradient(100deg, rgba(14, 16, 28, 0.56) 0%, rgba(14, 16, 28, 0.38) 56%, rgba(14, 16, 28, 0.10) 86%),
    linear-gradient(180deg, rgba(14, 16, 28, 0.22) 0%, transparent 32%, rgba(14, 16, 28, 0.58) 100%);
}

/* ---------- 背景動画 ---------- */
/* poster は常に敷く。動画が読めない/再生しない環境でも背景が空にならない */
.hero-poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 通信量とバッテリーを避けるため、既定では出さない。下のmedia queryで許可する */
  display: none;
}
/* 広い画面 かつ 動きを許可している場合だけ再生する */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .hero-video { display: block; }
}
/* データ節約モードでは動画を出さない */
@media (prefers-reduced-data: reduce) {
  .hero-video { display: none; }
}

/* ---------- ヒーロー本文 ---------- */
.hero-v2 .hero-season-copy {
  font-size: clamp(0.95rem, 2.6vw, 1.15rem);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-sm);
}
.hero-v2 .hero-title {
  font-size: clamp(2.1rem, 6.2vw, 3.9rem);
  line-height: 1.14;
  max-width: min(100%, 920px);
  letter-spacing: -0.03em;
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.42);
  margin-bottom: var(--space-lg);
}

/* 入場。fill-modeがbackwardsなので終了後は通常の操作を邪魔しない */
@media (prefers-reduced-motion: no-preference) {
  .hero-v2 .hero-season-copy,
  .hero-v2 .hero-title,
  .hero-v2 .hero-search,
  .hero-v2 .stay-conditions-hero,
  .hero-v2 .hero-index-title,
  .hero-v2 .hero-chips {
    animation: hero-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(var(--d, 0) * 130ms + 80ms);
  }
  .hero-v2 .hero-index > li {
    animation: hero-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: calc(720ms + var(--i) * 110ms);
  }
}
@keyframes hero-in {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-v2 .hero-title { animation-name: hero-title-in; animation-duration: 1s; }
}
@keyframes hero-title-in {
  from { opacity: 0; transform: translate3d(0, 34px, 0) scale(0.955); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 検索を主役にする ---------- */
.hero-v2 .hero-search {
  align-items: center;
  gap: 0;
  padding: 8px 8px 8px 16px;
  max-width: 640px;
  box-shadow: 0 16px 44px rgba(12, 15, 26, 0.28), 0 2px 6px rgba(12, 15, 26, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-v2 .hero-search:focus-within {
  transform: translate3d(0, -3px, 0);
  box-shadow:
    0 22px 54px rgba(12, 15, 26, 0.34),
    0 0 0 3px var(--color-accent-season-soft);
}
.hero-search-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
}
.hero-search-icon svg { width: 20px; height: 20px; fill: var(--color-text-secondary); }
.hero-v2 .hero-search input { padding-left: 10px; font-size: 1.02rem; }
.hero-v2 .btn-primary { transition: transform 0.15s ease, background 0.15s ease; }
.hero-v2 .btn-primary:hover { transform: translate3d(0, -1px, 0); }

.hero-v2 .hero-chips { margin-top: var(--space-lg); }
.hero-v2 .hero-chips a { transition: transform 0.15s ease, background 0.15s ease; }
.hero-v2 .hero-chips a:hover { transform: translate3d(0, -2px, 0); }

/* ---------- ヒーローの日程・人数 ---------- */
/* 半透明にすると日付ピッカーとselectの選択肢が読めなくなるため、検索窓と同じ白で統一する */
.stay-conditions-hero { max-width: 700px; }
.stay-conditions-hero label {
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.stay-conditions-hero input,
.stay-conditions-hero select {
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(12, 15, 26, 0.20);
}

/* ---------- 1画面目に出す地域別の宿の参考価格 ---------- */
.hero-index-title {
  margin: var(--space-lg) 0 var(--space-sm);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.92;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.hero-index-title + .hero-index { margin-top: 0; }

.hero-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: var(--space-lg);
}
/* 狭幅は横スクロール。縦積みにするとヒーローが1画面に収まらなくなる */
@media (max-width: 599px) {
  .hero-index {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -16px;
    padding-inline: 16px;
  }
  .hero-index::-webkit-scrollbar { display: none; }
  .hero-index > li { flex: 0 0 auto; scroll-snap-align: start; }
}
.hero-index a {
  /* 4枚を1行に収めるため、名前を1行目・金額を2行目に分ける
     (横一列にすると「오키나와/현」のように地域名が途中で折り返す) */
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  align-items: baseline;
  gap: 2px 8px;
  padding: 11px 16px;
  border-radius: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.36);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 8px 24px rgba(12, 15, 26, 0.22);
  transition: transform 0.2s ease, background 0.2s ease;
}
.hero-index a:hover {
  transform: translate3d(0, -3px, 0);
  background: rgba(255, 255, 255, 0.26);
}
.hi-name {
  flex: 0 0 100%;
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.9;
  white-space: nowrap;
}
.hi-median {
  font-size: 1.2rem;
  white-space: nowrap;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.hi-delta {
  font-size: 0.76rem;
  white-space: nowrap;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--radius-button);
  font-variant-numeric: tabular-nums;
}
.hi-delta.delta-down { background: rgba(255, 255, 255, 0.94); color: #0a6547; }
.hi-delta.delta-up   { background: rgba(255, 255, 255, 0.94); color: #b23131; }
.hi-delta.delta-flat { background: rgba(255, 255, 255, 0.24); color: #fff; }
/* 半透明を弱めたい環境では塗りつぶしへ落とす */
@media (prefers-reduced-transparency: reduce) {
  .hero-index a {
    background: rgba(18, 20, 32, 0.80);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---------- スクロールできることを示す ---------- */
.hero-cue {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 1;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-button);
  background: rgba(14, 16, 28, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 2px 14px rgba(12, 15, 26, 0.40);
  pointer-events: none;
}
.hero-cue span {
  position: absolute;
  left: 50%;
  top: 8px;
  margin-left: -2px;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.92);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-cue span { animation: cue-bob 1.9s ease-in-out infinite; }
}
@keyframes cue-bob {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 1; }
  60%      { transform: translate3d(0, 15px, 0); opacity: 0.15; }
}

@media (min-width: 900px) {
  .hero-v2 {
    min-height: calc(100vh - 56px);
    min-height: calc(100svh - 56px);
  }
  .hero-v2 .hero-inner > *:not(.hero-title) { max-width: 760px; }
  /* ウォン表記は桁が多いので、中央値チップだけ横幅の上限を広げて1行に収める */
  .hero-v2 .hero-inner > .hero-index { max-width: 100%; }
}

/* FHD(1920)以上では要素が画面に対して小さく見えるので、一段スケールを上げる */
@media (min-width: 1500px) {
  .hero-v2 .hero-season-copy { font-size: 1.3rem; margin-bottom: var(--space-md); }
  .hero-v2 .hero-title {
    font-size: clamp(4.4rem, 4.6vw, 6rem);
    /* 文字が大きくなる分、折り返さないよう横幅の上限も上げる */
    max-width: min(100%, 1300px);
    margin-bottom: var(--space-xl);
  }
  .hero-v2 .hero-inner > *:not(.hero-title) { max-width: 1000px; }
  .hero-v2 .hero-search { max-width: 940px; padding: 12px 12px 12px 22px; }
  .hero-v2 .hero-search input { font-size: 1.15rem; }
  .hero-v2 .hero-search .btn { padding: 14px 30px; font-size: 1rem; }
  .hero-search-icon { width: 26px; height: 26px; }
  .hero-search-icon svg { width: 24px; height: 24px; }
  .hero-v2 .stay-conditions-hero { max-width: 940px; }
  .hero-v2 .stay-conditions-hero label { font-size: 0.85rem; }
  .hero-v2 .stay-conditions-hero input,
  .hero-v2 .stay-conditions-hero select { padding: 12px 14px; font-size: 1.05rem; }
  .hero-v2 .hero-inner > .hero-index { max-width: 100%; }
  .hero-index { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
  .hero-index a { padding: 14px 20px; border-radius: 18px; }
  .hero-v2 .hero-index-title { font-size: 1rem; }
  .hi-name { font-size: 0.92rem; }
  .hi-median { font-size: 1.5rem; }
  .hi-delta { font-size: 0.85rem; padding: 4px 11px; }
}

/* =====================================================================
   2画面目以降
   ===================================================================== */

/* ---------- スクロール出現(CSSのscroll駆動アニメーション・JSゼロ) ---------- */
/* IntersectionObserverを使わない理由:
   - JSが遅れる/落ちると本文がopacity:0のまま残る事故が起きる。@supportsで囲えば
     「動かせるブラウザだけが隠す」ので、非対応環境は最初から静的に全部見える
   - 合成スレッドで動くためメインスレッドの負荷がほぼ無い(処理を重くしない要件) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal,
    .reveal-group > * {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
    /* 同じ行のカードを少しずつずらす */
    .reveal-group > *:nth-child(2) { animation-range: entry 0% cover 28%; }
    .reveal-group > *:nth-child(3) { animation-range: entry 0% cover 32%; }
    .reveal-group > *:nth-child(n + 4) { animation-range: entry 0% cover 35%; }
  }
}
@keyframes reveal-in {
  from { opacity: 0; transform: translate3d(0, 30px, 0) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 地域カード: 中央値と変化率を読みやすく ---------- */
/* 主役は変化率、中央値は補足という順序は変えない(ADR-0006) */
.region-bento .region-delta-block {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: var(--radius-button);
  background: var(--delta-bg, var(--color-surface-alt));
  margin-bottom: 6px;
}
.region-bento .delta-down { --delta-bg: rgba(14, 138, 95, 0.11); }
.region-bento .delta-up   { --delta-bg: rgba(214, 69, 69, 0.11); }
.region-bento .delta-flat { --delta-bg: var(--color-surface-alt); }
.region-bento .region-price-value { font-size: 1.18rem; }
.region-bento .region-name { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.region-bento .card:hover .region-name { transform: translate3d(0, -3px, 0); }
.region-bento .card-media img { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.region-bento .card:hover .card-media img { transform: scale(1.05); }
/* 地域名を写真の上でも確実に読ませる(冬・夏の明るい絵で薄くなるため) */
.region-bento .card-media::after {
  background: linear-gradient(180deg, transparent 34%, rgba(12, 15, 26, 0.62));
}
/* カードの高さが揃うようCTAを下端へ寄せる */
.region-bento > .card { display: flex; flex-direction: column; }
/* align-items:flex-start を付けないと、変化率のピルが横いっぱいに伸びる */
.region-bento > .card .card-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.region-bento > .card .card-actions { margin-top: auto; align-self: stretch; }

@media (min-width: 900px) {
  /* 4エリアなので2×2。3列にすると4枚目だけ次の行に残って空セルができる */
  .region-bento.card-grid-3 { grid-template-columns: 1.15fr 1fr; }
  .region-bento > .card:first-child .card-media { aspect-ratio: 16 / 11; }
  .region-bento > .card:first-child .region-name { font-size: 1.55rem; }
}

/* ---------- 季節ガイドが1件のときは横並びの特集カードにする ---------- */
@media (min-width: 900px) {
  .season-feature > .card:only-child {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
  }
  .season-feature > .card:only-child .card-media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 300px;
  }
  .season-feature > .card:only-child .card-body {
    align-self: center;
    padding: var(--space-xl);
  }
  .season-feature > .card:only-child .guide-title { font-size: 1.5rem; }
  .season-feature > .card:only-child .guide-summary { -webkit-line-clamp: 3; }
}

/* ---------- 最新ガイド: 狭幅は横スクロールのレール ---------- */
@media (max-width: 899px) {
  .card-grid.guide-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -16px;
    padding-inline: 16px;
    padding-bottom: 4px;
  }
  .card-grid.guide-rail::-webkit-scrollbar { display: none; }
  .card-grid.guide-rail > .card {
    flex: 0 0 76%;
    scroll-snap-align: start;
  }
}

/* ---------- タグ ---------- */
.tag-cloud-v2 a { transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.tag-cloud-v2 a:hover { transform: translate3d(0, -2px, 0); }