/* ============================================================
   NearU Animations — animations.css
   ============================================================ */

/* --- Keyframes --- */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}
@keyframes float-alt {
    0%, 100% { transform: translateY(0px) rotate(-1deg); }
    50%       { transform: translateY(-8px) rotate(1deg); }
}
@keyframes bounce-down {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.85); }
}
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
@keyframes gradient-x {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}
@keyframes count-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* --- Reveal Animations (triggered via JS) --- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* --- Stagger Delays (applied to child elements) --- */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.12s; }
.stagger-3 { transition-delay: 0.19s; }
.stagger-4 { transition-delay: 0.26s; }
.stagger-5 { transition-delay: 0.33s; }
.stagger-6 { transition-delay: 0.40s; }

/* --- Hero entrance --- */
.hero-text-wrap .hero-eyebrow  { animation: heroFadeUp 0.7s 0.1s both; }
.hero-text-wrap .hero-headline { animation: heroFadeUp 0.7s 0.25s both; }
.hero-text-wrap .hero-subheadline { animation: heroFadeUp 0.7s 0.4s both; }
.hero-text-wrap .hero-ctas    { animation: heroFadeUp 0.7s 0.55s both; }
.hero-text-wrap .hero-trust   { animation: heroFadeUp 0.7s 0.65s both; }
.hero-dashboard                { animation: heroFadeUp 0.8s 0.45s both; }

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Stats count-up animation --- */
.counter-num {
    display: inline-block;
    animation: count-up 0.4s ease both;
}

/* --- Loading spinner for buttons --- */
.btn-loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}

/* --- Gradient text animation --- */
.animated-gradient-text {
    background: linear-gradient(270deg, #CE0058, #FFA300, #EB5D79, #CE0058);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-x 4s ease infinite;
}

/* --- Dashboard bar chart bars animate on entry --- */
.cr-fill {
    width: 0;
    transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cr-fill.animated {
    /* width set by inline style via JS */
}

/* --- Chart SVG path draw animation --- */
.chart-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.chart-path.drawn {
    stroke-dashoffset: 0;
}

/* --- Pricing card hover gradient border pulse --- */
.pricing-card.featured {
    background-size: 200% 200%;
    animation: gradient-x 4s ease infinite;
}

/* --- Subtle section transition overlay --- */
.section-transition-fade {
    position: relative;
}
.section-transition-fade::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, var(--white));
    pointer-events: none;
}

/* --- Mobile: reduce motion if preferred --- */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .hero-text-wrap .hero-eyebrow,
    .hero-text-wrap .hero-headline,
    .hero-text-wrap .hero-subheadline,
    .hero-text-wrap .hero-ctas,
    .hero-text-wrap .hero-trust,
    .hero-dashboard {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .dashboard-card { animation: none; }
    .hero-floating-card { animation: none; }
    .hero-scroll { animation: none; }
    .live-dot { animation: none; }
}