/* ===================================================================
   Majé — Shared Animation System
   Pure CSS animations for the marketing site.
   Loaded by index.html and all feature pages.
   =================================================================== */

/* --- Scroll-reveal base ------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s cubic-bezier(0.33, 1, 0.68, 1),
              transform 0.85s cubic-bezier(0.33, 1, 0.68, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="left"] {
  transform: translateX(-40px) translateY(0);
}
[data-reveal="left"].is-visible {
  transform: translateX(0) translateY(0);
}
[data-reveal="right"] {
  transform: translateX(40px) translateY(0);
}
[data-reveal="right"].is-visible {
  transform: translateX(0) translateY(0);
}
[data-reveal="scale"] {
  transform: scale(0.92);
}
[data-reveal="scale"].is-visible {
  transform: scale(1);
}

/* --- Aurora drift (slow animated mesh gradient) ------------------ */
@keyframes aurora-drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.aurora-bg {
  background: linear-gradient(
    135deg,
    rgba(99, 91, 255, 0.10) 0%,
    rgba(0, 140, 255, 0.08) 25%,
    rgba(255, 99, 132, 0.06) 50%,
    rgba(99, 91, 255, 0.08) 75%,
    rgba(0, 140, 255, 0.10) 100%
  );
  background-size: 400% 400%;
  animation: aurora-drift 16s ease-in-out infinite;
}
.aurora-bg--dark {
  background: linear-gradient(
    135deg,
    rgba(99, 91, 255, 0.18) 0%,
    rgba(0, 140, 255, 0.14) 25%,
    rgba(232, 193, 92, 0.08) 50%,
    rgba(99, 91, 255, 0.14) 75%,
    rgba(0, 140, 255, 0.18) 100%
  );
  background-size: 400% 400%;
  animation: aurora-drift 14s ease-in-out infinite;
}

/* --- Glow pulse -------------------------------------------------- */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 24px rgba(99, 91, 255, 0.15), 0 0 64px rgba(0, 140, 255, 0.08); }
  50%      { box-shadow: 0 0 36px rgba(99, 91, 255, 0.25), 0 0 80px rgba(0, 140, 255, 0.14); }
}
.glow-pulse {
  animation: glow-pulse 4s ease-in-out infinite;
}

/* --- Float (gentle vertical bob) --------------------------------- */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.float {
  animation: float-y 6s ease-in-out infinite;
}
.float--slow {
  animation-duration: 9s;
}
.float--fast {
  animation-duration: 4s;
}

/* --- Sparkle rotation -------------------------------------------- */
@keyframes sparkle-spin {
  0%   { transform: rotate(0deg) scale(1); opacity: 0.7; }
  50%  { transform: rotate(180deg) scale(1.15); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: 0.7; }
}
.sparkle {
  animation: sparkle-spin 8s linear infinite;
  display: inline-block;
}

/* --- Glass card -------------------------------------------------- */
.glass-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(227, 232, 238, 0.7);
  border-radius: 20px;
  padding: 28px;
  transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1),
              box-shadow 0.45s cubic-bezier(0.33, 1, 0.68, 1),
              border-color 0.45s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 24px rgba(10, 37, 64, 0.06);
}
.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(10, 37, 64, 0.10), 0 20px 56px rgba(10, 37, 64, 0.08);
  border-color: rgba(99, 91, 255, 0.22);
}

/*
 * Scroll-reveal sets transition on [data-reveal]; card hover rules set their own.
 * Later shorthands overwrite the whole transition — opacity (reveal) and shadow/border (hover) would snap.
 * Merge all animated properties here (specificity beats standalone .glass-card / .feature-highlight-card / inline .ai-pillar).
 */
[data-reveal].glass-card,
[data-reveal].glass-card--dark,
blockquote.testimonial-card.glass-card[data-reveal],
[data-reveal].feature-highlight-card,
[data-reveal].ai-pillar,
[data-reveal].safety-card {
  transition:
    opacity 0.85s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.55s cubic-bezier(0.33, 1, 0.68, 1),
    box-shadow 0.5s cubic-bezier(0.33, 1, 0.68, 1),
    border-color 0.5s ease;
}

.glass-card--dark {
  background: rgba(10, 37, 64, 0.55);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
}
.glass-card--dark:hover {
  border-color: rgba(232, 193, 92, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), 0 20px 56px rgba(0, 0, 0, 0.16);
}

/* --- Gradient text ----------------------------------------------- */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-text {
  background: linear-gradient(135deg, #635bff, #008cff, #e8c15c, #635bff);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 6s ease-in-out infinite;
}

/* --- Pulsing dot separator --------------------------------------- */
@keyframes dot-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.9; transform: scale(1.3); }
}
.dot-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: dot-pulse 2.5s ease-in-out infinite;
}

/* --- Coming soon badge ------------------------------------------- */
.badge-coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e8c15c;
  background: rgba(232, 193, 92, 0.12);
  border: 1px solid rgba(232, 193, 92, 0.25);
  animation: glow-pulse 4s ease-in-out infinite;
}
.badge-coming-soon::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e8c15c;
  animation: dot-pulse 2s ease-in-out infinite;
}

/* --- Stagger delays (used with data-reveal-delay) ---------------- */
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal-delay="5"] { transition-delay: 0.40s; }
[data-reveal-delay="6"] { transition-delay: 0.48s; }

/* --- Connecting line animation (how-it-works) -------------------- */
@keyframes line-draw {
  from { stroke-dashoffset: 200; }
  to   { stroke-dashoffset: 0; }
}
.line-draw {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}
.line-draw.is-visible {
  animation: line-draw 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- Orb (floating decorative circle) ---------------------------- */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.35;
}
.orb--purple {
  background: rgba(99, 91, 255, 0.5);
}
.orb--blue {
  background: rgba(0, 140, 255, 0.4);
}
.orb--gold {
  background: rgba(232, 193, 92, 0.35);
}
.orb--pink {
  background: rgba(255, 99, 132, 0.35);
}

/* --- Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .aurora-bg,
  .aurora-bg--dark {
    animation: none !important;
  }
  .glow-pulse {
    animation: none !important;
  }
  .float,
  .float--slow,
  .float--fast {
    animation: none !important;
  }
  .sparkle {
    animation: none !important;
  }
  .gradient-text {
    animation: none !important;
  }
  .dot-pulse {
    animation: none !important;
    opacity: 0.6 !important;
  }
  .badge-coming-soon {
    animation: none !important;
  }
  .line-draw {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
}