/* ==========================================================================
   Fleepr — Hero (solo index.html)
   ========================================================================== */

#hero-mesh {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.hero-blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(70px);
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

.hero-blob-a {
    width: 480px;
    height: 480px;
    top: -160px;
    left: -120px;
    background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
    opacity: 0.10;
    animation: hero-float-a 16s ease-in-out infinite;
}

.hero-blob-b {
    width: 420px;
    height: 420px;
    top: 40px;
    right: -140px;
    background: radial-gradient(circle, var(--foreground) 0%, transparent 70%);
    opacity: 0.08;
    animation: hero-float-b 20s ease-in-out infinite;
}

.hero-blob-c {
    width: 360px;
    height: 360px;
    bottom: -180px;
    left: 40%;
    background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
    opacity: 0.07;
    animation: hero-float-c 24s ease-in-out infinite;
}

@keyframes hero-float-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, 40px) scale(1.15); }
}
@keyframes hero-float-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-50px, 30px) scale(1.1); }
}
@keyframes hero-float-c {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -40px) scale(1.2); }
}

#hero-spotlight {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(320px 320px at var(--mouse-x) var(--mouse-y), var(--foreground) 0%, transparent 70%);
    opacity: 0.05;
    transition: opacity 0.3s ease;
}

#hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 65%, transparent 100%);
}

#hero-content {
    transition: transform 0.2s ease-out;
    transform-style: preserve-3d;
}

/* ---- Hero en tres columnas: personas · mensaje · agentes ----
   Las líneas y los "paquetes" de datos entre ambos lados los pinta
   assets/js/hero-links.js en #hero-links, detrás del contenido. */
#hero-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

/* Por debajo de 1280px no hay sitio para los lados: el hero es solo texto
   (hero-links.js tampoco anima en esos tamaños). */
.hero-side,
#hero-links { display: none; }

.hero-node {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.hero-node-avatar {
    width: 3rem;
    height: 3rem;
    font-size: 0.875rem;
    font-weight: 600;
    background-color: var(--popover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.hero-node-avatar.avatar-chip-agent {
    background-color: var(--popover);
    border-color: var(--muted);
}

/* Destello al recibir un paquete (clase puesta por hero-links.js) */
.hero-node.is-receiving .hero-node-avatar {
    border-color: var(--foreground);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--foreground) 6%, transparent), 0 4px 12px rgba(0, 0, 0, 0.05);
}
.hero-node.is-receiving.is-result .hero-node-avatar {
    border-color: var(--live);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 12%, transparent), 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Escritorio (xl): cada lado es una zona que ocupa toda la altura del hero (y
   todo el ancho libre junto al texto), y cada nodo —avatar, nombre y cargo—
   se coloca libre dentro de ella con variables inline en el HTML:
     --px  centro horizontal del nodo (% del ancho de la zona)
     --y   centro vertical del nodo (% del alto de la zona)
   Elige alturas distintas a las del otro lado para que ningún par quede "enfrentado".
   Variantes: .hero-node--stacked (nombre debajo del avatar), --lg / --sm (tamaño).
   Por debajo de 1280px no se muestran (ver arriba). */
@media (min-width: 1280px) {
    #hero-links { display: block; }
    .hero-side {
        display: block;
        align-self: stretch;
        position: relative;
        min-height: 26rem;
    }
    .hero-node {
        position: absolute;
        left: var(--px, 50%);
        top: var(--y, 50%);
        transform: translate(-50%, -50%);
        white-space: nowrap;
    }
    .hero-side-people .hero-node { flex-direction: row-reverse; text-align: right; }
    .hero-side-agents .hero-node { text-align: left; }

    .hero-node--stacked,
    .hero-side-people .hero-node--stacked {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    .hero-node--lg .hero-node-avatar { width: 3.5rem; height: 3.5rem; font-size: 1rem; }
    .hero-node--sm .hero-node-avatar { width: 2.5rem; height: 2.5rem; font-size: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-blob { animation: none; }
    #hero-content { transition: none; }
    .hero-node-avatar { transition: none; }
}