/* ============================================================
   Wataru Design System — web-animations.css
   スクロール演出・浮遊・CTA発光(tokens.css とセットで読み込む)
   JS 側は smooth.js(Lenis+GSAP)が無くても
   IntersectionObserver フォールバックで .visible が付く設計
   出典: 260619_website css/animations.css + 260621 globals.css
   ============================================================ */

/* ---------- reveal(スクロールで下からフェードイン) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal.from-left  { transform: translateX(-48px); }
.reveal.from-right { transform: translateX(48px); }
.reveal.scale-in   { transform: scale(.92); }

/* スタッガー(d1→d5 の順に時間差で出る) */
.reveal.d1, .mask.d1 { transition-delay: .08s; }
.reveal.d2, .mask.d2 { transition-delay: .18s; }
.reveal.d3, .mask.d3 { transition-delay: .28s; }
.reveal.d4, .mask.d4 { transition-delay: .38s; }
.reveal.d5, .mask.d5 { transition-delay: .48s; }

/* ---------- mask(見出し1行ごとのせり上がり) ----------
   使い方(二重spanが必須):
   <h1>
     <span class="mask d1"><span>1行目、</span></span><br>
     <span class="mask d2"><span>2行目。</span></span>
   </h1>
   ⚠ GSAP併用時の教訓: transitionとgsap.toが競合するので
   smooth.js は必ず gsap.set で初期値を固定してから gsap.to する(set+to方式) */
.mask {
  display: inline-block; vertical-align: top;
  opacity: 0; transform: translateY(44px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}
.mask.visible { opacity: 1; transform: none; }
.mask > span { display: inline-block; }

/* ---------- 浮遊(マスコット・装飾用) ---------- */
@keyframes float-y    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes float-soft { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes sway       { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.anim-float      { animation: float-y 6s var(--ease) infinite; }
.anim-float-soft { animation: float-soft 7s var(--ease) infinite; }
.anim-sway       { animation: sway 5s var(--ease) infinite; transform-origin: bottom center; }

/* ---------- パララックス(マウス視差。JSが --mx/--my を供給) ---------- */
.parallax { transition: transform .1s linear; }
.p-soft { transform: translate3d(calc(var(--mx,0) * 14px), calc(var(--my,0) * 14px), 0); }
.p-mid  { transform: translate3d(calc(var(--mx,0) * 30px), calc(var(--my,0) * 26px), 0); }
.p-deep { transform: translate3d(calc(var(--mx,0) * 52px), calc(var(--my,0) * 44px), 0); }

/* ---------- CTA発光+光沢(最重要ボタン1個だけに付ける) ---------- */
@keyframes ctaGlow {
  0%, 100% { box-shadow: var(--sh-cta); }
  50%      { box-shadow: var(--sh-cta-hover); }
}
@keyframes ctaSheen {
  0%        { transform: translateX(-140%) skewX(-20deg); }
  55%, 100% { transform: translateX(280%)  skewX(-20deg); }
}
.cta-shine {
  position: relative; overflow: hidden; isolation: isolate;
  animation: ctaGlow 2.8s ease-in-out infinite;
}
.cta-shine::after {
  content: ""; position: absolute; top: 0; left: 0; z-index: 0;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
  transform: translateX(-140%) skewX(-20deg);
  animation: ctaSheen 3.6s ease-in-out infinite;
}
.cta-shine > * { position: relative; z-index: 1; }

/* ---------- 波(横に流れる装飾ストリップ) ---------- */
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wave-strip { position: absolute; left: 0; width: 200%; height: 100%; }
.wave-strip.move { animation: drift 18s linear infinite; }
.wave-strip.move.slow { animation-duration: 30s; }

/* ---------- アクセシビリティ: 動きを減らす設定を尊重 ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .mask { opacity: 1 !important; transform: none !important; transition: none !important; }
  .anim-float, .anim-float-soft, .anim-sway,
  .cta-shine, .cta-shine::after, .wave-strip.move { animation: none !important; }
  .parallax, .p-soft, .p-mid, .p-deep { transform: none !important; }
}