/* =========================================================
   FUNDNEXUS — Animations
   Refined motion. No flashy effects (per Brand Book).
   ========================================================= */

/* ---------- 1. PULSE (badge dot) ---------- */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.45);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(22, 93, 255, 0);
    opacity: 0.7;
  }
}
.hero-badge-dot {
  animation: pulse-glow 2.4s var(--ease-in-out) infinite;
}

/* ---------- 2. ORB FLOAT (hero ambient) ---------- */
@keyframes orb-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.05); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}
@keyframes orb-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-30px, 40px) scale(1.08); }
  66% { transform: translate(20px, -20px) scale(0.96); }
}
@keyframes orb-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -20px) scale(1.04); }
}
.orb-1 { animation: orb-float-1 18s ease-in-out infinite; }
.orb-2 { animation: orb-float-2 22s ease-in-out infinite; }
.orb-3 { animation: orb-float-3 16s ease-in-out infinite; }
.orb-final-1 { animation: orb-float-1 20s ease-in-out infinite; }
.orb-final-2 { animation: orb-float-2 24s ease-in-out infinite; }

/* ---------- 3. GRADIENT SHIMMER (hero title accent) ---------- */
@keyframes grad-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.hero-title-grad {
  animation: grad-shift 8s ease-in-out infinite;
}

/* ---------- 4. HERO ENTRANCE (staggered) ---------- */
.hero-content > * {
  opacity: 0;
  transform: translateY(28px);
  animation: hero-in 0.95s var(--ease-out) forwards;
}
.hero-content > *:nth-child(1) { animation-delay: 0.10s; }
.hero-content > *:nth-child(2) { animation-delay: 0.22s; }
.hero-content > *:nth-child(3) { animation-delay: 0.36s; }
.hero-content > *:nth-child(4) { animation-delay: 0.50s; }
.hero-content > *:nth-child(5) { animation-delay: 0.66s; }

@keyframes hero-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- 5. NAV SLIDE-IN ---------- */
.nav {
  opacity: 0;
  transform: translateY(-100%);
  animation: nav-in 0.7s var(--ease-out) forwards;
}
@keyframes nav-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- 6. SCROLL REVEAL (.reveal) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 7. CARD HOVER GLOW (subtle) ---------- */
.vm-card,
.who-card,
.problem-card {
  position: relative;
}
.vm-card::after,
.who-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(22, 93, 255, 0.5), transparent 50%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
}
.vm-card:hover::after,
.who-card:hover::after { opacity: 1; }

/* ---------- 8. BUILDING ITEMS ACCENT LINE ---------- */
.building-item {
  position: relative;
}
.building-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 2px;
  height: 60%;
  background: var(--primary);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.35s var(--ease-out);
}
.building-item:hover::before {
  transform: translateY(-50%) scaleY(1);
}

/* ---------- 9. PRINCIPLE ICON BREATHE ---------- */
@keyframes icon-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 93, 255, 0); }
  50% { box-shadow: 0 0 0 8px rgba(22, 93, 255, 0.05); }
}
.principle:hover .principle-icon {
  animation: icon-breathe 1.8s ease-in-out infinite;
}

/* ---------- 10. STAT NUMBER COUNTER (handled via JS) ---------- */
.stat-num {
  transition: opacity 0.6s var(--ease-out);
}

/* ---------- 11. PRODUCT FRAME LIFT ON SCROLL ---------- */
.product-frame.reveal {
  transform: translateY(40px) scale(0.97);
  transition:
    opacity 1.1s var(--ease-out),
    transform 1.1s var(--ease-out);
}
.product-frame.reveal.in-view {
  transform: translateY(0) scale(1);
}

/* ---------- 12. MOCK DASHBOARD SUBTLE LIFE ---------- */
@keyframes mock-row-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.product-frame.in-view .post-card {
  opacity: 0;
  animation: mock-row-fade 0.6s var(--ease-out) forwards;
}
.product-frame.in-view .post-card:nth-of-type(1) { animation-delay: 0.45s; }
.product-frame.in-view .post-card:nth-of-type(2) { animation-delay: 0.60s; }
.product-frame.in-view .post-card:nth-of-type(3) { animation-delay: 0.75s; }

@keyframes mock-stat-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.product-frame.in-view .composer-card,
.product-frame.in-view .profile-card,
.product-frame.in-view .rules-card {
  opacity: 0;
  animation: mock-stat-fade 0.55s var(--ease-out) forwards;
}
.product-frame.in-view .profile-card { animation-delay: 0.20s; }
.product-frame.in-view .profile-stats { animation-delay: 0.28s; }
.product-frame.in-view .profile-links { animation-delay: 0.36s; }
.product-frame.in-view .composer-card { animation-delay: 0.30s; }
.product-frame.in-view .rules-card:nth-of-type(1) { animation-delay: 0.40s; }
.product-frame.in-view .rules-card:nth-of-type(2) { animation-delay: 0.50s; }
.product-frame.in-view .rules-card:nth-of-type(3) { animation-delay: 0.60s; }
.product-frame.in-view .profile-stats,
.product-frame.in-view .profile-links {
  opacity: 0;
  animation: mock-stat-fade 0.55s var(--ease-out) forwards;
}

/* ---------- 13. BADGE SHIMMER (subtle, on mock) ---------- */
@keyframes badge-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.badge-verified::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  background-size: 200% 100%;
  border-radius: inherit;
  pointer-events: none;
}
.badge { position: relative; overflow: hidden; }

/* ---------- 14. SCROLL PROGRESS BAR BREATHE ---------- */
@keyframes progress-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(22, 93, 255, 0.5); }
  50% { box-shadow: 0 0 20px rgba(22, 93, 255, 0.7); }
}
.scroll-progress {
  animation: progress-glow 2s ease-in-out infinite;
}

/* ---------- 15. LINK UNDERLINE SWEEP ---------- */
.mock-link { position: relative; }
.mock-link::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0;
  width: 0;
  height: 1px;
  background: var(--primary);
  transition: width 0.3s var(--ease-out);
}
.mock-link:hover::after { width: 100%; }

/* ---------- 16. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
  .orb-1, .orb-2, .orb-3,
  .orb-final-1, .orb-final-2 {
    animation: none;
  }
}