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

/* ── Hero entrance ── */
@keyframes heroLineReveal {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0.6;
  }
  to {
    clip-path: inset(0 0% 0 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-label {
  animation: heroFadeUp 0.9s var(--ease-expo) 0.18s both;
}

.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;
}

.hero-scroll {
  animation: heroFadeUp 1s var(--ease-expo) 1.2s 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);
}

.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);
}

/* ── Pricing card ── */
.pricing-sum-card {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.72s var(--ease-expo),
              transform 0.72s var(--ease-expo);
}

.pricing-sum-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Scroll indicator pulse ── */
@keyframes scrollPulse {
  0%   { transform: scaleY(1) translateY(0); opacity: 0.5; }
  50%  { opacity: 1; }
  100% { transform: scaleY(0.2) translateY(80%); opacity: 0; }
}

.hero-scroll-line {
  animation: scrollPulse 2.2s ease-in-out infinite;
  transform-origin: top;
}

/* ── Grain texture drift ── */
@keyframes grainDrift {
  0%  { background-position: 0 0; }
  20% { background-position: -3px 4px; }
  40% { background-position: 4px -2px; }
  60% { background-position: -2px 5px; }
  80% { background-position: 3px -3px; }
  100%{ background-position: 0 0; }
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  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;
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero-label,
  .hero-title-line-inner,
  .hero-desc,
  .hero-cta,
  .hero-side,
  .hero-bg-num,
  .hero-scroll,
  .reveal,
  .reveal-left,
  .reveal-scale,
  .pricing-sum-card {
    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; }

  .hero-scroll-line { animation: none !important; }
}