/* ===========================================================
   animations.css — Phase 3 で本実装(Ken Burns、フェードイン、脈動など)
   =========================================================== */

/* ====== Ken Burns(ヒーロー + 結びセクション) ====== */

@keyframes kenBurns {
  0%   { transform: scale(1.0) translate(0, 0); }
  50%  { transform: scale(1.12) translate(-2%, -1%); }
  100% { transform: scale(1.05) translate(1%, 0.5%); }
}

.ken-burns {
  animation: kenBurns var(--duration-ken-burns) ease-in-out infinite alternate;
  will-change: transform;
}

/* ====== スクロール誘導アイコンの脈動(kudaka 踏襲) ====== */

@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.scroll-indicator .scroll-line {
  animation: scrollLine 2.5s var(--ease-breathe) infinite;
}

/* ====== フェードイン基盤(JS が読み込まれた時のみ起動) ====== */
/*
  .has-js が html 要素に付いているときだけ、初期状態を不可視に。
  JS が読み込まれない場合は、すべてのコンテンツが通常通り表示される(no-JS フォールバック)。
*/

.has-js .fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-quietly),
              transform var(--duration-slow) var(--ease-quietly);
  will-change: opacity, transform;
}

.has-js .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ====== セクションヘッダー子要素の段階的立ち上がり ====== */

.has-js .section-header.fade-in .section-eyebrow,
.has-js .section-header.fade-in .section-title,
.has-js .section-header.fade-in .section-lead {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-quietly),
              transform var(--duration-slow) var(--ease-quietly);
}

.has-js .section-header.fade-in.visible .section-eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.has-js .section-header.fade-in.visible .section-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}

.has-js .section-header.fade-in.visible .section-lead {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* ====== 4作品カードの時間差フェードイン(0.15s ずつディレイ) ====== */

.has-js .work-card.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-slow) var(--ease-quietly),
              transform var(--duration-slow) var(--ease-quietly);
}

.has-js .work-card.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.has-js .work-card[data-work="1"].fade-in.visible { transition-delay: 0s; }
.has-js .work-card[data-work="2"].fade-in.visible { transition-delay: 0.15s; }
.has-js .work-card[data-work="3"].fade-in.visible { transition-delay: 0.30s; }
.has-js .work-card[data-work="4"].fade-in.visible { transition-delay: 0.45s; }

/* ====== 五感カードの時間差フェードイン(0.2s ずつ) ====== */

.has-js .sense-card.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-slow) var(--ease-quietly),
              transform var(--duration-slow) var(--ease-quietly);
}

.has-js .sense-card.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.has-js .sense-card:nth-child(1).fade-in.visible { transition-delay: 0s; }
.has-js .sense-card:nth-child(2).fade-in.visible { transition-delay: 0.2s; }
.has-js .sense-card:nth-child(3).fade-in.visible { transition-delay: 0.4s; }
.has-js .sense-card:nth-child(4).fade-in.visible { transition-delay: 0.6s; }

/* ====== HUD オーバーレイのフェードイン(画面読み込み後にゆっくり立ち上がる) ====== */

.has-js .hud {
  opacity: 0;
  transition: opacity var(--duration-very-slow) var(--ease-quietly);
}

.has-js .hud.is-shown {
  opacity: 1;
}

/* ====== ヒーロー画像 → 動画クロスフェード ====== */

.hero-video {
  opacity: 0;
}

.hero-video.is-ready {
  opacity: 1;
}

.has-js .hero-image {
  transition: opacity var(--duration-very-slow) var(--ease-quietly);
}

.has-js .hero-image.is-faded {
  opacity: 0;
}

/* ====== ヒーローコンテンツのフェードイン(ロード直後にゆっくり立ち上がる) ====== */

.has-js .hero-title,
.has-js .hero-subtitle {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-very-slow) var(--ease-quietly),
              transform var(--duration-very-slow) var(--ease-quietly);
}

.has-js .hero.is-shown .hero-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

.has-js .hero.is-shown .hero-subtitle {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.2s;
}

.has-js .scroll-indicator {
  opacity: 0;
  transition: opacity var(--duration-very-slow) var(--ease-quietly);
  transition-delay: 2s;
}

.has-js .hero.is-shown .scroll-indicator {
  opacity: 0.7;
}

/* ====== 衣装バリエーション切替 ====== */

.costume-after .variant-image {
  transition: opacity var(--duration-normal) var(--ease-quietly);
}

/* ====== 言語切替デモのオーバーレイのテキストフェード ====== */

.language-demo-overlay .lang-label,
.language-demo-overlay .lang-text {
  transition: opacity var(--duration-fast) var(--ease-quietly);
}

.language-demo-overlay.is-switching .lang-label,
.language-demo-overlay.is-switching .lang-text {
  opacity: 0;
}

/* ====== 動画(work-card のホバー時) ====== */

.work-media .work-video {
  transition: opacity var(--duration-normal) var(--ease-quietly);
}

/* ====== Reduced motion 対応 ====== */
/* 視差を抑制したいユーザー向けに、Ken Burns・脈動・大きな移動を無効化 */

@media (prefers-reduced-motion: reduce) {
  .ken-burns,
  .scroll-indicator .scroll-line {
    animation: none;
  }

  .has-js .fade-in,
  .has-js .fade-in.visible,
  .has-js .section-header.fade-in .section-eyebrow,
  .has-js .section-header.fade-in .section-title,
  .has-js .section-header.fade-in .section-lead,
  .has-js .section-header.fade-in.visible .section-eyebrow,
  .has-js .section-header.fade-in.visible .section-title,
  .has-js .section-header.fade-in.visible .section-lead,
  .has-js .work-card.fade-in,
  .has-js .work-card.fade-in.visible,
  .has-js .sense-card.fade-in,
  .has-js .sense-card.fade-in.visible,
  .has-js .hero-title,
  .has-js .hero-subtitle,
  .has-js .hero.is-shown .hero-title,
  .has-js .hero.is-shown .hero-subtitle {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ====== 五感カードの「呼吸する光」(視覚・聴覚・嗅覚の静止画) ====== */
/*
   静止画の sense-media img の明るさをゆっくり呼吸させる。
   触覚(ウローカー)は動画なので、:not(.sense-card-urouka) で除外。
   3枚それぞれタイミングをずらし、機械的にならないように。
*/

@keyframes senseLightBreathe {
  0%, 100% { filter: brightness(1.0); }
  50%      { filter: brightness(1.05); }
}

.sense-card:not(.sense-card-urouka) .sense-media img {
  animation: senseLightBreathe 8s ease-in-out infinite;
  will-change: filter;
}

.sense-card:nth-child(1):not(.sense-card-urouka) .sense-media img {
  animation-delay: 0s;
}
.sense-card:nth-child(2):not(.sense-card-urouka) .sense-media img {
  animation-delay: -2.7s;
}
.sense-card:nth-child(4):not(.sense-card-urouka) .sense-media img {
  animation-delay: -5.3s;
}

/* Reduced motion 対応(視差を抑制したいユーザーには動きを止める) */
@media (prefers-reduced-motion: reduce) {
  .sense-card:not(.sense-card-urouka) .sense-media img {
    animation: none;
  }
}