/* ═══════════════════════════════════════════════════════════
   MIRACLE — Effects & Animations
═══════════════════════════════════════════════════════════ */

/* ── REVEAL ON SCROLL ──
   Generic class. JS adds .is-revealed when element enters viewport. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .9s var(--ease-out),
    transform .9s var(--ease-out);
  transition-delay: var(--rev-delay, 0s);
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger for grids */
.pricing-grid .pricing-card.reveal:nth-child(1) { --rev-delay: 0.05s; }
.pricing-grid .pricing-card.reveal:nth-child(2) { --rev-delay: 0.18s; }
.pricing-grid .pricing-card.reveal:nth-child(3) { --rev-delay: 0.30s; }

.options-grid .option-card.reveal:nth-child(1) { --rev-delay: 0.05s; }
.options-grid .option-card.reveal:nth-child(2) { --rev-delay: 0.14s; }
.options-grid .option-card.reveal:nth-child(3) { --rev-delay: 0.22s; }
.options-grid .option-card.reveal:nth-child(4) { --rev-delay: 0.30s; }

.promesse-cards .promesse-card.reveal:nth-child(1) { --rev-delay: 0.05s; }
.promesse-cards .promesse-card.reveal:nth-child(2) { --rev-delay: 0.18s; }
.promesse-cards .promesse-card.reveal:nth-child(3) { --rev-delay: 0.30s; }

.process-list .process-item.reveal:nth-child(1) { --rev-delay: 0.05s; }
.process-list .process-item.reveal:nth-child(2) { --rev-delay: 0.14s; }
.process-list .process-item.reveal:nth-child(3) { --rev-delay: 0.22s; }
.process-list .process-item.reveal:nth-child(4) { --rev-delay: 0.30s; }

/* ── HERO STAGGER ── */
.hero-eyebrow.reveal { --rev-delay: 0.10s; }
.hero-sub.reveal { --rev-delay: 0.45s; }
.hero-ctas.reveal { --rev-delay: 0.55s; }
.hero-stats.reveal { --rev-delay: 0.70s; }

/* ── SHINE SWEEP ON FEATURED CARD ── */
.pricing-card--featured::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.08) 50%, transparent 62%);
  background-size: 220% 100%;
  background-position: 200% 0;
  animation: shine 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine {
  0% { background-position: 200% 0; }
  60%, 100% { background-position: -100% 0; }
}

/* ── SECTION ENTRY GLOW ── */
.section { transition: filter .4s var(--ease-out); }

/* Anton typography uses outline-text emphasis instead of underline animation */
.hero-title em { display: inline-block; }

/* ── BUTTON SHIMMER PULSE ── */
.btn-primary {
  position: relative;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.4);
  pointer-events: none;
  animation: btnPulse 2.6s ease-in-out infinite;
}
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); }
  50% { box-shadow: 0 0 0 8px rgba(255,255,255,0.0); }
}
.btn-primary:hover::after { animation: none; }

/* (radial glow on em removed for Anton outline treatment) */

/* ── SECTION-ENTER PARALLAX ON SECTION-NUM ── */
.section-num {
  display: inline-block;
  transition: transform .5s var(--ease-out);
}
.section:hover .section-num { transform: translateX(2px) scale(1.05); }

/* ── INVOICE LINES STAGGER ── */
.invoice-card .inv-line {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.invoice-card.is-revealed .inv-line:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.2s; }
.invoice-card.is-revealed .inv-line:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.32s; }
.invoice-card.is-revealed .inv-line:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.44s; }

.invoice-card .inv-total {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-spring);
}
.invoice-card.is-revealed .inv-total {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.7s;
}

/* ── CHANNEL HOVER ICON ROTATE ── */
.channel:hover .ch-ico {
  border-color: var(--white);
  background: rgba(255,255,255,0.06);
}

/* ── HERO MARQUEE FADE EDGES ── */
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before {
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.95), transparent);
}
.marquee::after {
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.95), transparent);
}

/* ── REDUCE MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-title .reveal-line > span { transform: translateY(0); }
  #particles-canvas { display: none; }
  .marquee-track { animation: none; }
}