/* =========================================================================
   scene-captions.css — 見せ場キャプションの専用演出（内田指示・2026-08-09）
   -------------------------------------------------------------------------
   それまで .bs-caption（左下／右下・横書き）で統一していた6箇所を、
   場面ごとに違う「読ませ方」に差し替える：
     ・縦書き＋左右中央（風／花火／マシュマロ／寝袋）
     ・中央に大きく＋にじみ演出（バーベキュー／星空）
   plates.css の `.bs-scene > *:not(...)` は position:relative を強制するので、
   このファイルの2クラス（--vertical / --center）はあらかじめ除外指定済み
   （plates.css 側で対応済み）。
   ========================================================================= */

/* ---------- 縦書き（左右中央） ---------- */
.bs-caption--vertical {
  position: absolute;
  top: 50%;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  max-width: none;
  max-height: min(70svh, 720px);
  margin: 0; padding: 0;
  border: 0;
  font-family: var(--font-display);
  /* ★「もっとでかく、もっと太く」（内田・2026-08-09）。1.5rem止まりだった
     ものを見出し級まで引き上げ、weightも本文と同じ400から700へ。 */
  font-size: clamp(1.7rem, 3.8vw, 2.9rem);
  font-weight: 700;
  line-height: 2.05;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 30px color-mix(in srgb, var(--bg) 85%, transparent);
}
.bs-caption--vertical::before {
  content: "";
  display: block;
  inline-size: 1px; block-size: 2.6em;
  margin-inline: auto;
  margin-block-end: 0.9em;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
}
.bs-caption--vertical.is-left { left: clamp(20px, 5vw, 64px); }
.bs-caption--vertical.is-right { right: clamp(20px, 5vw, 64px); }

@media (max-width: 720px) {
  .bs-caption--vertical { font-size: clamp(1.35rem, 6.4vw, 1.9rem); max-height: 60svh; }
  .bs-caption--vertical.is-left { left: clamp(14px, 4vw, 28px); }
  .bs-caption--vertical.is-right { right: clamp(14px, 4vw, 28px); }
}

/* 位置＋中央寄せの共通土台（アニメーションは data-reveal 側で個別に足す） */
.has-js .bs-caption--vertical[data-reveal] { transform: translateY(-50%); }

/* ---------- 中央にドカンと（大きい・横書き） ---------- */
.bs-caption--center {
  position: absolute;
  top: 50%; left: 50%;
  margin: 0; padding: 0;
  border: 0;
  max-width: min(90vw, 44rem);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.2vw, 3.6rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 40px color-mix(in srgb, var(--bg) 75%, transparent);
}
.has-js .bs-caption--center[data-reveal] { transform: translate(-50%, -50%); }

@media (max-width: 720px) {
  .bs-caption--center { max-width: 88vw; font-size: clamp(1.5rem, 7vw, 2.2rem); }
}

/* =========================================================================
   演出（data-reveal の値ごと）
   ========================================================================= */

/* ① 風（ジップライン・右中央縦書き）
   「木と木の間を、風が抜けていく」＝横から吹き込んで、そのまま小さく揺れ続ける */
.has-js [data-reveal="wind"] {
  opacity: 0;
  transform: translateY(-50%) translateX(44px);
  filter: blur(7px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
}
.has-js [data-reveal="wind"].is-in {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  filter: blur(0);
  animation: bsWindSway 5.5s ease-in-out 1.1s infinite;
}
@keyframes bsWindSway {
  0%, 100% { transform: translateY(-50%) translateX(0) rotate(0deg); }
  50%      { transform: translateY(-50%) translateX(-6px) rotate(-0.6deg); }
}

/* ② 炎ににじむ（バーベキュー・中央大きく）
   「ボワーッと燃えてにじんで」＝熱でぼやけた状態から像を結び、そのまま揺らめく */
.has-js [data-reveal="blaze"] {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.12);
  filter: blur(22px) brightness(1.7) saturate(1.25);
  transition: opacity 1.3s var(--ease), transform 1.3s var(--ease), filter 1.3s var(--ease);
}
.has-js [data-reveal="blaze"].is-in {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0) brightness(1) saturate(1);
  animation: bsBlazeFlicker 2.6s ease-in-out 1.3s infinite;
}
@keyframes bsBlazeFlicker {
  0%, 100% { filter: brightness(1) blur(0); }
  45%      { filter: brightness(1.14) blur(0.4px); }
  62%      { filter: brightness(0.95) blur(0); }
}

/* ③ 火花（花火・右中央縦書き）
   眩しく弾けてから収まり、小さく明滅し続ける */
.has-js [data-reveal="spark"] {
  opacity: 0;
  transform: translateY(-50%) scale(1.55);
  filter: blur(5px) brightness(2.3);
  transition: opacity 0.9s var(--ease), transform 0.9s cubic-bezier(.2,1.6,.4,1), filter 0.9s var(--ease);
}
.has-js [data-reveal="spark"].is-in {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  filter: blur(0) brightness(1);
  animation: bsSparkTwinkle 3.2s ease-in-out 0.9s infinite;
}
@keyframes bsSparkTwinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: .80; }
}

/* ④ 星の輝き（満点の星空・中央大きく）
   静かに像を結び、ゆっくり光量が呼吸する（バーベキューより低体温・低速） */
.has-js [data-reveal="starburst"] {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  filter: blur(18px);
  transition: opacity 1.7s var(--ease), transform 1.7s var(--ease), filter 1.7s var(--ease);
}
.has-js [data-reveal="starburst"].is-in {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0);
  animation: bsStarGlow 4.6s ease-in-out 1.7s infinite;
}
@keyframes bsStarGlow {
  0%, 100% { text-shadow: 0 0 22px color-mix(in srgb, var(--ink) 50%, transparent), 0 2px 40px color-mix(in srgb, var(--bg) 75%, transparent); }
  50%      { text-shadow: 0 0 44px color-mix(in srgb, var(--ink) 78%, transparent), 0 2px 40px color-mix(in srgb, var(--bg) 75%, transparent); }
}

/* ⑤ 縦書きの静かな出現（マシュマロ／寝袋）。
   「アニメーションが寂しい」指摘を受け、他の演出と同じ「ぼけて→像を結ぶ」
   語彙をここにも足した（静かではあるが、素っ気なくはしない）。 */
.has-js [data-reveal="rise-v"] {
  opacity: 0;
  transform: translateY(calc(-50% + 26px));
  filter: blur(8px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
}
.has-js [data-reveal="rise-v"].is-in {
  opacity: 1;
  transform: translateY(-50%);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal="wind"], [data-reveal="blaze"], [data-reveal="spark"],
  [data-reveal="starburst"], [data-reveal="rise-v"] { animation: none !important; }
  /* ★brand.css の `[data-reveal]{transform:none!important}`（動きを止める既定）が、
     この2クラスにとっては「中央寄せそのものを解く」破壊的な副作用になる
     （translateY(-50%)・translate(-50%,-50%) が消えて左上へ飛ぶ）。
     位置指定として transform を使っている以上、reduced-motion でも
     中央寄せ分だけは残す必要がある。 */
  .bs-caption--vertical[data-reveal] { transform: translateY(-50%) !important; }
  .bs-caption--center[data-reveal] { transform: translate(-50%, -50%) !important; }
}

/* 2026-09 品質監査：白い空に重なる縦文字の周囲だけコントラストを保つ。 */
.bs-caption--vertical { isolation:isolate; text-shadow:0 1px 2px rgba(5,18,12,.9),0 2px 10px rgba(5,18,12,.75); }
.bs-caption--vertical::after { content:"";position:absolute;inset:-.65em -.5em;z-index:-1;pointer-events:none;background:rgba(8,24,16,.30);border-radius:45%;filter:blur(12px); }
@media(max-width:720px){
  .bs-header{gap:12px;padding-inline:16px;}
  .bs-header__logo--text{white-space:nowrap;font-size:clamp(13px,3.8vw,17px);letter-spacing:.04em;flex-shrink:0;}
  .bs-header__actions{gap:8px;min-width:0;}
  .bs-header__actions .bs-btn{white-space:nowrap;padding-inline:12px;font-size:12px;}
}