@import url("../../elastic/styles/styles.min.css");

/* ============================================================
 * Skin Bienal de Moda (filha do elastic)
 * Novelo vivo: gira (22s) e e tingido cor a cor, com a tinta
 * caminhando pelo fio (gradiente varrendo a mascara do novelo).
 * Paleta camaleao do site: vermelho-fio, ouro, verde-mata, azul-tinta.
 * ============================================================ */

/* Login: o png preto vira MASCARA; o fundo gradiente e o "fio tingido".
 * Truque de image-replacement: width 0 + padding esconde os pixels do
 * <img> e deixa so background+mask aparecerem. */
#logo {
  width: 0 !important;
  padding-left: 120px;
  height: 120px;
  box-sizing: border-box;
  -webkit-mask: url("../images/novelo-preto.png") center / contain no-repeat;
  mask: url("../images/novelo-preto.png") center / contain no-repeat;
  background-image: linear-gradient(115deg,
    #e8442e 0%, #e8442e 22%,
    #c9a96a 28%, #c9a96a 47%,
    #3d7a63 53%, #3d7a63 72%,
    #3a4ea8 78%, #3a4ea8 97%,
    #e8442e 100%);
  background-size: 1200% 1200%;
  animation:
    bm-novelo-gira 22s linear infinite,
    bm-fio-tinge 90s linear infinite;
}
@keyframes bm-novelo-gira { to { transform: rotate(360deg); } }
/* a tinta anda: cada cor leva ~20s atravessando o novelo */
@keyframes bm-fio-tinge {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* Barra lateral (novelo branco, fundo escuro): gira + ciclo de cor suave */
a.button-logo img, .task-menu .logo img, #taskmenu .special-buttons .logo img {
  animation:
    bm-novelo-gira 22s linear infinite,
    bm-chameleon-claro 120s linear infinite;
}
@keyframes bm-chameleon-claro {
  0%, 100% { filter: brightness(0.8) sepia(1) saturate(5) hue-rotate(320deg) brightness(1.5); }
  25% { filter: brightness(0.8) sepia(1) saturate(5) hue-rotate(20deg) brightness(1.5); }
  50% { filter: brightness(0.8) sepia(1) saturate(5) hue-rotate(110deg) brightness(1.5); }
  75% { filter: brightness(0.8) sepia(1) saturate(5) hue-rotate(200deg) brightness(1.5); }
}

/* Rodape do login */
#login-footer { visibility: hidden; position: relative; }
#login-footer::after {
  content: "E-mail da Bienal de Moda";
  visibility: visible;
  position: absolute;
  left: 0; right: 0; top: 0;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  #logo, a.button-logo img, .task-menu .logo img { animation: none; }
}