/* ==========================================================
   FamAPI — animations & motion layer (v1)
   Scroll reveals, hero glow/float, 3D tilt, count-up.
   Loaded after coinbase.css on all public pages.
   ========================================================== */

/* ---------- Scroll reveal (gated behind .js so no-JS is safe) ---------- */
html.js .reveal { opacity: 0; transform: translateY(26px); }
html.js .reveal.visible {
    opacity: 1; transform: none;
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}

/* Staggered card entrance once the parent grid becomes visible */
.reveal.visible .feature-card,
.reveal.visible .pricing-card,
.reveal.visible .leader-card {
    animation: cardIn .6s cubic-bezier(.22,.61,.36,1) backwards;
    animation-delay: calc(var(--d, 0s));
}
@keyframes cardIn {
    from { opacity: 0; transform: translateY(22px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Nav entrance ---------- */
.topnav { animation: navIn .55s ease both; }
@keyframes navIn { from { opacity: 0; transform: translateY(-14px); } }

/* ---------- Hero: animated glow blobs ---------- */
.hero-dark { position: relative; }
.hero-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-glow::before,
.hero-glow::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(70px);
    will-change: transform;
}
.hero-glow::before {
    width: 480px; height: 480px; top: -160px; right: -80px;
    background: radial-gradient(circle, rgba(0,82,255,.45), transparent 65%);
    animation: glowFloat 9s ease-in-out infinite;
}
.hero-glow::after {
    width: 420px; height: 420px; bottom: -180px; left: 8%;
    background: radial-gradient(circle, rgba(5,177,105,.25), transparent 65%);
    animation: glowFloat 12s ease-in-out infinite reverse;
}
@keyframes glowFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(30px, 25px) scale(1.08); }
}

/* ---------- Hero: floating mock cards ---------- */
.mock-stack::before {
    content: ''; position: absolute; inset: 12% 5% 5%; z-index: -1;
    background: radial-gradient(ellipse at center, rgba(0,82,255,.22), transparent 70%);
    filter: blur(30px);
}
.mock-card { will-change: transform; }
.mock-float-a { animation: floatY 6.5s ease-in-out infinite; }
.mock-float-b { animation: floatY 8s ease-in-out infinite reverse; }
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

/* ---------- Hero badge: pulsing status dot ---------- */
.hero-badge .dot { animation: dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse {
    0%   { box-shadow: 0 0 0 0 rgba(5,177,105,.45); }
    70%  { box-shadow: 0 0 0 7px rgba(5,177,105,0); }
    100% { box-shadow: 0 0 0 0 rgba(5,177,105,0); }
}

/* ---------- Buttons: micro interactions ---------- */
.btn {
    transition: transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    will-change: transform;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }

/* ---------- 3D tilt cards (JS drives inline transform) ---------- */
.tilt { transition: transform .18s ease-out, box-shadow .3s ease; will-change: transform; transform-style: preserve-3d; }

/* ---------- Hover lift for all card types ---------- */
.pricing-card:hover,
.feature-card:hover,
.leader-card:hover { box-shadow: var(--shadow-md); border-color: rgba(0,82,255,.25); }
.pricing-card.featured:hover { border-color: rgba(255,255,255,.14); }

/* ---------- Stats band (live counters inside dark CTA) ---------- */
.stats-band { display: flex; justify-content: center; gap: 64px; flex-wrap: wrap; margin-bottom: 56px; }
.stat-block { text-align: center; }
.stat-num {
    font-size: 46px; font-weight: 600; letter-spacing: -.03em; color: #fff;
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat-label {
    font-size: 12px; color: var(--on-dark-soft); margin-top: 8px;
    text-transform: uppercase; letter-spacing: .08em;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 768px) {
    .stats-band { gap: 36px; margin-bottom: 40px; }
    .stat-num { font-size: 32px; }
}

/* ---------- Reduced motion: respect user preference ---------- */
@media (prefers-reduced-motion: reduce) {
    html.js .reveal,
    html.js .reveal.visible { opacity: 1 !important; transform: none !important; transition: none !important; }
    .reveal.visible .feature-card,
    .reveal.visible .pricing-card,
    .reveal.visible .leader-card { animation: none !important; }
    .topnav, .mock-card, .hero-glow::before, .hero-glow::after,
    .hero-badge .dot, .btn, .tilt { animation: none !important; transition: none !important; }
}
