/* ══════════════════════════════════════════════════════════════════════════
   fp_logo_animado.css — Logo animado de Franja Pixelada

   Port del diseño «Logo Animado.dc.html» (Claude Design). El original vive en
   `archivos_diseño/logo_animado_tactico/` — fuera del repo publicable.

   El diseño está calibrado sobre una caja de 1024×1024 px con valores absolutos.
   Aquí toda esa geometría se expresa en porcentaje y en `cqmin` (1cqmin = 1% del
   lado del componente) para que la misma pieza sirva a 18 px en el checkout y a
   96 px en la portada sin retocar nada. Equivalencias usadas:

       píxel del diseño / 1024 · 100 = valor en % (o en cqmin para longitudes)

   Sin estilos inline a propósito: la CSP pública lleva nonce en `style-src` y un
   nonce NO cubre atributos `style=`, así que un `style=""` quedaría bloqueado.
   Servido como archivo externo entra por `'self'` en las dos CSP (Django y el
   .htaccess de Hostinger) sin tocar ninguna de las dos.

   Las capas decorativas las inyecta fp_logo_animado.js. Sin JavaScript queda la
   insignia estática, que ya es el logo nuevo: mejora progresiva, no dependencia.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Raíz ──────────────────────────────────────────────────────────────────
   El tamaño lo fija quien lo usa (`.logo-mark`, `.ft-brand__logo`, …). Aquí
   solo hay un valor por defecto para que nunca colapse a 0.
   `container-type: size` es lo que habilita `cqmin` en los hijos.            */
.fp-la {
  --fp-la-size: 48px;   /* lo sobreescribe el sitio de uso */
  --fp-la-k: 1;         /* multiplicador de duración: >1 = más lento */
  --fp-la-fx: 1;        /* intensidad de los efectos: 0 = apagados */

  position: relative;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: var(--fp-la-size);
  height: var(--fp-la-size);
  overflow: hidden;
  /* Sin fondo: el arte lleva canal alfa y la marca se apoya en el color de cada
     página. `container-type` crea contexto de apilamiento, así que las capas con
     `mix-blend-mode` se mezclan entre ellas y NO con el fondo de la página. */
  background: transparent;
  container-type: size;
  line-height: 0;
  -webkit-user-select: none;
  user-select: none;
}

/* Todas las capas comparten esto. */
.fp-la > * {
  position: absolute;
  pointer-events: none;
}

/* ── Capa 0: la insignia ───────────────────────────────────────────────────
   Es la única capa real. Todo lo demás la ilumina.                          */
.fp-la picture {
  position: absolute;
  inset: 0;
  display: block;
}

.fp-la__base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Las dos capas de fondo del diseño —el barrido de luz sobre metal cepillado y
   la respiración de sombra— se quitaron al quitar la placa: una pintaba brillo
   sobre un metal que ya no existe y la otra dejaba un cuadro negro alrededor de
   una marca transparente. El resto del diseño está intacto. */

/* ── La llamarada pintada, distorsionada en vivo ───────────────────────────
   Repite la misma imagen y le aplica el filtro de turbulencia SVG, recortada
   a la corona circular del anillo. El `filter` solo se activa con la clase
   `.fp-la--js`: si el <defs> del filtro no existe (JS bloqueado), un
   `filter: url(#…)` roto haría que el navegador NO pinte el elemento.

   El original enmascaraba con `circle at 515px 462px` y paradas en 190/220/
   315/350 px. Aquí el radio del degradado se fija en 34.18cqmin (350/1024) y
   las paradas se recalculan como fracción de ese radio: 190/350 = 54.29 %, etc.
                                                                             */
.fp-la__warp {
  inset: 0;
  background-image: url("../images/logo_animado.png");   /* navegadores sin image-set() */
  background-image: image-set(
    url("../images/logo_animado.webp") type("image/webp"),
    url("../images/logo_animado.png") type("image/png")
  );
  background-size: 100% 100%;
  -webkit-mask-image: radial-gradient(circle 34.18cqmin at 50.29% 45.12%,
      transparent 54.29%, #000 62.86%, #000 90%, transparent 100%);
  mask-image: radial-gradient(circle 34.18cqmin at 50.29% 45.12%,
      transparent 54.29%, #000 62.86%, #000 90%, transparent 100%);
  mix-blend-mode: screen;
  opacity: calc(0.9 * var(--fp-la-fx));
}

.fp-la--js .fp-la__warp {
  filter: url("#fp-la-flamewarp");
}

/* ── Anillo de plasma: respiración ─────────────────────────────────────────
   660/1024 = 64.453 %. Centro del emblema: 515/1024 = 50.29 %, 462/1024 = 45.12 %. */
.fp-la__ring {
  left: 50.29%;
  top: 45.12%;
  width: 64.453%;
  height: 64.453%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, transparent 50%, rgba(0, 230, 120, 0.34) 63%, rgba(150, 255, 190, 0.22) 70%, transparent 80%);
  filter: blur(0.684cqmin);       /* 7px sobre 1024 */
  mix-blend-mode: screen;
  opacity: calc(0.8 * var(--fp-la-fx));
  animation: fpLaRingBreathe calc(4.2s * var(--fp-la-k)) ease-in-out infinite;
}

/* ── Llama verde viva (canvas de partículas) ───────────────────────────────
   780/1024 = 76.172 %, desplazado 125/1024 = 12.207 % y 72/1024 = 7.031 %.
   El sistema de coordenadas interno sigue siendo 780×780 (ver el JS), así que
   el dibujo es idéntico al del diseño a cualquier tamaño.                   */
.fp-la__flame {
  left: 12.207%;
  top: 7.031%;
  width: 76.172%;
  height: 76.172%;
  mix-blend-mode: screen;
  opacity: calc(0.95 * var(--fp-la-fx));
}

/* ── Anillo: barrido de escaneo rotatorio ──────────────────────────────────
   620/1024 = 60.547 %.                                                      */
.fp-la__scan {
  left: 50.29%;
  top: 45.12%;
  width: 60.547%;
  height: 60.547%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0deg, rgba(190, 255, 215, 0.22) 24deg, rgba(190, 255, 215, 0.05) 48deg, transparent 70deg);
  mix-blend-mode: screen;
  opacity: calc(0.7 * var(--fp-la-fx));
  animation: fpLaSpin calc(11s * var(--fp-la-k)) linear infinite;
}

/* ── Emblema: pulso dorado ─────────────────────────────────────────────────
   400/1024 = 39.063 %; centro vertical 460/1024 = 44.922 %.                 */
.fp-la__gold {
  left: 50.29%;
  top: 44.922%;
  width: 39.063%;
  height: 39.063%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 205, 70, 0.32) 0%, rgba(255, 190, 50, 0.12) 45%, transparent 68%);
  filter: blur(1.172cqmin);       /* 12px sobre 1024 */
  mix-blend-mode: screen;
  opacity: var(--fp-la-fx);
  animation: fpLaGoldPulse calc(3.4s * var(--fp-la-k)) ease-in-out infinite;
}

/* ── Grietas: luz que emana del emblema ────────────────────────────────────
   290/1024 = 28.320 %, 300/1024 = 29.297 %.                                 */
.fp-la__crack {
  left: 50.29%;
  top: 44.922%;
  width: 28.320%;
  height: 29.297%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(200, 255, 205, 0.28) 10%, transparent 62%);
  filter: blur(0.879cqmin);       /* 9px sobre 1024 */
  mix-blend-mode: screen;
  opacity: var(--fp-la-fx);
  animation: fpLaCrack calc(5.6s * var(--fp-la-k)) linear infinite;
}

/* Las esquinas tácticas del diseño tampoco están: enmarcaban las cuatro esquinas
   de la placa. Sin placa quedaban dos motas olivas flotando en el vacío. */

/* ── Audio ambiental (opt-in) ──────────────────────────────────────────────
   Solo aparece con data-fp-logo-audio="on". Es un control real, no decoración:
   por eso recupera los eventos de puntero y respeta el mínimo táctil de 44 px.
                                                                             */
.fp-la__audio {
  left: 1.953%;
  bottom: 1.563%;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.5);
  color: #b8c4b0;
  border: 1px solid rgba(138, 158, 74, 0.5);
  border-radius: 2px;
  padding: 6px 12px;
  font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.1em;
  cursor: pointer;
  z-index: 5;
}

.fp-la__audio:hover,
.fp-la__audio:focus-visible {
  border-color: rgba(201, 162, 39, 0.8);
  color: #e0d9c8;
}

/* Contenedor del <defs> del filtro SVG que inyecta el JS. Va como clase y no
   como `style=` por lo mismo de siempre: la CSP bloquea los atributos inline. */
.fp-la-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   Fotogramas — copiados tal cual del diseño
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes fpLaRingBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);     opacity: 0.55; }
  50%      { transform: translate(-50%, -50%) scale(1.035); opacity: 0.95; }
}

@keyframes fpLaSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes fpLaGoldPulse {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.97); }
  50%      { opacity: 0.85; transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes fpLaCrack {
  0%, 100% { opacity: 0.15; }
  18%      { opacity: 0.5; }
  24%      { opacity: 0.25; }
  41%      { opacity: 0.6; }
  47%      { opacity: 0.3; }
  72%      { opacity: 0.55; }
  80%      { opacity: 0.2; }
}

/* ── Movimiento reducido ───────────────────────────────────────────────────
   El propio diseño trae `@media (prefers-reduced-motion: reduce) { * { animation:
   none !important } }`. Se respeta y además el JS no arranca el canvas: queda la
   insignia con su iluminación fija, que sigue siendo el logo nuevo.

   OJO: Windows con «animaciones» desactivadas activa esta consulta. Si en tu PC
   el logo no se mueve pero en el teléfono sí, es esto — no un fallo.          */
@media (prefers-reduced-motion: reduce) {
  .fp-la *,
  .fp-la {
    animation: none !important;
  }
  .fp-la__flame { display: none; }
}