/* ============================================================
   landing/animations.css  — リッチアニメーション拡張
   double-entry-base.css / double-entry-ledger.css と併用
   ============================================================ */

:root {
  --anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --anim-dur: 0.78s;
  /* スクロール時：ふわっと「開く」イージング（終わりでゆっくり収束） */
  --anim-ease-fuwa: cubic-bezier(0.22, 0.99, 0.36, 1);
  --anim-dur-fuwa: 1.15s;
}

/* ============================================================
   スクロールリビール（Intersection Observer 連動）
   ふわっと開く：透明度 + わずかな上昇 + スケール + ブラー解除
   ============================================================ */
[data-animate] {
  opacity: 0;
  filter: blur(8px);
  will-change: opacity, transform, filter;
  transition:
    opacity  var(--anim-dur-fuwa) var(--anim-ease-fuwa),
    transform var(--anim-dur-fuwa) var(--anim-ease-fuwa),
    filter var(--anim-dur-fuwa) var(--anim-ease-fuwa);
}

[data-animate="fade-up"] {
  transform: translateY(26px) scale(0.985);
}

[data-animate="fade-left"] {
  transform: translateX(-28px) scale(0.985);
}

[data-animate="fade-right"] {
  transform: translateX(28px) scale(0.985);
}

[data-animate="scale-in"] {
  transform: scale(0.94);
}

[data-animate="fade-in"] {
  transform: scale(0.99);
}

[data-animate].is-visible {
  opacity: 1;
  filter: blur(0);
  transform: none !important;
}

/* ============================================================
   ヒーロー — ページ読み込みアニメーション
   ============================================================ */
@keyframes hero-in {
  to { opacity: 1; transform: none; }
}

.hero-badge {
  opacity: 0;
  transform: translateY(-14px);
}
.hero h1 {
  opacity: 0;
  transform: translateY(22px);
}
.hero-lead {
  opacity: 0;
  transform: translateY(16px);
}
.hero-sub {
  opacity: 0;
  transform: translateY(16px);
}
.hero-cta {
  opacity: 0;
  transform: translateY(16px);
}

.hero-badge { animation: hero-in 0.7s var(--anim-ease) 0.15s forwards, badge-pulse 3.2s ease-in-out 0.9s infinite; }
.hero h1    { animation: hero-in 0.85s var(--anim-ease) 0.35s forwards, hero-shimmer 5s linear 1.2s infinite; }
.hero-lead  { animation: hero-in 0.8s var(--anim-ease) 0.55s forwards; }
.hero-sub   { animation: hero-in 0.8s var(--anim-ease) 0.68s forwards; }
.hero-cta   { animation: hero-in 0.8s var(--anim-ease) 0.82s forwards; }

/* ヒーローh1 シマーグラデーション */
.hero h1 {
  background: linear-gradient(
    90deg,
    #fffef8 0%,
    var(--gold-light) 18%,
    #fff9e0 34%,
    var(--gold) 50%,
    #fffef8 66%,
    var(--gold-light) 82%,
    var(--gold) 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes hero-shimmer {
  0%   { background-position: 0%   center; }
  100% { background-position: 250% center; }
}

/* ============================================================
   バッジ — グロー点滅
   ============================================================ */
@keyframes badge-pulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(var(--accent-rgb),0.12), inset 0 0 8px rgba(var(--accent-rgb),0.02);
  }
  50% {
    box-shadow: 0 0 22px rgba(var(--accent-rgb),0.48), inset 0 0 14px rgba(var(--accent-rgb),0.08);
  }
}

/* ============================================================
   CTA ボタン — 呼吸パルス & シマースイープ
   ============================================================ */
.btn-primary {
  position: relative;
  overflow: hidden;
  animation: btn-breathe 2.8s ease-in-out infinite;
}

@keyframes btn-breathe {
  0%, 100% { box-shadow: 0 4px 24px rgba(var(--accent-rgb),0.35); }
  50%       { box-shadow: 0 6px 44px rgba(var(--accent-rgb),0.68), 0 0 64px rgba(var(--accent-rgb),0.22); }
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38), transparent);
  animation: btn-shimmer 3.2s ease-in-out 1.8s infinite;
  pointer-events: none;
}

@keyframes btn-shimmer {
  0%      { left: -100%; }
  45%, 100% { left: 200%; }
}

.btn-primary:hover {
  animation: none;
  box-shadow: 0 8px 44px rgba(var(--accent-rgb),0.72);
}

/* ============================================================
   セクションタイトル — ゴールドライン展開
   ============================================================ */
.section-title {
  position: relative;
}

.section-title::after {
  content: '';
  flex-basis: 100%;
  display: block;
  height: 1px;
  width: 0;
  margin-top: 7px;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(var(--accent-rgb),0.35) 55%, transparent 100%);
  transition: width 1s var(--anim-ease) 0.3s;
}

.section-title.is-visible::after {
  width: min(100%, 440px);
}

/* ============================================================
   カード — ホバーシマースイープ
   ============================================================ */
.plan-tier-card,
.trust-base-card,
.trust-block,
.flow-card,
.ai-example-card,
.universal-import-card,
.ocr-block,
.free-plan-box {
  position: relative;
  overflow: hidden;
}

.plan-tier-card::before,
.trust-base-card::before,
.trust-block::before,
.flow-card::before,
.ai-example-card::before,
.universal-import-card::before,
.ocr-block::before,
.free-plan-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 38%,
    rgba(var(--accent-rgb),0.07) 50%,
    transparent 62%
  );
  transform: translateX(-120%);
  transition: transform 0.65s ease;
  pointer-events: none;
  z-index: 1;
}

.plan-tier-card:hover::before,
.trust-base-card:hover::before,
.trust-block:hover::before,
.flow-card:hover::before,
.ai-example-card:hover::before,
.universal-import-card:hover::before,
.ocr-block:hover::before,
.free-plan-box:hover::before {
  transform: translateX(120%);
}

/* ============================================================
   ハウツーステップ番号 — リップル
   ============================================================ */
@keyframes step-ripple {
  0%   { box-shadow: 0 0 0 0   rgba(var(--accent-rgb),0.52); }
  70%  { box-shadow: 0 0 0 14px rgba(var(--accent-rgb),0); }
  100% { box-shadow: 0 0 0 0   rgba(var(--accent-rgb),0); }
}

.howto-step-num {
  animation: step-ripple 2.8s ease-out infinite;
}
.howto-step:nth-child(3) .howto-step-num { animation-delay: 0.9s; }
.howto-step:nth-child(5) .howto-step-num { animation-delay: 1.8s; }

/* ============================================================
   プランカード ハイライト — グロー呼吸
   ============================================================ */
.plan-tier-card--highlight {
  animation: plan-glow 3.2s ease-in-out infinite;
}

@keyframes plan-glow {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.35), 0 8px 40px rgba(var(--accent-rgb),0.12);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.62), 0 8px 60px rgba(var(--accent-rgb),0.28);
  }
}

/* ============================================================
   CTA セクション — アンビエントグロー
   ============================================================ */
.cta-section {
  position: relative;
  isolation: isolate;
}

.cta-section::before {
  content: '';
  position: absolute;
  inset: -80px;
  background: radial-gradient(
    ellipse 70% 70% at 50% 50%,
    rgba(var(--accent-rgb),0.10) 0%, transparent 68%
  );
  animation: cta-ambient 5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes cta-ambient {
  0%, 100% { opacity: 0.45; transform: scale(0.94); }
  50%       { opacity: 1;    transform: scale(1.06); }
}

/* ============================================================
   背景 — フローティングオーブ
   ============================================================ */
.bg-orb {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(110px);
  will-change: transform;
}

.bg-orb-1 {
  width: 620px; height: 620px;
  top: -18%; left: -12%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.14) 0%, transparent 65%);
  animation: orb-a 22s ease-in-out infinite;
}

.bg-orb-2 {
  width: 500px; height: 500px;
  bottom: 4%; right: -14%;
  background: radial-gradient(circle, rgba(139,105,20,0.11) 0%, transparent 65%);
  animation: orb-b 28s ease-in-out infinite;
  animation-delay: -11s;
}

.bg-orb-3 {
  width: 360px; height: 360px;
  top: 42%; left: 52%;
  background: radial-gradient(circle, rgba(244,228,166,0.07) 0%, transparent 65%);
  animation: orb-a 34s ease-in-out infinite;
  animation-delay: -19s;
}

@keyframes orb-a {
  0%, 100% { transform: translate(0,  0); }
  33%       { transform: translate(42px, -28px); }
  66%       { transform: translate(-28px, 40px); }
}

@keyframes orb-b {
  0%, 100% { transform: translate(0, 0); }
  33%       { transform: translate(-52px, 22px); }
  66%       { transform: translate(32px, -42px); }
}

/* ============================================================
   パーティクルキャンバス
   ============================================================ */
#particles-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

/* ============================================================
   モーション軽減対応（アクセシビリティ）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    will-change: auto;
  }

  .hero-badge, .hero h1, .hero-lead, .hero-sub, .hero-cta {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .btn-primary,
  .btn-primary::after,
  .howto-step-num,
  .plan-tier-card--highlight,
  .cta-section::before,
  .bg-orb {
    animation: none !important;
  }

  .section-title::after {
    width: min(100%, 440px);
    transition: none;
  }
}