/* =====================================================================
   LATIDO Y RESPLANDOR DE "DONA AQUÍ" (v3, 27-oct, pedido de Camilo)
   El mismo trato que la tarjeta del Embajador de la landing (SoapTiles.tsx + index.css):
   - latido doble del botón (tile-beat, 1,9 s);
   - halo blanco que respira alrededor (tile-glow, 2,4 s);
   - anillo rojo con un destello blanco que lo recorre (.beam-ring, 3,4 s);
   - el corazón de la insignia latiendo grande al mismo ritmo que el botón (tile-heart-beat-big, 1,9 s).
   Va en el Donar de la barra o la columna (escritorio y tablet; desde el 2-nov, sobre el video o a su
   derecha), en el de la fila del celular y del apaisado, y en el que flota al bajar. El anillo es un hijo que gira por transform (técnica de .beam-ring), nunca un
   ángulo animado con @property; el halo anima solo su opacidad (no repinta la sombra en cada cuadro).
   Quieto con movimiento reducido y "Pausar animaciones"; en Alto contraste y colores forzados se quitan
   el halo y el anillo (el latido sigue). En pausa cuando no se ve (capa encima, pestaña oculta, fuera de la
   ventana: donar-latido.js marca data-fuera-de-vista). Las cuatro animaciones siguen un reloj común
   (--tgd-desde, que pone donar-latido.js): al repintarse el hero no vuelven a empezar.
   ===================================================================== */

/* el botón late (la escala va en el ancla: el remezón y el corazón ya los anima donar.js con WAAPI) */
:is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones {
  transform-origin: 50% 50%;
  animation: tgd-latido 1.9s ease-in-out var(--tgd-desde, 0ms) infinite;
}
@keyframes tgd-latido {
  0%,
  40%,
  100% { transform: scale(1); }
  10% { transform: scale(1.05); }
  20% { transform: scale(1); }
  30% { transform: scale(1.03); }
}

/* el halo, como tile-glow: una capa apretada y fija (::after) y una ancha que crece de cero y se apaga
   (::before). Solo se anima la opacidad. El cuerpo va encima de las dos */
:is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-cuerpo { z-index: 1; }
:is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-remezon::before,
:is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-remezon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
}
:is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-remezon::before {
  box-shadow:
    0 0 48px 7px rgba(255, 255, 255, 0.85),
    0 0 26px 3px rgba(255, 255, 255, 0.5);
  opacity: 0;
  animation: tgd-resplandor 2.4s ease-in-out var(--tgd-desde, 0ms) infinite;
}
:is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-remezon::after {
  box-shadow: 0 0 14px 0 rgba(255, 255, 255, 0.3);
}
:is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones.tgd--grande .tgd-remezon::before,
:is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones.tgd--grande .tgd-remezon::after { border-radius: 16px; }
@keyframes tgd-resplandor {
  0%,
  100% { opacity: 0; }
  50% { opacity: 1; }
}
/* el halo pasa por detrás de la transmisión (sin esto, el Donar que late pegado al video, sobre él, bajo él o a su
   lado, lo velaba) */
#vt .vt-video { position: relative; z-index: 1; }
/* con foco de teclado el halo queda quieto y tenue: sobre el rojo de Iaán el anillo de foco del flotante
   bajaba de 3:1 en el pico */
:is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones:focus-visible .tgd-remezon::before { animation: none; opacity: 0; }
/* en la fila del celular el botón vecino con foco queda sobre el Donar que late (su anillo no se tapa) */
.vt-fila :is(.vt-btn, button, a):focus-visible { position: relative; z-index: 3; }

/* el anillo: 2 px de borde con el cónico rojo y su destello blanco girando dentro */
:is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-anillo {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 2px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
}
@media (min-width: 48rem) {
  :is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-anillo { padding: 2.5px; }
}
:is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-anillo::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /* cuadrado de lado 340 % del ancho: cubre el botón en cualquier ángulo (el botón es más ancho que alto) */
  width: 340%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(
    #f5313e 0deg 244deg,
    #ffd9dc 274deg,
    #ffffff 300deg,
    #ffd9dc 326deg,
    #f5313e 356deg 360deg
  );
  animation: tgd-anillo-gira 3.4s linear var(--tgd-desde, 0ms) infinite;
}
@keyframes tgd-anillo-gira {
  to { transform: rotate(360deg); }
}

/* el corazón late grande, al mismo ritmo y en fase con el botón */
:is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-insignia .tgd-corazon {
  animation: tgd-corazon-late 1.9s ease-in-out var(--tgd-desde, 0ms) infinite;
}
@keyframes tgd-corazon-late {
  0%,
  40%,
  100% { transform: scale(1); }
  10% { transform: scale(1.6); }
  20% { transform: scale(1); }
  30% { transform: scale(1.45); }
}

/* quietos: movimiento reducido, "Pausar animaciones" (y ?rm=1) y el modo quieto de donar.js.
   Queda el anillo rojo con el destello fijo y un halo tenue */
@media (prefers-reduced-motion: reduce) {
  :is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-remezon::before { opacity: 0; }
  :is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones,
  :is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-remezon::before,
  :is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-anillo::after,
  :is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-insignia .tgd-corazon { animation: none; }
}
html:is([data-motion="off"], [data-rm="1"]) :is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-remezon::before,
:is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones[data-quieto] .tgd-remezon::before { opacity: 0; }
html:is([data-motion="off"], [data-rm="1"]) :is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones,
html:is([data-motion="off"], [data-rm="1"]) :is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-remezon::before,
html:is([data-motion="off"], [data-rm="1"]) :is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-anillo::after,
html:is([data-motion="off"], [data-rm="1"]) :is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-insignia .tgd-corazon,
:is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones[data-quieto],
:is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones[data-quieto] .tgd-remezon::before,
:is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones[data-quieto] .tgd-anillo::after,
:is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones[data-quieto] .tgd-insignia .tgd-corazon { animation: none; }

/* en pausa cuando no se ve: una capa encima (lámina, El Timón, menú, hoja del himno), la pestaña
   oculta, el flotante escondido o el botón fuera de la ventana */
#vt:is([data-cubierta], [data-oculta]) .tgd--corazones,
#vt:is([data-cubierta], [data-oculta]) .tgd--corazones .tgd-remezon::before,
#vt:is([data-cubierta], [data-oculta]) .tgd--corazones .tgd-anillo::after,
#vt:is([data-cubierta], [data-oculta]) .tgd--corazones .tgd-insignia .tgd-corazon,
#vt:is([data-cubierta], [data-oculta]) ~ .vt-don-flota .tgd--corazones,
#vt:is([data-cubierta], [data-oculta]) ~ .vt-don-flota .tgd--corazones .tgd-remezon::before,
#vt:is([data-cubierta], [data-oculta]) ~ .vt-don-flota .tgd--corazones .tgd-anillo::after,
#vt:is([data-cubierta], [data-oculta]) ~ .vt-don-flota .tgd--corazones .tgd-insignia .tgd-corazon,
.vt-don-flota:not([data-visible]) .tgd--corazones,
.vt-don-flota:not([data-visible]) .tgd--corazones .tgd-remezon::before,
.vt-don-flota:not([data-visible]) .tgd--corazones .tgd-anillo::after,
.vt-don-flota:not([data-visible]) .tgd--corazones .tgd-insignia .tgd-corazon,
.tgd--corazones[data-fuera-de-vista],
.tgd--corazones[data-fuera-de-vista] .tgd-remezon::before,
.tgd--corazones[data-fuera-de-vista] .tgd-anillo::after,
.tgd--corazones[data-fuera-de-vista] .tgd-insignia .tgd-corazon { animation-play-state: paused; }

/* alto contraste y colores forzados: sin halo ni anillo (queda el borde de sistema) */
html[data-contraste="1"] :is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-remezon::before,
html[data-contraste="1"] :is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-remezon::after,
html[data-contraste="1"] :is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-anillo { display: none; }
@media (forced-colors: active) {
  :is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-remezon::before,
  :is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-remezon::after,
  :is(.vt-accion, .vt-fila, .vt-don-flota) .tgd--corazones .tgd-anillo { display: none; }
}

/* =====================================================================
   "DONACIÓN INTERNACIONAL" (opciones/extranjero.js): sin animación propia (1-nov)
   El 30-oct el gemelo de Donar llevaba aquí un brillo rojo lento (4,6 s) y el globo que se asomaba. El 1-nov Camilo
   eligió la versión 2 "Estampilla" del artefacto de los botones, que queda QUIETA en reposo (solo responde al puntero,
   a la presión y al foco, en opciones/extranjero.css): así "Dona aquí" es el único que late. El brillo, su pausa y
   su reloj común salieron de este archivo y de donar-latido.js
   ===================================================================== */