/* ==========================================================================
   enhancements.css — 既存LPへの追加演出（独立ファイル）
   - 動きはすべて html.enh-motion（enhancements.js が付け外し）配下でのみ有効
   - enh-motion が無い状態（JS失敗 / reduce / motion-on無し / motion-paused）
     = 写真1枚目のみ表示・scale 1、CTA移動0、マーカー完成表示
   ========================================================================== */

/* ---------- 1. ヒーロー写真クロスフェード ---------- */

/* JS失敗時も1枚目だけが見える土台。2枚目以降は1枚目に重ねて非表示 */
.hero-photo {
  position: relative;
  overflow: hidden; /* scale(1.08) のはみ出しを枠内でクリップ */
}
.hero-photo .hero-slide ~ .hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

/* 演出中（.enh-hero は初期化成功時のみJSが付与） */
html.enh-motion .hero-photo.enh-hero .hero-slide {
  opacity: 0;
  transition: none;
}
html.enh-motion .hero-photo.enh-hero .hero-slide:first-of-type {
  position: relative; /* レイアウトは保持したまま z-index を効かせる */
}
/* 出ていく写真：下に残して不透明のまま（フェード中に背景が透けない） */
html.enh-motion .hero-photo.enh-hero .hero-slide.is-leaving {
  z-index: 1;
  opacity: 1;
  animation: enh-hero-zoom 5000ms cubic-bezier(.25, .1, .25, 1) forwards;
}
/* 入ってくる写真：上に重ねて 1400ms でフェードイン + 5秒ズームアウト */
html.enh-motion .hero-photo.enh-hero .hero-slide.is-active {
  z-index: 2;
  opacity: 1;
  transition: opacity 1400ms ease-in-out;
  animation: enh-hero-zoom 5000ms cubic-bezier(.25, .1, .25, 1) forwards;
}
/* transform ではなく個別プロパティ scale を使い、既存 transform と合成させる */
@keyframes enh-hero-zoom {
  from { scale: 1.08; }
  to   { scale: 1; }
}

/* ---------- 2. CTA マグネット ---------- */

/* 非移動の測定基準ラッパー（マグネットが初めて有効になった時だけJSが挿入） */
.enh-magnet {
  display: inline-block;
  max-width: 100%;
  vertical-align: inherit;
}
.enh-magnet.is-block {
  display: block;
}
/* 個別プロパティ translate を使い、既存 transform（hover等）と競合させない */
html.enh-motion .enh-magnet > .button-primary {
  translate: var(--enh-mx, 0px) var(--enh-my, 0px);
  transition: translate 500ms cubic-bezier(.22, 1, .36, 1);
}
html.enh-motion .enh-magnet.is-following > .button-primary {
  transition-duration: 180ms;
}
html.enh-motion .enh-magnet.is-static > .button-primary {
  transition: none;
}
html:not(.enh-motion) .enh-magnet > .button-primary {
  translate: none;
}

/* ---------- 3. 本文マーカー ---------- */

/* 既定＝完成表示（文字下40%のみ） */
.action-marker {
  background-image: linear-gradient(transparent 60%, rgba(201, 168, 106, .55) 60%);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone; /* 複数行でも各行に描画 */
}
html.enh-motion .action-marker:not(.is-marked) {
  background-size: 0% 100%;
}
html.enh-motion .action-marker.is-marked {
  transition: background-size 1400ms cubic-bezier(.25, .1, .25, 1) 400ms;
}

/* ---------- 保険：OS設定で動きを減らす場合はCSS単独でも静止 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.enh-motion .hero-photo.enh-hero .hero-slide {
    animation: none !important;
    transition: none !important;
  }
  html.enh-motion .enh-magnet > .button-primary {
    translate: none !important;
    transition: none !important;
  }
  html.enh-motion .action-marker,
  html.enh-motion .action-marker:not(.is-marked) {
    background-size: 100% 100% !important;
    transition: none !important;
  }
}