@charset "UTF-8";

/* =============================================================
   animation.css
   Lenis（スムーススクロール）+ GSAP/ScrollTrigger 用の下地。
   - 個別の演出はJS（animation.js）から制御。
   - JSが無効／prefers-reduced-motion の場合は初期状態を解除して
     コンテンツが必ず表示されるようにする（フォールバック安全）。
   ============================================================= */

/* ---------- Lenis 本体（公式CSS相当を内蔵） ---------- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* =============================================================
   汎用リビールアニメーション
   使い方: 要素に data-anim="fade-up" などを付ける。
   任意で data-anim-delay="0.2"（秒）/ data-anim-stagger="0.1" を併用。
   ============================================================= */

/* 初期状態は JS が準備できたとき（html.anim-ready）だけ適用。
   → JS無効時やreduced-motion時はこのルールが効かず、要素は通常表示。 */
html.anim-ready [data-anim] {
  opacity: 0;
  will-change: transform, opacity;
}

html.anim-ready [data-anim="fade"] {
  opacity: 0;
}

html.anim-ready [data-anim="fade-up"] {
  transform: translateY(48px);
}

html.anim-ready [data-anim="fade-down"] {
  transform: translateY(-48px);
}

html.anim-ready [data-anim="fade-left"] {
  transform: translateX(48px);
}

html.anim-ready [data-anim="fade-right"] {
  transform: translateX(-48px);
}

html.anim-ready [data-anim="scale"] {
  transform: scale(0.88);
}

html.anim-ready [data-anim="zoom-out"] {
  transform: scale(1.12);
}

/* 子要素を順番に出す（親に data-anim="stagger" を付与）。
   親コンテナ自体は表示したまま。隠すのは子要素だけ。 */
html.anim-ready [data-anim="stagger"] {
  opacity: 1;
}

html.anim-ready [data-anim="stagger"] > * {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}

/* =============================================================
   キャラクター専用リビール（白い円ポップ → 下からマスク表示）
   初期状態はここで隠し、実際の動きは animation.js が制御。
   ============================================================= */
html.anim-ready #character .charaReveal .charaMask {
  transform: scale(0);
}

/* 画像の変形は GSAP に一本化（CSSのtranslateはyPercentと競合するため使わない）。
   ちらつき防止は opacity のみで行う。 */
html.anim-ready #character .charaReveal .charaMask img {
  opacity: 0;
}

/* =============================================================
   おしらせ見出し専用：文字パラパラ → 英字マスクイン
   ============================================================= */
.infoHeadingJa {
  display: inline-block;
}

.infoHeadingJa > span {
  display: inline-block;
}

.infoHeadingEn {
  display: block;
  overflow: hidden;
  width: fit-content;
  margin: 0 auto;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #00A0E2;
  letter-spacing: 0.2em;
  line-height: 1.1;
  clip-path: inset(0 0 0 0);
}

.infoHeadingEn > span {
  display: block;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
}

html.anim-ready .infoHeadingJa > span {
  opacity: 0;
  transform: translateY(1.2em);
  will-change: transform, opacity;
}

html.js .infoHeadingEn > span {
  transform: translateY(110%);
  will-change: transform;
}

html.js .infoHeadingEn {
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}

.infoHeading.is-info-heading-active .infoHeadingJa > span {
  opacity: 1;
  transform: translateY(0);
}

html.js .infoHeading.is-info-heading-active .infoHeadingEn {
  clip-path: inset(0 0 0 0) !important;
}

html.js .infoHeading.is-info-heading-active .infoHeadingEn > span {
  transform: translateY(0) !important;
}

/* reduced-motion を尊重：全ての初期状態を無効化して即表示 */
@media (prefers-reduced-motion: reduce) {
  html.anim-ready [data-anim],
  html.anim-ready [data-anim="stagger"] > *,
  html.anim-ready #character .charaReveal .charaMask,
  html.anim-ready #character .charaReveal .charaMask img,
  html.anim-ready .infoHeadingEn,
  html.anim-ready .infoHeadingJa > span,
  html.anim-ready .infoHeadingEn > span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
  }
}