/* ============================================================
   css/delmex-index.css
   Estilos propios del index. El resto vive en css/rediseno.css.
============================================================ */


/* ============================================================
   BRILLO QUE RECORRE EL LOGO DE LA PORTADA

   Cómo funciona: #brillo-logo es una segunda copia del mismo PNG,
   encimada exactamente sobre el logo. Se le aplica
   brightness(0) invert(1), que convierte cualquier pixel en blanco
   pero RESPETA el canal alfa, así que queda una silueta blanca con
   la forma exacta de las letras y del mundo. Encima de eso se
   recorta con un degradado en franja que se desplaza: el resultado
   es un brillo que solo puede pintarse sobre el logo.

   Por qué así y no como antes: la versión anterior hacía lo
   contrario —una franja blanca suelta recortada con el PNG como
   máscara—. Safari aplica una máscara de imagen solo cuando esa
   imagen ya está decodificada, así que en los primeros
   milisegundos pintaba la franja SIN recortar: el cuadro blanco
   encima del logo. Aquí la máscara es un degradado CSS (siempre
   disponible al instante) y la forma sale del alfa de la propia
   imagen; si la imagen todavía no está lista, no se ve nada.
============================================================ */

#brillo-logo {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: auto;
   display: block;
   pointer-events: none;
   opacity: 0;

   /* Silueta blanca conservando el recorte del logo */
   filter: brightness(0) invert(1);

   /* Suma luz sobre el logo en vez de taparlo */
   mix-blend-mode: screen;

   /* La franja: núcleo intenso con caída suave a los lados, para que
       el brillo entre y salga en vez de aparecer de golpe. */
   -webkit-mask-image: linear-gradient(100deg,
         transparent 40%,
         rgba(0, 0, 0, .22) 45%,
         rgba(0, 0, 0, .95) 50%,
         rgba(0, 0, 0, .22) 55%,
         transparent 60%);
   mask-image: linear-gradient(100deg,
         transparent 40%,
         rgba(0, 0, 0, .22) 45%,
         rgba(0, 0, 0, .95) 50%,
         rgba(0, 0, 0, .22) 55%,
         transparent 60%);

   /* La máscara mide 2.8 veces el ancho del logo: así la franja cabe
       completa fuera de cuadro en los dos extremos del recorrido. */
   -webkit-mask-size: 280% 100%;
   mask-size: 280% 100%;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;

   /* Posición de reposo: franja fuera de cuadro por la izquierda */
   -webkit-mask-position: 100% 0;
   mask-position: 100% 0;

   will-change: mask-position, opacity;
}

/* La clase la pone el JS del index (dmxEncenderBrillo) cuando la
   imagen ya está decodificada y el logo terminó de entrar. */
#brillo-logo.brilla {
   animation: dmx-brillo-logo 7s cubic-bezier(.45, 0, .25, 1) .15s infinite;
}

/* El recorrido ocupa el primer tercio del ciclo; el resto es la pausa
   entre pasadas, con el brillo apagado. */
@keyframes dmx-brillo-logo {
   0% {
      opacity: 0;
      -webkit-mask-position: 100% 0;
      mask-position: 100% 0;
   }

   6% {
      opacity: .9;
   }

   28% {
      opacity: .9;
   }

   34% {
      opacity: 0;
      -webkit-mask-position: 0% 0;
      mask-position: 0% 0;
   }

   100% {
      opacity: 0;
      -webkit-mask-position: 0% 0;
      mask-position: 0% 0;
   }
}

/* Si el navegador no soporta recorte por máscara, el brillo no se
   muestra nunca: vale más quedarse sin el efecto que arriesgar una
   silueta blanca encima del logo. */
@supports not ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
   #brillo-logo {
      display: none;
   }
}

@media (prefers-reduced-motion: reduce) {
   #brillo-logo {
      display: none;
   }
}