/* ===========================================================
   Animations (GSAP + ScrollTrigger 用の初期状態 + CSSアニメ)
   =========================================================== */

/* JS が無効/未ロードでもコンテンツは見える状態にしておく */
.no-js .fade-in,
.no-js .fade-up,
.no-js .fade-left,
.no-js .fade-right,
.no-js .stagger-item {
  opacity: 1 !important;
  transform: none !important;
}

/* ===== CTAボタン: 押したくなる注目アニメ ===== */

/* パルス + わずかな揺れで注目を集める */
@keyframes ctaPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 3px 3px 0 0 var(--gold-shadow);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 5px 5px 0 0 var(--gold-shadow);
  }
}

@keyframes ctaPulseNavy {
  0%, 100% {
    transform: scale(1);
    box-shadow: 5px 5px 0 0 var(--navy);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 7px 7px 0 0 var(--navy);
  }
}

.cta-hero__button,
.cta-voice__button {
  animation: ctaPulse 2s ease-in-out infinite;
  transform-origin: center;
}

.cta-results__button,
.cta-flow__button {
  animation: ctaPulseNavy 2s ease-in-out infinite;
  transform-origin: center;
}

/* ホバー: 軽くフロート */
.cta-hero__button,
.cta-results__button,
.cta-flow__button,
.cta-voice__button {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-hero__button:hover,
.cta-voice__button:hover {
  animation-play-state: paused;
  transform: translate(-2px, -2px) scale(1.04);
  box-shadow: 6px 6px 0 0 var(--gold-shadow);
}

.cta-results__button:hover,
.cta-flow__button:hover {
  animation-play-state: paused;
  transform: translate(-2px, -2px) scale(1.04);
  box-shadow: 8px 8px 0 0 var(--navy);
}

.cta-hero__button:active,
.cta-results__button:active,
.cta-flow__button:active,
.cta-voice__button:active {
  transform: translate(2px, 2px) scale(0.98);
}

/* キラッと光るシャインエフェクト */
.cta-hero__button,
.cta-results__button,
.cta-flow__button,
.cta-voice__button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.cta-hero__button::after,
.cta-results__button::after,
.cta-flow__button::after,
.cta-voice__button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 60%
  );
  background-size: 250% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0;
  animation: ctaShine 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes ctaShine {
  0%, 60% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}


/* ===== スクロールトリガーで使う基本クラス（GSAPで操作） ===== */
.fade-up { opacity: 0; transform: translateY(40px); }
.fade-in { opacity: 0; }
.fade-left { opacity: 0; transform: translateX(-40px); }
.fade-right { opacity: 0; transform: translateX(40px); }

/* ハートビート風: 緑バナーの「必ず」 */
.green-banner__title-bottom .highlight {
  display: inline-block;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* 電話バー: 上下に微振動 */
.phone-bar__item--web {
  animation: bobbing 1.6s ease-in-out infinite;
}
@keyframes bobbing {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* prefers-reduced-motion 対応 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}