/* ============================================================================
   marca.css · BTG · el adorno que no cabe en config.js.

   Tres cosas, todas del index.html anterior (rama `legacy`):
     · el fondo ambiental: dos orbes, la rejilla, el logo en mosaico, la viñeta
     · el cristal de la tarjeta: backdrop-filter y el borde degradado
     · el realce de la tarjeta cuando el orbe le pasa por encima (marca.js)

   Casi todo el tinte sale de las variables del tema con color-mix(), no
   escrito a mano: así cambiar la paleta de config.js cambia también el fondo.
   Escribir aquí `rgba(248, 209, 26, …)` daría un falso aprobado.

   La excepción son las dos tintas del borde degradado de la tarjeta: el cian
   y el violeta del portal anterior no corresponden a ningún token del core.
   Van arriba como variables propias, que es lo más cerca de un token que
   pueden estar.
   ========================================================================== */

:root {
  /* Centro del foco del mosaico. marca.js las mueve con el puntero; estos son
     los valores de reposo, los mismos que tenía el portal anterior. */
  --mx: 50%;
  --my: 38%;

  /* Las dos tintas del filo de la tarjeta. Sin equivalente en el tema. */
  --btg-filo-1: rgba(47, 230, 255, 0.45);
  --btg-filo-2: rgba(124, 92, 255, 0.40);
}

/* ------------------------------------------------------------ fondo ambiental */

.btg-fondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.btg-orbe {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.4;
  will-change: transform;
}

.btg-orbe--1 {
  width: 52vmax; height: 52vmax;
  top: -16vmax; left: -12vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--acento) 55%, transparent), transparent 60%);
  animation: btg-deriva-1 24s ease-in-out infinite alternate;
}

.btg-orbe--2 {
  width: 46vmax; height: 46vmax;
  bottom: -16vmax; right: -10vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--acento-2) 50%, transparent), transparent 60%);
  animation: btg-deriva-2 30s ease-in-out infinite alternate;
}

@keyframes btg-deriva-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); }
}
@keyframes btg-deriva-2 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-5vmax, -3vmax, 0) scale(1.1); }
}

.btg-rejilla {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--texto) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--texto) 3%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 42%, #000 25%, transparent 72%);
          mask-image: radial-gradient(ellipse at 50% 42%, #000 25%, transparent 72%);
}

/* El logo repetido, revelado solo alrededor del puntero. La ruta es de este
   cliente y por eso vive aquí y no en vendor/. build.sh deja el fichero en la
   raíz de dist/, no en dist/custom/: copia el CONTENIDO de custom/. */
.btg-mosaico {
  position: absolute; inset: 0;
  background-image: url("BTG-logo.png");
  background-repeat: repeat;
  background-size: 230px auto;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(circle 220px at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 72%);
          mask-image: radial-gradient(circle 220px at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, 0.5) 40%, transparent 72%);
  will-change: mask-image;
}

.btg-vineta {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 38%, color-mix(in srgb, var(--fondo) 35%, transparent) 100%);
}

/* Sin animación para quien la ha desactivado en el sistema. El fondo se queda
   quieto; marca.js además no engancha el puntero. */
@media (prefers-reduced-motion: reduce) {
  .btg-orbe { animation: none; }
}

/* ------------------------------------------------- cristal de la tarjeta */
/* Pisa `background: var(--superficie)` de base.css. La geometría (560px de
   ancho, 30px de relleno, --radio-l) ya es la misma en las dos, así que aquí
   solo va el material. */

.tarjeta {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--texto) 4.5%, transparent),
    color-mix(in srgb, var(--texto) 1.2%, transparent)
  );
  background-color: color-mix(in srgb, var(--superficie-opaca) 0%, transparent);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  box-shadow:
    var(--sombra-tarjeta),
    inset 0 1px 0 color-mix(in srgb, var(--texto) 6%, transparent);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

/* El filo iridiscente: un borde de 1px pintado con un degradado, recortado con
   dos máscaras que se restan. No captura el puntero. */
.tarjeta::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--btg-filo-1), transparent 38%, transparent 62%, var(--btg-filo-2));
  -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;
  opacity: 0.7;
  pointer-events: none;
}

/* Cuando el orbe queda debajo, la tarjeta se vuelve opaca para que el texto no
   compita con el resplandor. Lo activa marca.js. */
.tarjeta.btg-iluminada {
  background-color: color-mix(in srgb, var(--superficie-opaca) 98%, transparent);
  box-shadow:
    var(--sombra-capa),
    inset 0 1px 0 color-mix(in srgb, var(--texto) 7%, transparent);
}