/* ============================================================
   AKDMY · el fondo animado de los paneles, dentro de una sección

   Mismos efectos y mismos tiempos que el de los paneles
   (ApiPANEL/paneles.css): tres auroras que derivan, la malla, el
   grano, la constelación y el foco que sigue al ratón.

   Con una diferencia que lo cambia todo: allí las capas van FIJAS
   a la ventana, porque un panel mide miles de píxeles y una capa
   de ese tamaño se rasteriza entera en cada scroll. Aquí van
   ABSOLUTAS dentro de la sección, porque el fondo tiene que
   quedarse en su banda y no derramarse sobre el resto de la
   portada.

   Las medidas de las auroras también cambian por eso: allí se
   miden en «vw» contra la ventana; aquí en porcentaje de la
   sección, que es más baja y más ancha.
   ============================================================ */

.ak-fondo {
  position: absolute;
  inset: 0;

  /* Por ENCIMA de las capas de color de la plantilla, no por
     debajo. Cada franja lleva su propio tinte y la opacidad no
     es la misma en todas: en la portada es del 22 % —un velo, y
     el fondo se veía a través— pero en /cursos.html es del 88 %
     y además un degradado oscuro, que se lo tragaba entero. Ese
     era el motivo de que el TOP 10 se viera distinto en las dos
     páginas. Sigue por debajo del contenido, que va en la capa
     36 y es hermano posterior de todo este bloque. */
  z-index: 11;

  overflow: hidden;
  pointer-events: none;

  /* El mismo color de base que la página de los paneles. Va opaco
     porque debajo está el color plano de la plantilla, y si se
     dejara translúcido se mezclarían los dos y saldría un tono que
     no es ni el uno ni el otro. */
  background: #07070f;
}

.ak-fondo .aurora {
  position: absolute;
  width: 46%;
  height: 190%;
  min-width: 340px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .34;
  will-change: transform;
}
.ak-fondo .aurora.a {
  background: radial-gradient(circle, #5857d5, transparent 62%);
  top: -60%; left: -10%;
  animation: ak-deriva1 22s ease-in-out infinite;
}
.ak-fondo .aurora.b {
  background: radial-gradient(circle, #d203ab, transparent 62%);
  top: -30%; right: -14%;
  animation: ak-deriva2 27s ease-in-out infinite;
}
.ak-fondo .aurora.c {
  background: radial-gradient(circle, #182a6b, transparent 62%);
  bottom: -80%; left: 28%;
  animation: ak-deriva3 31s ease-in-out infinite;
}

@keyframes ak-deriva1 { 0%,100% { transform: translate3d(0,0,0) scale(1); }   50% { transform: translate3d(14%, 12%, 0) scale(1.18); } }
@keyframes ak-deriva2 { 0%,100% { transform: translate3d(0,0,0) scale(1.1); } 50% { transform: translate3d(-16%, -10%, 0) scale(.92); } }
@keyframes ak-deriva3 { 0%,100% { transform: translate3d(0,0,0) scale(1); }   50% { transform: translate3d(10%, -14%, 0) scale(1.22); } }

.ak-fondo .malla {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(ellipse 82% 100% at 50% 45%, #000 30%, transparent 82%);
  mask-image: radial-gradient(ellipse 82% 100% at 50% 45%, #000 30%, transparent 82%);
}

.ak-fondo .grano {
  position: absolute;
  inset: -200%;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: ak-grano 7s steps(6) infinite;
}
@keyframes ak-grano {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-3%, 4%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -4%); }
  80% { transform: translate(4%, 2%); }
}

.ak-fondo .constelacion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .45;
}

.ak-fondo .foco {
  position: absolute;
  top: 0;
  left: 0;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(125, 124, 255, .13), transparent 62%);
  opacity: 0;
  transition: opacity .4s;
  will-change: transform;
}

/* Quien pide menos movimiento se queda con el degradado quieto:
   sigue siendo el mismo fondo, pero sin nada que se mueva. */
@media (prefers-reduced-motion: reduce) {
  .ak-fondo .aurora,
  .ak-fondo .grano { animation: none; }
}

/* --------------------------------------------- el fondo de la plantilla

   Retirado. En esta franja había dos fondos, uno encima del otro:
   el de la plantilla —base blanca, una capa vacía y un tinte
   oscuro— y el nuestro, opaco, por encima.

   Tapar no es quitar. El nuestro se monta desde JavaScript después
   de que la plantilla pinte la franja, así que al recargar se
   llegaba a ver el de debajo asomando antes de que llegara el de
   arriba: dos fondos, y a veces se notaba.

   El color de partida se le pone al contenedor para que la franja
   nazca ya con el tono bueno aunque las auroras tarden un instante
   en montarse.

   Acotado a la franja del Top 10, que es la única con carrusel en
   las dos páginas que cargan este archivo: las demás conservan su
   color. Y la capa nuestra no lleva las clases de utilidad de la
   plantilla, así que el segundo selector no la alcanza. */
section:has(.gallery-carousel) > div > .absolute.inset-0.pointer-events-none {
  background: #07070f;
}
section:has(.gallery-carousel) > div > .absolute.inset-0.pointer-events-none
  > .absolute.inset-0 {
  display: none;
}