/* Pantallas de entrada (portada, acceso y fuera de horario).

   Sólo lo que Tailwind no puede dar: el panel decorativo de los boids —retícula, anillo y
   lienzo— con sus animaciones. El resto del layout va con utilidades en la plantilla.

   La forma de estas pantallas es la misma que la de academia.integraknowledge.net para
   que las tres apps se lean como una familia; el color es el violeta de esta casa
   (#6B3FE8) y no el azul de allá. */

:root {
  --entrada-acento: #6B3FE8;
  --entrada-acento-rgb: 107, 63, 232;
}

/* ⚠️ El TAMAÑO de esta caja no es decorativo: los umbrales del detector de boids
   (static/boids.js) están medidos para un panel de ~400-500 px de lado. Cambiar
   aspect-ratio o min-height cambia la densidad de la parvada y hay que volver a medirlos,
   o vuelve el colapso en grumo a los 40 s. */
.entrada-visual {
  aspect-ratio: 1.05;
  background:
    radial-gradient(circle at 45% 45%, rgba(var(--entrada-acento-rgb), .16), transparent 62%),
    #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 1.25rem;
  box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
  min-height: 20rem;
  overflow: hidden;
  position: relative;
}

.entrada-visual::before {
  animation: entrada-deriva 32s linear infinite;
  background-image:
    linear-gradient(rgba(var(--entrada-acento-rgb), .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--entrada-acento-rgb), .16) 1px, transparent 1px);
  background-size: 2.8rem 2.8rem;
  content: "";
  inset: 0;
  -webkit-mask-image: radial-gradient(circle, black, transparent 72%);
  mask-image: radial-gradient(circle, black, transparent 72%);
  position: absolute;
}

.entrada-visual::after {
  animation: entrada-respiro 7s ease-in-out infinite;
  border: 1px solid rgba(var(--entrada-acento-rgb), .5);
  border-radius: 50%;
  content: "";
  height: 23%;
  left: 38%;
  position: absolute;
  top: 38%;
  width: 23%;
}

/* pointer-events: none es obligatorio: el lienzo cubre el panel entero y sin él se queda
   con el cursor y con el arrastre de selección. */
.entrada-visual canvas {
  display: block;
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

@keyframes entrada-deriva { to { background-position: 2.8rem 2.8rem; } }

@keyframes entrada-respiro {
  0%, 100% { opacity: .45; transform: scale(.97); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* En móvil el panel se retira entero en vez de encogerse: encogerlo cambiaría la densidad
   de la parvada, que es justo lo que descalibra el detector. Es adorno; no se pierde nada. */
@media (max-width: 767px) {
  .entrada-visual { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* El lienzo no aparece aquí: se detiene por su cuenta, en JS. `animation: none` NO para
     una animación de canvas. */
  .entrada-visual::before,
  .entrada-visual::after { animation: none !important; }
}