/* ==========================================================================
   ORBIT ANIMATIONS — entrance, ambient, micro-interactions
   All disabled under prefers-reduced-motion.
   ========================================================================== */

/* 1. Hero entrance (staggered rise) --------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes pop { from { opacity: 0; transform: translateY(40px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.hero-content > * { animation: rise 0.95s var(--ease-out) both; }
.hero-content > :nth-child(1) { animation-delay: 0.05s; }
.hero-content > :nth-child(2) { animation-delay: 0.18s; }
.hero-content > :nth-child(3) { animation-delay: 0.32s; }
.hero-content > :nth-child(4) { animation-delay: 0.46s; }
.hero-content > :nth-child(5) { animation-delay: 0.6s; }
.hero-mockup-wrapper { animation: pop 1.2s var(--ease-out) 0.35s both; }
.header-nav { animation: fadeIn 0.8s ease both; }

/* 2. Shimmering gradient text -------------------------------------- */
.drawline-text, .stat-num {
  background-size: 220% 100%;
  animation: shimmer 6s ease-in-out infinite alternate;
}
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* 3. Ambient floating orbs ----------------------------------------- */
.section-alt, .hero-section { overflow: hidden; }
.section-alt::before, .section-alt::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px); z-index: 0;
}
.section-alt::before { width: 340px; height: 340px; top: -80px; left: -80px; background: rgba(49, 46, 129, 0.05); animation: drift 14s ease-in-out infinite alternate; }
.section-alt::after { width: 300px; height: 300px; bottom: -90px; right: -60px; background: rgba(37, 99, 235, 0.04); animation: drift 18s ease-in-out infinite alternate-reverse; }
.section-alt > .container { position: relative; z-index: 1; }
@keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(60px, 40px) scale(1.2); } }

/* 4. CTA button breathing glow ------------------------------------- */
.hero-cta-group .btn-primary { animation: breathe 3.6s ease-in-out infinite; }
@keyframes breathe {
  0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 4px rgba(11, 15, 25, 0.08), 0 8px 22px -4px rgba(11, 15, 25, 0.22), 0 0 0 0 rgba(49, 46, 129, 0.15); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 4px 8px rgba(11, 15, 25, 0.12), 0 12px 26px -4px rgba(11, 15, 25, 0.28), 0 0 0 8px rgba(49, 46, 129, 0); }
}

/* 5. Mockup chat: messages arrive one by one ----------------------- */
.chat-timeline .msg-row { opacity: 0; animation: msgIn 0.7s var(--ease-out) forwards; }
.chat-timeline .msg-row:nth-child(1) { animation-delay: 1.3s; }
.chat-timeline .msg-row:nth-child(2) { animation-delay: 2.6s; }
@keyframes msgIn { from { opacity: 0; transform: translateX(-16px) scale(0.97); } to { opacity: 1; transform: none; } }
.react-pill { opacity: 0; animation: pop2 0.5s cubic-bezier(.34,1.56,.64,1) forwards; }
.react-pill:nth-child(1) { animation-delay: 2.2s; }
.react-pill:nth-child(2) { animation-delay: 2.4s; }
@keyframes pop2 { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

.typing-row { display: flex; gap: 12px; align-items: center; opacity: 0; animation: msgIn 0.6s var(--ease-out) 3.8s forwards; }
.typing-bubble { display: inline-flex; gap: 5px; padding: 10px 14px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 14px; }
.typing-bubble i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); animation: typing 1.2s ease-in-out infinite; }
.typing-bubble i:nth-child(2) { animation-delay: 0.15s; }
.typing-bubble i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%,60%,100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }
.typing-name { font-size: 11.5px; color: var(--text-faint); font-weight: 600; }

/* Active-speaker ripple on call icon */
.call-pulse-circle { position: relative; }
.call-pulse-circle::before, .call-pulse-circle::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--color-primary);
  animation: ripple 2.4s ease-out infinite; opacity: 0;
}
.call-pulse-circle::after { animation-delay: 1.2s; }
@keyframes ripple { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.9); opacity: 0; } }

/* 6. Live status dots ---------------------------------------------- */
.space-icon.active { animation: glowPulse 3s ease-in-out infinite; }
@keyframes glowPulse { 0%,100% { box-shadow: 0 2px 8px rgba(49,46,129,0.25); } 50% { box-shadow: 0 2px 18px rgba(49,46,129,0.5); } }

/* 7. Bullets pop in once their list is visible --------------------- */
.bullet-list .bullet-item { opacity: 0; transform: translateX(-14px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.bullet-list.in .bullet-item { opacity: 1; transform: none; }
.bullet-list.in .bullet-item:nth-child(1) { transition-delay: 0.1s; }
.bullet-list.in .bullet-item:nth-child(2) { transition-delay: 0.28s; }
.bullet-list.in .bullet-item:nth-child(3) { transition-delay: 0.46s; }
.bullet-list.in .bullet-icon { animation: tick 0.6s cubic-bezier(.34,1.56,.64,1) both; }
.bullet-list.in .bullet-item:nth-child(1) .bullet-icon { animation-delay: 0.3s; }
.bullet-list.in .bullet-item:nth-child(2) .bullet-icon { animation-delay: 0.48s; }
.bullet-list.in .bullet-item:nth-child(3) .bullet-icon { animation-delay: 0.66s; }
@keyframes tick { from { transform: scale(0) rotate(-90deg); } to { transform: scale(1) rotate(0); } }

/* 8. Comparison table rows slide in -------------------------------- */
.comparison-table tbody tr { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), background 0.2s; }
.comparison-container.in tbody tr { opacity: 1; transform: none; }
.comparison-container.in tbody tr:nth-child(1) { transition-delay: 0.1s; }
.comparison-container.in tbody tr:nth-child(2) { transition-delay: 0.2s; }
.comparison-container.in tbody tr:nth-child(3) { transition-delay: 0.3s; }
.comparison-container.in tbody tr:nth-child(4) { transition-delay: 0.4s; }
.comparison-container.in tbody tr:nth-child(5) { transition-delay: 0.5s; }
.comparison-container.in tbody tr:nth-child(6) { transition-delay: 0.6s; }

/* 9. Simulator: scramble flash + arrows flowing -------------------- */
.sim-output-box.scrambling { animation: flash 0.35s ease; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(49,46,129,0.5); } 100% { box-shadow: 0 0 0 14px rgba(49,46,129,0); } }
.sim-arrow-divider svg { animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 0%,100% { transform: translateX(-3px); opacity: 0.5; } 50% { transform: translateX(4px); opacity: 1; } }

/* 10. Icon wiggle on card hover ------------------------------------ */
.feature-card:hover .feature-icon-box { animation: wiggle 0.7s ease; }
@keyframes wiggle { 0%,100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-8deg) scale(1.1); } 60% { transform: rotate(6deg) scale(1.1); } }
.feature-card-link svg { transition: transform 0.25s var(--ease-out); }
.feature-card-link:hover svg { transform: translateX(4px); }

/* 11. Cursor glow --------------------------------------------------- */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%;
  background: radial-gradient(circle, rgba(49,46,129,0.06), transparent 65%);
  pointer-events: none; z-index: 0; transition: opacity 0.4s; opacity: 0; will-change: transform;
}

/* 12. Magnetic buttons ---------------------------------------------- */
.btn-lg, .nav-actions .btn { transition: transform 0.3s var(--ease-out), box-shadow 0.25s, background-position 0.5s; }

/* 13. Footer badges gentle float ------------------------------------ */
.footer-badges span:nth-child(odd) { animation: floaty 4s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  .hero-content > *, .hero-mockup-wrapper, .chat-timeline .msg-row, .react-pill, .typing-row { opacity: 1 !important; }
  .bullet-list .bullet-item, .comparison-table tbody tr { opacity: 1; transform: none; }
  .cursor-glow { display: none; }
}
@media (hover: none) { .cursor-glow { display: none; } }