/* ====== SOLARGLOBE SCROLL REVEAL PREMIUM ====== */
/* Système unifié — Apple, Stripe, Vercel, Linear */

/* --------------------------------------
   BASE REVEAL — scroll (sg-animations.js → .sg-visible)
   Défaut sobre ; les pages avec CSS inline plus spécifique restent prioritaires.
   -------------------------------------- */
.sg-reveal {
  opacity: 0;
  transform: translateY(30px);
}

.sg-reveal-visible {
  opacity: 1;
  transform: none;
}

.sg-reveal.sg-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------
   CARTES PREMIUM — effet lift + scale
   -------------------------------------- */
.sg-reveal-card {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  transition:
    opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.sg-reveal-card.sg-reveal-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------
   HERO — animation au chargement
   -------------------------------------- */
.sg-hero-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.sg-hero-reveal.sg-reveal-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------
   RÉDUCTION MOTION
   -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sg-reveal,
  .sg-reveal-card,
  .sg-hero-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .sg-reveal-visible,
  .sg-reveal.sg-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}