/* assets/css/innovacion-id.css */

/* ── Circuit pattern hero ── */
.circuit-grid {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.12;
}
.circuit-grid svg { width: 100%; height: 100%; }

/* ── Pulse on hero badge ── */
.pulse-badge {
    position: relative;
}
.pulse-badge::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 9999px;
    background: rgba(168, 85, 247, 0.4);
    animation: pulse-ring 2.5s ease-out infinite;
}
@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ── Glow cards ── */
.glow-card {
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.glow-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(168,85,247,0), rgba(168,85,247,0));
    transition: background 0.4s ease;
    z-index: -1;
}
.glow-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(168, 85, 247, 0.12);
}
.glow-card:hover::before {
    background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(56,182,255,0.1));
}

/* ── Animated counter ── */
.counter-value {
    display: inline-block;
    min-width: 2ch;
}

/* ── Timeline connector ── */
.timeline-step {
    position: relative;
}
@media (min-width: 768px) {
    .timeline-connector {
        position: relative;
    }
    .timeline-connector::after {
        content: '';
        position: absolute;
        top: 32px;
        left: 100%;
        width: calc(100% - 48px);
        height: 2px;
        background: linear-gradient(90deg, #7c3aed, #38b6ff);
        opacity: 0.3;
        transform-origin: left;
    }
    .timeline-connector .timeline-dot {
        position: absolute;
        top: 27px;
        right: -8px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #7c3aed;
        opacity: 0;
    }
    .timeline-connector.visible::after {
        animation: draw-line 0.8s ease forwards;
    }
    .timeline-connector.visible .timeline-dot {
        animation: pop-dot 0.3s ease forwards;
        animation-delay: 0.7s;
    }
}
@keyframes draw-line {
    from { transform: scaleX(0); opacity: 0; }
    to { transform: scaleX(1); opacity: 0.4; }
}
@keyframes pop-dot {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ── Retrofitting diagram ── */
.retro-diagram {
    position: relative;
}
.retro-signal {
    animation: signal-pulse 2s ease-in-out infinite;
}
.retro-signal:nth-child(2) { animation-delay: 0.5s; }
.retro-signal:nth-child(3) { animation-delay: 1s; }

@keyframes signal-pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* ── Data flow lines (retrofitting SVG) ── */
.data-flow {
    stroke-dasharray: 8 4;
    animation: flow 1.5s linear infinite;
}
@keyframes flow {
    to { stroke-dashoffset: -24; }
}

/* ── Floating particles in hero ── */
.particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: float-particle linear infinite;
}
@keyframes float-particle {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100vh) scale(0.3); opacity: 0; }
}

/* ── Trayectoria section glow borders ── */
.tray-card {
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.tray-card:hover {
    border-color: rgba(168, 85, 247, 0.3);
    transform: translateY(-2px);
}

/* ── Stat bar animation ── */
.stat-bar {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, #7c3aed, #38b6ff);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.stat-bar.visible { transform: scaleX(1); }