/* ===============================================================
 * Project Name: Tagget
 * File Name: loaders.css
 * File Description: Estilo e animações de carregamento (Loader Screen, Transições e Keyframes)
 * Version: 1.0.0
 * Author: Wendel Vieira
 * Last Update: Junho 2025
 * =============================================================== */

/* ------------------------------------------------
 * Table of Contents
 * ------------------------------------------------
 *  1. LOADER CONTAINER
 *  2. ANIMAÇÕES DE ENTRADA – LOADER
 *  3. EFEITO DARKSCREEN – BLOCO VERTICAL
 *  4. CONTEÚDO DO LOADER (Logo e Container)
 *  5. TRANSIÇÕES DE OPACIDADE (FadeIn / FadeOut)
 *  6. KEYFRAMES – BLOCO VERTICAL (blockMove)
 *  7. KEYFRAMES – ITENS OPACITY (itemsOpacity)
 *  8. KEYFRAMES – FADE IN
 *  9. KEYFRAMES – FADE OUT
 * ------------------------------------------------
 * Table of Contents End
 * ------------------------------------------------ */

/* ===================================================================================
 * 1. LOADER CONTAINER – START
 * =================================================================================== */
.loader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background-color: transparent;
  opacity: 1;
  visibility: visible;
  transition: all 0.5s ease-in-out;
}

.loader.loaded {
  opacity: 0;
  visibility: hidden;
}
/* ===================================================================================
 * 1. LOADER CONTAINER – END
 * =================================================================================== */

/* ===================================================================================
 * 2. ANIMAÇÕES DE ENTRADA – LOADER – START
 * =================================================================================== */
.loader.is-animated .loader__darkscreen {
  animation: 1s 0.5s ease-in-out 1 both blockMove;
}

.loader.is-animated .loader__container {
  animation: 1s 0.5s ease-in-out 1 both itemsOpacity;
}
/* ===================================================================================
 * 2. ANIMAÇÕES DE ENTRADA – LOADER – END
 * =================================================================================== */

/* ===================================================================================
 * 3. EFEITO DARKSCREEN – BLOCO VERTICAL – START
 * =================================================================================== */
.loader__darkscreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(12, 12, 12, 0);
  transform: translateY(102%);
}
/* ===================================================================================
 * 3. EFEITO DARKSCREEN – BLOCO VERTICAL – END
 * =================================================================================== */

/* ===================================================================================
 * 4. CONTEÚDO DO LOADER (Logo e Container) – START
 * =================================================================================== */
.loader__container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(12, 12, 12, 0.7);
}

.loader__container .loader-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.loader__container .loader-content .loader-logo {
  width: 160px;
}

.loader__container .loader-content .loader-logo img {
  display: block;
  width: 100%;
  height: auto;
}
/* ===================================================================================
 * 4. CONTEÚDO DO LOADER (Logo e Container) – END
 * =================================================================================== */

/* ===================================================================================
 * 5. TRANSIÇÕES DE OPACIDADE (FadeIn / FadeOut) – START
 * =================================================================================== */
.fadeIn {
  animation: fadeIn 0.5s 1 both;
}

.fadeOut {
  animation: fadeOut 0.5s 1 both;
}
/* ===================================================================================
 * 5. TRANSIÇÕES DE OPACIDADE (FadeIn / FadeOut) – END
 * =================================================================================== */

/* ===================================================================================
 * 6. KEYFRAMES – BLOCO VERTICAL (blockMove) – START
 * =================================================================================== */
@keyframes blockMove {
  0% {
    transform: translateY(102%);
  }
  35%,
  55% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-102%);
  }
}
/* ===================================================================================
 * 6. KEYFRAMES – BLOCO VERTICAL (blockMove) – END
 * =================================================================================== */

/* ===================================================================================
 * 7. KEYFRAMES – ITENS OPACITY (itemsOpacity) – START
 * =================================================================================== */
@keyframes itemsOpacity {
  0%,
  35% {
    opacity: 1;
  }
  60%,
  100% {
    opacity: 0;
  }
}
/* ===================================================================================
 * 7. KEYFRAMES – ITENS OPACITY (itemsOpacity) – END
 * =================================================================================== */

/* ===================================================================================
 * 8. KEYFRAMES – FADE IN – START
 * =================================================================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ===================================================================================
 * 8. KEYFRAMES – FADE IN – END
 * =================================================================================== */

/* ===================================================================================
 * 9. KEYFRAMES – FADE OUT – START
 * =================================================================================== */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* ===================================================================================
 * 9. KEYFRAMES – FADE OUT – END
 * =================================================================================== */