/* =========================================
   Scroll Reveal Animations
   - 既存style.cssに影響を与えないよう独立ファイル化
   ========================================= */

/* ベース: フェード＋上方向 */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1.1s cubic-bezier(.22,.61,.36,1),
    transform 1.1s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* スタガー: 子要素を順番に表示 */
.stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.22,.61,.36,1);
}
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: .05s; }
.stagger.in > *:nth-child(2) { transition-delay: .15s; }
.stagger.in > *:nth-child(3) { transition-delay: .25s; }
.stagger.in > *:nth-child(4) { transition-delay: .35s; }
.stagger.in > *:nth-child(5) { transition-delay: .45s; }
.stagger.in > *:nth-child(6) { transition-delay: .55s; }

/* ===== Hero: 読み込み時にフェードアップ ===== */
.hero-copy h1 {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFade 1.6s cubic-bezier(.22,.61,.36,1) .3s forwards;
}
.hero-copy p {
  opacity: 0;
  transform: translateY(14px);
  animation: heroFade 1.4s cubic-bezier(.22,.61,.36,1) .9s forwards;
}
.hero-copy .hero-logo {
  opacity: 0;
  transform: translateY(10px);
  animation: heroFade 1.4s cubic-bezier(.22,.61,.36,1) .1s forwards;
}
@keyframes heroFade {
  to { opacity: 1; transform: none; }
}

/* ===== Bow リボン: 中心からスケールイン ===== */
.bow.reveal {
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: center;
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.bow.reveal.in {
  opacity: 1;
  transform: scaleX(1);
}

/* ===== Pain cards: バウンスイン ===== */
.pain-grid.stagger > * {
  opacity: 0;
  transform: translateY(20px) scale(.92);
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform .9s cubic-bezier(.34,1.56,.64,1);
}
.pain-grid.stagger.in > * {
  opacity: 1;
  transform: none;
}

/* ===== Guide cloud cards: オーバーシュート ===== */
.guide-grid.stagger > * {
  opacity: 0;
  transform: translateY(30px) scale(.9);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(.34,1.56,.64,1);
}
.guide-grid.stagger.in > * {
  opacity: 1;
  transform: none;
}

/* ===== Reasons: 番号バッジ ===== */
.reason-row.reveal .reason-text .num {
  opacity: 0;
  transform: translateY(20px) rotate(-8deg);
  transition:
    opacity 1s ease .15s,
    transform 1s cubic-bezier(.22,.61,.36,1) .15s;
}
.reason-row.reveal.in .reason-text .num {
  opacity: 1;
  transform: none;
}

/* ===== Reasons: 画像をclip-pathでカーテンリビール ===== */
.reason-row.reveal .reason-image img {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(.77,0,.18,1);
}
.reason-row.reverse.reveal .reason-image img {
  clip-path: inset(0 0 0 100%);
}
.reason-row.reveal.in .reason-image img {
  clip-path: inset(0 0 0 0);
}

/* ===== Flow arrow: 縦方向スケール ===== */
.flow-arrow.reveal {
  opacity: 0;
  transform: scaleY(.2);
  transform-origin: top center;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.flow-arrow.reveal.in {
  opacity: 1;
  transform: none;
}

/* ===== Float CTA: 読み込み時ポップイン ===== */
.float-cta > a {
  opacity: 0;
  transform: scale(.6) translateX(40px);
  animation: ctaPop .9s cubic-bezier(.34,1.56,.64,1) forwards;
}
.float-cta > a:nth-child(1) { animation-delay: 1.6s; }
.float-cta > a:nth-child(2) { animation-delay: 1.75s; }
.float-cta > a:nth-child(3) { animation-delay: 1.9s; }
.float-cta > a:nth-child(4) { animation-delay: 2.05s; }
@keyframes ctaPop {
  to { opacity: 1; transform: none; }
}
/* SP時のbottom固定CTAは横スライドを抑える */
@media screen and (max-width: 850px) {
  .float-cta > a {
    transform: translateY(40px) scale(.95);
  }
}

/* ===== Reduced motion: アクセシビリティ ===== */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger > *,
  .bow.reveal,
  .polaroid.reveal,
  .reason-row.reveal .reason-text .num,
  .reason-row.reveal .reason-image img,
  .flow-arrow.reveal,
  .float-cta > a,
  .hero-copy h1,
  .hero-copy p,
  .hero-copy .hero-logo {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
}