@charset "UTF-8";
/* ================================================
   ANIMATION CSS COLLECTION
   （LaotourRadioテーマ共通用）
================================================ */

/* ------------------------------------------------
   1. Hover Button: 横から色が差し込むボタン
------------------------------------------------ */
.btn {
  position: relative;
  display: inline-block;
  padding: 0.8em 2.2em;
  border: 2px solid var(--color-main, #87774a);
  color: var(--color-main, #87774a);
  background: transparent;
  overflow: hidden;
  transition: color 0.4s ease;
  z-index: 0;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--color-main, #87774a);
  z-index: -1;
  transition: width 0.4s ease;
}

.btn:hover {
  color: #fff;
}

.btn:hover::before {
  width: 100%;
}

/* ------------------------------------------------
   2. Fade-Up: スクロールでふわっと上に表示
------------------------------------------------ */
.fadeup {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fadeup.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fadein {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fadein.is-visible {
  opacity: 1;
}

/* ------------------------------------------------
   3. Stylish Image Reveal: 画像がスタイリッシュに表示
------------------------------------------------ */
.reveal {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.reveal img {
  transform: scale(1.1);
  opacity: 0;
  transition: opacity 1s ease, transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-main, #87774a);
  transform: translateX(-100%);
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.reveal.is-visible::before {
  transform: translateX(100%);
}

.reveal.is-visible img {
  opacity: 1;
  transform: scale(1);
}

/* ------------------------------------------------
   4. Hover Zoom: ホバーでゆっくり拡大
------------------------------------------------ */

/* 汎用ホバー拡大クラス */
.hover-zoom {
  display: inline-block;
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  will-change: transform;
}

.hover-zoom:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

/* 画像専用バージョン */
.hover-zoom--img img {
  transition: transform 0.8s ease;
  transform-origin: center center;
}

.hover-zoom--img:hover img {
  transform: scale(1.08);
}

/* やや強調されたカード用 */
.hover-zoom--card {
  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1),
              box-shadow 0.8s ease;
}
.hover-zoom--card:hover {
  transform: scale(1.04);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}