/* ==========================================================================
   RADAR · La marca
   --------------------------------------------------------------------------
   Un cuadrante: dos ejes, un arco y una aguja que se detiene sobre el hallazgo.
   No es un radar dibujado literal —eso sería una caricatura de aeropuerto—,
   sino el instrumento con el que se busca algo y se encuentra.

   El movimiento es UNA pasada al cargar y se acabó. Girar en bucle es lo que
   convierte a un logo en adorno: gasta batería, distrae en la esquina de la
   pantalla y, sobre todo, no termina en nada. Acá el barrido termina en el
   punto, que es de lo que se trata.

   La versión quieta tiene que verse bien sola: es la que va en la pestaña, en
   el papel y en cualquier pantalla con "reducir movimiento" activado.
   ========================================================================== */

.marca-radar {
    width: 34px;
    height: 34px;
    flex: none;
    color: var(--ink, #14161a);
}

.marca-eje,
.marca-arco {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: .35;
}

.marca-aguja {
    fill: none;
    stroke: var(--accent, #3f3d9e);
    stroke-width: 2.4;
    stroke-linecap: round;
    transform-origin: 5px 27px;
    animation: marca-barrido 1s cubic-bezier(.22, 1, .36, 1) both;
}

.marca-hallazgo {
    fill: var(--accent, #3f3d9e);
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: marca-hallazgo .45s ease-out .8s forwards;
}

@keyframes marca-barrido {
    from { transform: rotate(-54deg); opacity: .3; }
    to { transform: rotate(0deg); opacity: 1; }
}

@keyframes marca-hallazgo {
    from { opacity: 0; transform: scale(.3); }
    to { opacity: 1; transform: scale(1); }
}

/* Quien pidió menos movimiento ve la marca ya encontrada, no una a medio
   camino: el estado final es el que informa. */
@media (prefers-reduced-motion: reduce) {
    .marca-aguja,
    .marca-hallazgo {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* En papel, sin animación y sin depender de que el color se imprima. */
@media print {
    .marca-aguja,
    .marca-hallazgo {
        animation: none;
        opacity: 1;
        transform: none;
    }
}