/* ==========================================================================
   BORDE BRILLANTE — borde animado con resplandor
   --------------------------------------------------------------------------
   Componente reutilizable. Uso:

     <div class="borde-brillante">
       <div class="borde-brillante__superficie">…contenido…</div>
     </div>

   Para ajustarlo, sobrescribe sus custom properties sobre .borde-brillante
   (colores, grosor, velocidad...). Por defecto lee los colores del tema del
   cliente en variables.css, así al cambiar de restaurante el borde cambia solo.

   OJO: el nesting nativo NO concatena BEM, así que las variantes y los
   elementos van en selectores completos (.borde-brillante__superficie).
   ========================================================================== */

/* Propiedad registrada: sin @property el ángulo NO interpola, solo salta.
   inherits:true para que el resplandor use exactamente el mismo ángulo. */
@property --brillo-angulo {
  syntax: "<angle>";
  initial-value: 53deg;
  inherits: true;
}

.borde-brillante {
  /* Blanco y negro alternados: cuatro tramos en el giro (dos de cada), que
     dan un brillo tipo "reflejo metálico" en vez de un degradado de color */
  --brillo-color-1: #ffffff;
  --brillo-color-2: var(--color-negro);
  --brillo-superficie: var(--color-crema);

  --brillo-grosor: 3px;
  --brillo-radio: calc(var(--border-radius) + 6px);
  /* Giro lento a propósito: es un adorno, no debe robar atención ni
     castigar la batería de móviles modestos */
  --brillo-velocidad: 6s;
  /* Desenfoque contenido: el resplandor es una segunda capa a pantalla
     completa, y un blur alto es caro de pintar en móviles baratos */
  --brillo-desenfoque: 12px;
  --brillo-opacidad: 0.55;

  /* El gradiente se define UNA vez y lo reutilizan borde y resplandor.
     Cuatro tramos alternando los dos colores (el quinto repite el primero
     para que el giro cierre sin costura).
     El fallback 53deg mantiene un borde estático si falta @property. */
  --brillo-gradiente: conic-gradient(
    from var(--brillo-angulo, 53deg),
    var(--brillo-color-1),
    var(--brillo-color-2),
    var(--brillo-color-1),
    var(--brillo-color-2),
    var(--brillo-color-1)
  );

  position: relative;
  /* El "borde" es en realidad el padding: el gradiente de fondo asoma
     alrededor de la superficie. Sin pseudo-elementos ni z-index negativo. */
  padding: var(--brillo-grosor);
  border-radius: var(--brillo-radio);
  background: var(--brillo-gradiente);
  animation: brillo-girar var(--brillo-velocidad) linear infinite;
}

/* Resplandor: el mismo gradiente, desenfocado. Al no usar z-index negativo
   funciona dentro de cualquier contexto de apilado. */
.borde-brillante::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--brillo-gradiente);
  filter: blur(var(--brillo-desenfoque));
  opacity: var(--brillo-opacidad);
  pointer-events: none;
}

/* La superficie (el contenido real) se apila por encima del resplandor */
.borde-brillante__superficie {
  position: relative;
  z-index: 1;
  border-radius: calc(var(--brillo-radio) - var(--brillo-grosor));
  background: var(--brillo-superficie);
}

@keyframes brillo-girar {
  to {
    --brillo-angulo: 413deg;
  }
}

/* El giro es puramente decorativo: se detiene y el borde se queda estático
   (reset.css ya apaga animaciones, pero lo dejamos explícito y documentado) */
@media (prefers-reduced-motion: reduce) {
  .borde-brillante {
    animation: none;
  }
}