/* ==========================================================================
   ToolsGO — Animaciones
   Motion intencional. Tres momentos:
     1) Hero reveal escalonado (al cargar)
     2) Reveal al entrar en viewport (scroll)
     3) Micro-estados (hover, pulse, etc.)
   Todo respeta prefers-reduced-motion.
   ========================================================================== */

/* === Keyframes === */
@keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes rise-soft {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 200, 150, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(0, 200, 150, 0); }
}

@keyframes pulse-blue {
    0%, 100% { box-shadow: 0 0 0 0 rgba(26, 71, 245, 0.5); }
    50%      { box-shadow: 0 0 0 8px rgba(26, 71, 245, 0); }
}

@keyframes draw-line {
    from { stroke-dashoffset: 100; }
    to   { stroke-dashoffset: 0; }
}

@keyframes ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* === 1. Hero reveal al cargar === */
.hero__tag,
.hero h1,
.hero__lead,
.hero__actions,
.hero__stats,
.plugin-shot {
    opacity: 0;
    animation: rise 0.7s var(--ease-out) forwards;
}
.hero__tag    { animation-delay: 0.05s; }
.hero h1      { animation-delay: 0.12s; }
.hero__lead   { animation-delay: 0.22s; }
.hero__actions{ animation-delay: 0.30s; }
.hero__stats  { animation-delay: 0.40s; }
.plugin-shot  { animation-delay: 0.18s; animation-duration: 0.9s; }

/* Pulse del status "live" en el hero tag */
.hero__tag .dot { animation: pulse 2.4s var(--ease-in-out) infinite; }
.roadmap-card__status .dot { animation: pulse 2.4s var(--ease-in-out) infinite; }

/* === 2. Reveal al scroll (IntersectionObserver aplica .is-in) === */
.js .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger en grids */
.js .stagger > * {
    opacity: 0;
    transform: translateY(12px);
}
.stagger.is-in > * {
    animation: rise-soft 0.6s var(--ease-out) forwards;
}
.stagger.is-in > *:nth-child(1) { animation-delay: 0.04s; }
.stagger.is-in > *:nth-child(2) { animation-delay: 0.10s; }
.stagger.is-in > *:nth-child(3) { animation-delay: 0.16s; }
.stagger.is-in > *:nth-child(4) { animation-delay: 0.22s; }
.stagger.is-in > *:nth-child(5) { animation-delay: 0.28s; }
.stagger.is-in > *:nth-child(6) { animation-delay: 0.34s; }
.stagger.is-in > *:nth-child(7) { animation-delay: 0.40s; }
.stagger.is-in > *:nth-child(8) { animation-delay: 0.46s; }

/* === 3. Hover micro-interactions === */
.btn { transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t); }
.btn--primary:hover { transform: translateY(-1px); }

.tool { transition: background var(--t), transform var(--t); }
.tool:hover { background: var(--ink-3); }
.tool__icon { transition: background var(--t), color var(--t), border-color var(--t); }

.feature-card { transition: transform var(--t), border-color var(--t), box-shadow var(--t); }
.feature-card:hover { transform: translateY(-2px); }

.faq-q { transition: color var(--t), background var(--t); }

/* === 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;
    }
    .hero__tag, .hero h1, .hero__lead, .hero__actions, .hero__stats, .plugin-shot,
    .reveal, .stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
}