/*
 * Hartmidia Experiência de Produto.
 * Desenvolvimento de conteúdo interativo para páginas Magazord.
 * Projeto: Black White Sports.
 * Site: https://hartmidia.com
 *
 * Copyright © Hartmidia Digital. Todos os direitos reservados.
 * Este código foi desenvolvido pela Hartmidia Digital e possui autorização temporária de uso
 * para aplicação em páginas, produtos e campanhas digitais da Black White Sports.
 * A cópia, reprodução, redistribuição, adaptação, revenda, extração, reutilização ou duplicação
 * deste código, total ou parcial, sem autorização expressa da Hartmidia Digital e de seu autor,
 * poderá caracterizar violação de direitos autorais e de propriedade intelectual, conforme a legislação aplicável.
 *
 * Arquivo: hm-bws-loader.css
 * Função: Loader global animado e temático para Black White Sports.
 */

html.hm-bws-loader-lock,
body.hm-bws-loader-lock {
  overflow: hidden !important;
}

#hm-bws-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.025) 28%, rgba(0, 0, 0, 0) 58%),
    linear-gradient(135deg, #050505 0%, #111111 44%, #030303 100%);
  color: #fefefe;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition:
    opacity 520ms ease,
    visibility 520ms ease;
}

#hm-bws-loader.hm-bws-loader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hm-bws-loader__scene {
  position: relative;
  width: min(72vw, 390px);
  min-width: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.hm-bws-loader__halo {
  position: absolute;
  width: 128%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 32%, rgba(255, 255, 255, 0) 68%);
  filter: blur(18px);
  opacity: 0.75;
  transform: translateY(-4px);
  animation: hmBwsLoaderHalo 1800ms ease-in-out infinite alternate;
  z-index: 0;
}

.hm-bws-loader__logo-wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 390px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  color: #fefefe;
  transform-origin: center;
  animation:
    hmBwsLoaderLogoIn 720ms cubic-bezier(0.19, 1, 0.22, 1) both,
    hmBwsLoaderLogoBreath 1700ms ease-in-out 720ms infinite alternate;
}

.hm-bws-loader__logo-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  filter:
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.08));
}

.hm-bws-loader__logo-base {
  opacity: 0.84;
}

.hm-bws-loader__logo-shine-sweep {
  opacity: 0.95;
  transform-box: fill-box;
  transform-origin: center;
  animation: hmBwsLogoMaskedShine 1650ms ease-in-out 280ms infinite;
}

.hm-bws-loader__bar {
  position: relative;
  z-index: 4;
  width: min(180px, 46vw);
  height: 2px;
  margin-top: 22px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.hm-bws-loader__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 46%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.92),
    rgba(255, 255, 255, 0.05)
  );
  transform: translateX(-120%);
  animation: hmBwsLoaderBar 1150ms ease-in-out infinite;
}

.hm-bws-loader__particles {
  position: absolute;
  inset: -88px -60px -70px -60px;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.hm-bws-loader__particle {
  position: absolute;
  left: 50%;
  top: 54%;
  display: block;
  width: var(--hm-size, 7px);
  height: var(--hm-size, 7px);
  opacity: 0;
  transform:
    translate(-50%, -50%)
    translate3d(var(--hm-x-start, 0px), var(--hm-y-start, 0px), 0)
    rotate(var(--hm-rotate, 0deg))
    scale(0.6);
  animation:
    hmBwsLoaderParticleFloat var(--hm-duration, 1600ms) ease-out var(--hm-delay, 0ms) both;
  will-change: transform, opacity;
}

/* Tema padrão */

#hm-bws-loader[data-hm-theme="default"] .hm-bws-loader__particle {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
}

#hm-bws-loader[data-hm-theme="default"] .hm-bws-loader__logo-wrap {
  color: #fefefe;
}

/* Tema Dia dos Namorados */

#hm-bws-loader[data-hm-theme="namorados"] {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 64, 129, 0.18) 0%, rgba(255, 64, 129, 0.06) 30%, rgba(0, 0, 0, 0) 62%),
    linear-gradient(135deg, #070304 0%, #120408 46%, #030303 100%);
}

#hm-bws-loader[data-hm-theme="namorados"] .hm-bws-loader__logo-wrap {
  color: #fff7fa;
}

#hm-bws-loader[data-hm-theme="namorados"] .hm-bws-loader__halo {
  background:
    radial-gradient(circle, rgba(255, 64, 129, 0.25) 0%, rgba(255, 255, 255, 0.06) 34%, rgba(255, 64, 129, 0) 70%);
}

#hm-bws-loader[data-hm-theme="namorados"] .hm-bws-loader__particle {
  width: auto;
  height: auto;
  font-size: var(--hm-size, 15px);
  line-height: 1;
  color: rgba(255, 92, 146, 0.92);
  text-shadow:
    0 0 12px rgba(255, 92, 146, 0.36),
    0 4px 10px rgba(0, 0, 0, 0.28);
}

#hm-bws-loader[data-hm-theme="namorados"] .hm-bws-loader__bar::before {
  background: linear-gradient(
    90deg,
    rgba(255, 92, 146, 0.05),
    rgba(255, 224, 235, 0.96),
    rgba(255, 92, 146, 0.05)
  );
}

/* Tema Copa / Esporte */

#hm-bws-loader[data-hm-theme="copa"] {
  background:
    radial-gradient(circle at 44% 36%, rgba(0, 168, 89, 0.18) 0%, rgba(0, 168, 89, 0.04) 34%, rgba(0, 0, 0, 0) 62%),
    radial-gradient(circle at 64% 58%, rgba(255, 220, 0, 0.12) 0%, rgba(255, 220, 0, 0.035) 32%, rgba(0, 0, 0, 0) 58%),
    linear-gradient(135deg, #030705 0%, #06110b 48%, #030303 100%);
}

#hm-bws-loader[data-hm-theme="copa"] .hm-bws-loader__logo-wrap {
  color: #fefefe;
}

#hm-bws-loader[data-hm-theme="copa"] .hm-bws-loader__halo {
  background:
    radial-gradient(circle, rgba(0, 168, 89, 0.18) 0%, rgba(255, 220, 0, 0.07) 34%, rgba(0, 168, 89, 0) 72%);
}

#hm-bws-loader[data-hm-theme="copa"] .hm-bws-loader__particle {
  border-radius: 999px;
  background: var(--hm-color, rgba(255, 220, 0, 0.92));
  box-shadow:
    0 0 12px rgba(255, 220, 0, 0.22),
    0 4px 10px rgba(0, 0, 0, 0.25);
}

#hm-bws-loader[data-hm-theme="copa"] .hm-bws-loader__particle[data-hm-shape="dash"] {
  width: calc(var(--hm-size, 7px) * 2.8);
  height: max(2px, calc(var(--hm-size, 7px) * 0.36));
  border-radius: 999px;
}

#hm-bws-loader[data-hm-theme="copa"] .hm-bws-loader__bar::before {
  background: linear-gradient(
    90deg,
    rgba(0, 168, 89, 0.05),
    rgba(255, 220, 0, 0.98),
    rgba(0, 168, 89, 0.05)
  );
}

/* Responsivo */

@media (max-width: 767px) {
  #hm-bws-loader {
    padding: 20px;
  }

  .hm-bws-loader__scene {
    width: min(68vw, 260px);
    min-width: 170px;
  }

  .hm-bws-loader__bar {
    width: min(150px, 44vw);
    margin-top: 18px;
  }

  .hm-bws-loader__particles {
    inset: -62px -42px -58px -42px;
  }

  .hm-bws-loader__logo-svg {
    filter:
      drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 10px rgba(255, 255, 255, 0.06));
  }
}

/* Acessibilidade: reduzir movimento */

@media (prefers-reduced-motion: reduce) {
  #hm-bws-loader,
  #hm-bws-loader * {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .hm-bws-loader__particles,
  .hm-bws-loader__logo-shine-sweep {
    display: none !important;
  }

  .hm-bws-loader__logo-base {
    opacity: 1;
  }
}

/* Animações */

@keyframes hmBwsLoaderLogoIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.965);
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes hmBwsLoaderLogoBreath {
  0% {
    transform: translateY(0) scale(1);
  }

  100% {
    transform: translateY(-1px) scale(1.015);
  }
}

@keyframes hmBwsLoaderHalo {
  0% {
    opacity: 0.46;
    transform: translateY(-4px) scale(0.94);
  }

  100% {
    opacity: 0.82;
    transform: translateY(-4px) scale(1.04);
  }
}

@keyframes hmBwsLogoMaskedShine {
  0% {
    transform: translateX(-4200px) skewX(-13deg);
    opacity: 0;
  }

  18% {
    opacity: 0.92;
  }

  52% {
    opacity: 1;
  }

  100% {
    transform: translateX(9800px) skewX(-13deg);
    opacity: 0;
  }
}

@keyframes hmBwsLoaderBar {
  0% {
    transform: translateX(-130%);
  }

  100% {
    transform: translateX(240%);
  }
}

@keyframes hmBwsLoaderParticleFloat {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translate3d(var(--hm-x-start, 0px), var(--hm-y-start, 0px), 0)
      rotate(var(--hm-rotate, 0deg))
      scale(0.45);
  }

  16% {
    opacity: var(--hm-opacity, 0.92);
  }

  78% {
    opacity: var(--hm-opacity, 0.92);
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translate3d(var(--hm-x-end, 0px), var(--hm-y-end, -100px), 0)
      rotate(calc(var(--hm-rotate, 0deg) + var(--hm-spin, 90deg)))
      scale(var(--hm-scale-end, 1));
  }
}