/**
 * BELAUN - スクロールで現れる動き（reveal）
 *
 * 語彙は1つ：下から少し浮き上がってフェードイン、1回きり。
 * 写真は枠の中で 1.06 → 1.0 に縮みながら現れる（ピントが合う）。
 * 区切り線は左から右へ伸びる。
 *
 * 対象の指定は reveal.js が既存クラスを拾って data-reveal を付ける。
 * html に .js-reveal が付くまで何も隠さない（JS が動かなくても全部見える）。
 */

/* ===== 隠す（JS 起動後のみ） ===== */
html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

html.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* 英字の飾り見出し（Meddon）は動かさずフェードだけ。動くと筆記体が揺れて見える */
html.js-reveal [data-reveal="fade"] {
  transform: none;
}

/* ===== 写真：枠の中でピントが合う ===== */
html.js-reveal [data-reveal="image"] {
  opacity: 0;
  transform: none;
  transition: opacity 1.2s ease;
}
html.js-reveal [data-reveal="image"] img {
  transform: scale(1.06);
  transition: transform 1.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.js-reveal [data-reveal="image"].is-revealed img {
  transform: scale(1);
}
/* 既存のホバー拡大は reveal 完了後にそのまま効かせる */
html.js-reveal [data-reveal="image"].is-revealed:hover img {
  transform: scale(1.05);
}

/* ===== 区切り線：左から伸びる ===== */
html.js-reveal [data-reveal="line"] {
  opacity: 1;
  transform: none;
  transition: none;
  border-top-color: transparent;
  position: relative;
}
html.js-reveal [data-reveal="line"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 1px;
  width: 0;
  background: rgba(var(--belaun-primary-rgb), 0.15);
  transition: width 1.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.js-reveal [data-reveal="line"].is-revealed::before {
  width: 100%;
}

/* ===== ヒーロー：読み込み時だけ ===== */
html.js-reveal .belaun-hero__bg-img {
  transform: scale(1.08);
  transition: transform 8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.js-reveal.is-loaded .belaun-hero__bg-img {
  transform: scale(1);
}
html.js-reveal .belaun-hero__catchphrase-subtitle,
html.js-reveal .belaun-hero__catchphrase-title,
html.js-reveal .belaun-hero__catchphrase-meddon,
html.js-reveal .belaun-sidebar__catchphrase-subtitle,
html.js-reveal .belaun-sidebar__catchphrase-title,
html.js-reveal .belaun-sidebar__catchphrase-meddon {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.js-reveal.is-loaded .belaun-hero__catchphrase-subtitle,
html.js-reveal.is-loaded .belaun-sidebar__catchphrase-subtitle { opacity: 1; transform: none; transition-delay: 0.4s; }
html.js-reveal.is-loaded .belaun-hero__catchphrase-title,
html.js-reveal.is-loaded .belaun-sidebar__catchphrase-title    { opacity: 1; transform: none; transition-delay: 0.7s; }
html.js-reveal.is-loaded .belaun-hero__catchphrase-meddon,
html.js-reveal.is-loaded .belaun-sidebar__catchphrase-meddon   { opacity: 1; transform: none; transition-delay: 1s; }

/* ===== コンセプトの背景（島の地図）：見えたらゆっくり濃くなる ===== */
html.js-reveal .belaun-concept__bg-img {
  opacity: 0.12;
  transform: scale(1.1);
  transition: opacity 2.2s ease, transform 14s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.js-reveal .belaun-concept.is-revealed .belaun-concept__bg-img {
  opacity: 0.15;
  transform: scale(1);
}

/* ===== スマホ：距離を短く、速く ===== */
@media (max-width: 767px) {
  html.js-reveal [data-reveal] {
    transform: translateY(16px);
    transition-duration: 0.75s;
  }
  /* お知らせ背景の background-attachment: fixed は iOS で効かず、ガタつく */
  .belaun-news__bg {
    background-attachment: scroll;
  }
}

/* ===== 動きを減らす設定の人には出さない ===== */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal [data-reveal],
  html.js-reveal [data-reveal] img,
  html.js-reveal [data-reveal="line"]::before,
  html.js-reveal .belaun-hero__bg-img,
  html.js-reveal .belaun-hero__catchphrase-subtitle,
  html.js-reveal .belaun-hero__catchphrase-title,
  html.js-reveal .belaun-hero__catchphrase-meddon,
  html.js-reveal .belaun-sidebar__catchphrase-subtitle,
  html.js-reveal .belaun-sidebar__catchphrase-title,
  html.js-reveal .belaun-sidebar__catchphrase-meddon {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    width: auto;
  }
  html.js-reveal [data-reveal="line"] { border-top-color: rgba(var(--belaun-primary-rgb), 0.1) !important; }
  html.js-reveal [data-reveal="line"]::before { display: none; }
}