/* ==========================================
   Animations v2 — Editorial System
   ========================================== */

/* ── Hero entrance ── */
/* clip-pathのアニメーションは非合成（メインスレッドでの再描画）になるため、
   overflow:hidden の親（.hero-title-line）＋ transform（translateX）で
   合成対応のスライドイン表現に変更 */
@keyframes heroLineReveal {
  from {
    transform: translateX(-100%);
    opacity: 0.6;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroNumDrift {
  from { opacity: 0; transform: translateY(-50%) translateX(20px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.hero-title-line-inner {
  animation: heroLineReveal 1.05s var(--ease-expo) both;
}

.hero-title-line:nth-child(1) .hero-title-line-inner { animation-delay: 0.32s; }
.hero-title-line:nth-child(2) .hero-title-line-inner { animation-delay: 0.52s; }
.hero-title-line:nth-child(3) .hero-title-line-inner { animation-delay: 0.70s; }

.hero-desc  { animation: heroFadeUp 0.9s var(--ease-expo) 0.72s both; }
.hero-cta   { animation: heroFadeUp 0.9s var(--ease-expo) 0.88s both; }
.hero-side  { animation: heroFadeUp 1s var(--ease-expo) 1s both; }

.hero-bg-num {
  animation: heroNumDrift 1.4s var(--ease-expo) 0.08s both;
}

/* ── Scroll-triggered Reveals ── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.78s var(--ease-expo),
              transform 0.78s var(--ease-expo);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* .cta-btn は .reveal の scroll-in と背景色ホバーの両方が必要なため、
   transition を明示的に統合する(片方だけだとショートハンドの後勝ちで消える) */
.cta-btn.reveal {
  transition: opacity 0.78s var(--ease-expo),
              transform 0.78s var(--ease-expo),
              background-color 0.8s ease;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.78s var(--ease-expo),
              transform 0.78s var(--ease-expo);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.72s var(--ease-expo),
              transform 0.72s var(--ease-expo);
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger helpers (data-delay used by JS, but CSS fallbacks) */
[data-delay="60"]  { transition-delay: 0.06s; }
[data-delay="80"]  { transition-delay: 0.08s; }
[data-delay="100"] { transition-delay: 0.10s; }
[data-delay="120"] { transition-delay: 0.12s; }
[data-delay="160"] { transition-delay: 0.16s; }
[data-delay="180"] { transition-delay: 0.18s; }
[data-delay="240"] { transition-delay: 0.24s; }
[data-delay="300"] { transition-delay: 0.30s; }

/* ── Decorative line draw ── */
.rule-draw {
  height: 1px;
  background: var(--c-rule);
  position: relative;
  overflow: hidden;
}

.rule-draw::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-main);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-expo);
}

.rule-draw.is-drawn::after {
  transform: scaleX(1);
}

/* ── Grain texture drift ── */
/* background-positionのアニメーションは非合成（毎フレーム再描画）になるため、
   要素自体をtransformでずらす方式に変更。inset を -10px にして
   ずれても端に隙間が出ないよう余白を持たせている */
@keyframes grainDrift {
  0%  { transform: translate(0, 0); }
  20% { transform: translate(-3px, 4px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-2px, 5px); }
  80% { transform: translate(3px, -3px); }
  100%{ transform: translate(0, 0); }
}

body::after {
  content: '';
  position: fixed;
  inset: -10px;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  animation: grainDrift 0.35s steps(1) infinite;
  will-change: transform;
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero-title-line-inner,
  .hero-desc,
  .hero-cta,
  .hero-side,
  .hero-bg-num,
  .reveal,
  .reveal-left,
  .reveal-scale {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .rule-draw::after {
    transition: none !important;
    transform: scaleX(1) !important;
  }

  body::after { animation: none !important; }
  .concept-blob { animation: none !important; }
}