/* =============================================================
   aurora.css — Fondo dinámico + bloques multimedia
   Compartido por index.html y wiki.html.

   El fondo son cuatro manchas de luz desenfocadas que derivan muy
   despacio. Solo se animan con transform (va por GPU, no repinta
   layout) y se apagan del todo si el sistema pide menos movimiento.
   ============================================================= */

/* ---------- Capa de fondo ----------
   IMPORTANTE — dos cosas que NO se pueden usar aquí, aprendidas a golpes:

   1. `mix-blend-mode` en una capa fija que cubre el viewport. Impide al
      navegador aislar la capa, así que en cada frame de scroll tiene que
      volver a mezclar toda la pantalla con lo que hay debajo.
   2. `filter: blur()` sobre elementos de 40-50vw. La región a desenfocar
      es enorme y hay que rasterizarla y volver a desenfocarla.

   Juntas dejaban el scroll en escritorio a varios cientos de ms por frame.
   El desenfoque no hace falta: un radial-gradient con paradas suaves ya se
   ve como una mancha difusa, y es prácticamente gratis. La animación queda
   siendo solo composición de transform, que sí va por GPU. */
.aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.aurora__blob {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

/* Ámbar: el dorado del sitio */
.aurora__blob--1 {
    width: 60vw; height: 60vw;
    min-width: 460px; min-height: 460px;
    top: -14%; left: -10%;
    background: radial-gradient(circle at 50% 50%,
        rgba(199, 154, 69, .30) 0%,
        rgba(199, 154, 69, .20) 26%,
        rgba(199, 154, 69, .09) 48%,
        rgba(199, 154, 69, .03) 66%,
        rgba(199, 154, 69, 0) 78%);
    animation: aurora-drift-1 34s ease-in-out infinite alternate;
}

/* Brasa: rojo apagado, da profundidad */
.aurora__blob--2 {
    width: 52vw; height: 52vw;
    min-width: 400px; min-height: 400px;
    top: 14%; right: -14%;
    background: radial-gradient(circle at 50% 50%,
        rgba(155, 55, 30, .26) 0%,
        rgba(155, 55, 30, .17) 28%,
        rgba(155, 55, 30, .07) 50%,
        rgba(155, 55, 30, .02) 68%,
        rgba(155, 55, 30, 0) 80%);
    animation: aurora-drift-2 41s ease-in-out infinite alternate;
}

/* Violeta: el contraste frío que hace que lo dorado destaque */
.aurora__blob--3 {
    width: 66vw; height: 66vw;
    min-width: 500px; min-height: 500px;
    bottom: -20%; left: 8%;
    background: radial-gradient(circle at 50% 50%,
        rgba(86, 44, 138, .26) 0%,
        rgba(86, 44, 138, .17) 28%,
        rgba(86, 44, 138, .07) 50%,
        rgba(86, 44, 138, .02) 68%,
        rgba(86, 44, 138, 0) 80%);
    animation: aurora-drift-3 47s ease-in-out infinite alternate;
}

/* Acero: pequeño y más rápido, evita que el conjunto parezca estático */
.aurora__blob--4 {
    width: 38vw; height: 38vw;
    min-width: 300px; min-height: 300px;
    top: 44%; left: 36%;
    background: radial-gradient(circle at 50% 50%,
        rgba(58, 110, 165, .22) 0%,
        rgba(58, 110, 165, .13) 30%,
        rgba(58, 110, 165, .05) 52%,
        rgba(58, 110, 165, 0) 74%);
    animation: aurora-drift-4 29s ease-in-out infinite alternate;
}

@keyframes aurora-drift-1 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(9vw, 7vh, 0) scale(1.14); }
    100% { transform: translate3d(3vw, 16vh, 0) scale(.94); }
}
@keyframes aurora-drift-2 {
    0%   { transform: translate3d(0, 0, 0) scale(1.05); }
    50%  { transform: translate3d(-11vw, 12vh, 0) scale(.9); }
    100% { transform: translate3d(-4vw, 24vh, 0) scale(1.16); }
}
@keyframes aurora-drift-3 {
    0%   { transform: translate3d(0, 0, 0) scale(.95); }
    50%  { transform: translate3d(13vw, -9vh, 0) scale(1.12); }
    100% { transform: translate3d(-6vw, -18vh, 0) scale(1); }
}
@keyframes aurora-drift-4 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-14vw, -11vh, 0) scale(1.25); }
    100% { transform: translate3d(10vw, 8vh, 0) scale(.88); }
}

/* Accesibilidad: sin movimiento, el fondo se queda quieto y más tenue. */
@media (prefers-reduced-motion: reduce) {
    .aurora__blob { animation: none; opacity: .35; }
}

/* =============================================================
   Bloques multimedia
   Un <figure class="wiki-media"> con un <img> apuntando al fichero
   definitivo. Si la imagen todavía no existe, el onerror marca la
   figura como vacía y se ve el hueco con el nombre exacto del fichero
   que hay que dejar caer ahí. Añadir el fichero basta: cero código.

   (El nombre de clase viene de la wiki, que fue donde se estrenó;
   la landing usa el mismo componente para no duplicar estilos.)
   ============================================================= */
.wiki-media {
    margin: 0 0 22px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(116, 109, 85, .45);
    background: rgba(10, 8, 5, .5);
}
.wiki-media img,
.wiki-media video {
    display: block;
    width: 100%;
    height: auto;
    background: #0a0805;
}
.wiki-media figcaption {
    padding: 10px 14px;
    color: #8d8677;
    font-size: 12.5px;
    line-height: 1.5;
    border-top: 1px solid rgba(116, 109, 85, .25);
}

/* Estado vacío: hueco con instrucciones */
.wiki-media.is-empty { border-style: dashed; }
.wiki-media.is-empty .wiki-media-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    aspect-ratio: 16 / 9;
    padding: 20px;
    text-align: center;
    background: repeating-linear-gradient(45deg,
        rgba(116, 109, 85, .05) 0 12px,
        rgba(116, 109, 85, .09) 12px 24px);
}
.wiki-media-slot { display: none; }
.wiki-media.is-empty .wiki-media-slot i { font-size: 26px; color: rgba(199, 154, 69, .6); }
.wiki-media.is-empty .wiki-media-slot .hint { color: #7d7768; font-size: 12px; letter-spacing: .5px; }
.wiki-media.is-empty .wiki-media-slot code {
    color: #c79a45;
    font-size: 12px;
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(116, 109, 85, .4);
    border-radius: 4px;
    padding: 4px 9px;
    font-family: monospace;
    word-break: break-all;
}

@media (max-width: 760px) {
    /* Menos capas que componer en equipos modestos. */
    .aurora__blob--4 { display: none; }
}

/* ---------- Compatibilidad con el fondo animado ----------
   Cualquier elemento con backdrop-filter tiene que recalcular su
   desenfoque cada vez que cambia lo que hay detras. Con un fondo en
   movimiento eso es "cada frame, para siempre", incluso sin hacer
   scroll. En la landing habia 6 .main_btn y 5 circulos asi.
   Sobre un fondo tan oscuro el desenfoque no aportaba nada visible,
   asi que se desactiva y se compensa con algo mas de opacidad. */
.main_btn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(120deg, rgba(199, 177, 134, .62), rgba(199, 177, 134, .34));
}
.header .key li span {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: rgba(196, 168, 118, .55);
}