:root{
  --top-anim-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --top-anim-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --top-anim-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --top-anim-dur: .8s;
  --hero-mountain-drop: clamp(14px, 3vw, 42px);
  --hero-mountain-scroll-left-x: clamp(-120px, -8vw, -28px);
  --hero-mountain-scroll-right-x: clamp(28px, 8vw, 120px);
}

@keyframes bounce-in{
  0% {
    transform: translateY(20px) scale(0.6);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* ユーザーが「動きを控える」を選んでいる場合はアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Main Visual Slider (opacity/scale crossfade) ===== */
.main-visual__slider > li{
  opacity: 0;
  transform: scale(0.985);
  transition:
    opacity var(--top-anim-dur) var(--top-anim-ease),
    transform calc(var(--top-anim-dur) * 1.5) var(--top-anim-ease);
}

.main-visual__slider > li.is-active{
  opacity: 1;
  transform: scale(1);
}

/* ===== Hero Animation ===== */

/* START: 要素を非表示*/
.hero__movie > :where(:not(.image__back--cloud):not(.image__back--ground):not(.image__back--bird)){
  opacity: 0;
}
/* WP 固定フロントでは body が .home でないことがあるため .front-page を併記 */
.home .hero__main,
.front-page .hero__main,
.home .hero__people,
.front-page .hero__people{
  opacity: 0;
}
.home .hero__front > *,
.front-page .hero__front > *{
  opacity: 0;
}

/* STEP1: 手前の山をスライドイン */

.hero__movie .jsHeroMountainMain{
  opacity: 0;
  transform: translateX(-50%) translateY(var(--hero-mountain-drop));
  transition:
    opacity 1.5s var(--top-anim-ease-expo),
    transform 1.7s var(--top-anim-ease-expo);
  will-change: opacity, transform;
}

.hero__movie .jsHeroMountainMain.is-visible{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* left/right mountains: opacity 0 -> 1 from bottom */
.hero__front .jsHeroMountainLeft,
.hero__front .jsHeroMountainRight{
  opacity: 0;
  transform: translateY(var(--hero-mountain-drop));
  transition:
    opacity 1.5s var(--top-anim-ease),
    transform 1.7s var(--top-anim-ease);
  will-change: opacity, transform;
}

.hero__front .jsHeroMountainLeft.is-visible,
.hero__front .jsHeroMountainRight.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ScrollTrigger が transform(x) を更新するとき、CSS の transition と競合してガタつくのを防ぐ（JS が入場後に付与） */
.hero__front .jsHeroMountainLeft.js-mountain-parallax,
.hero__front .jsHeroMountainRight.js-mountain-parallax{
  transition-property: opacity;
}

/* leaves: fade only */
.hero__front .jsHeroLeaf{
  opacity: 0;
  transition: opacity 1300ms var(--top-anim-ease);
  will-change: opacity;
}

.hero__front .jsHeroLeaf.is-visible{
  opacity: 1;
}

/* ヒーロー葉（.jsHeroLeafScroll）: 初期傾き。GSAP が 0 へ戻す */
.hero__front .jsHeroLeafScroll.js-leaf-tilt--neg{
  transform: rotate(16deg) translateX(10px);
  transform-origin: center center;
}
.hero__front .jsHeroLeafScroll.js-leaf-tilt--pos{
  transform: rotate(-16deg) translateX(-10px);
  transform-origin: center center;
}

/* STEP2: 各要素をフェードイン */
.home .hero__main.is-visible,
.front-page .hero__main.is-visible{
  opacity: 1;
  transition: opacity 1.1s var(--top-anim-ease);
}

/* スライド部分 */
.jsHeroMainVisual{
  opacity: 0;
  transform: translateY(18px) scale(0.93);
  will-change: opacity, transform;
}
.jsHeroMainVisual.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: bounce-in .5s var(--top-anim-ease-bounce) forwards;
}

/* キャッチとスライドの飾り */
.jsHeroMainCatch,
.jsHeroMainVisualDeco{
  opacity: 0;
}
.jsHeroMainCatch.is-visible,
.jsHeroMainVisualDeco.is-visible{
  opacity: 1;
  transition: 1.2s opacity .4s var(--top-anim-ease);
}

/* 管理棟 */
.hero__movie .jsHeroBuilding{
  opacity: 0;
}
.hero__movie .jsHeroBuilding.is-visible{
  opacity: 1;
  transition: 1.2s opacity .4s var(--top-anim-ease);
}

/* リード文 */
.jsHeroLead{
  opacity: 0;
  transform: translateY(6px);
  transition: 1.8s opacity .6s var(--top-anim-ease), 2s transform .6s var(--top-anim-ease);
}

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

/* STEP2: jsHeroPeople  をフェードイン */
.hero__front .image__people{
  opacity: 0;
  transition: 1.5s opacity .5s var(--top-anim-ease);
}

.hero__front .image__people.is-visible{
  opacity: 1;
}