/**
 * HMB Logo Module CSS
 * Heavy Metal Brothers — efectos oscuros para PNG
 */

/* ═══════════════════════════════════════════════════════════
   SHELL
   ═══════════════════════════════════════════════════════════ */
.hmb-logo-wrap {
  --logo-h:    80px;
  --logo-h-md: 60px;
  --logo-h-sm: 44px;
  --fire:      #CC2200;
  --blood:     #8B0000;
  --ember:     #FF4500;
  --gold:      #DAA520;

  display: inline-flex;
  align-items: center;
  position: relative;
}

.hmb-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  outline: none;
}

/* ─── Imagen principal ─── */
.hmb-logo-img {
  height: var(--logo-h);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
              filter   0.4s ease;
  /* PNG: fondo transparente, se ve el glow */
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8));
}

/* ─── Reflejo inferior ─── */
.hmb-logo-mirror {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  transform: translateY(90%) scaleY(-1);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 100%);
  opacity: 0.35;
}

.hmb-logo-img-mirror {
  height: var(--logo-h);
  width: auto;
  object-fit: contain;
  display: block;
}

/* ─── Anillos decorativos ─── */
.hmb-logo-rings {
  position: absolute;
  inset: -12px;
  pointer-events: none;
  z-index: 0;
}

.hmb-logo-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  opacity: 0;
}

.hmb-logo-ring--1 {
  border-color: rgba(139,0,0,0.4);
  animation: hmbRingPulse 3s ease-in-out infinite;
}

.hmb-logo-ring--2 {
  inset: -8px;
  border-color: rgba(204,34,0,0.2);
  animation: hmbRingPulse 3s 0.6s ease-in-out infinite;
}

.hmb-logo-ring--3 {
  inset: -16px;
  border-color: rgba(184,134,11,0.1);
  animation: hmbRingPulse 3s 1.2s ease-in-out infinite;
}

@keyframes hmbRingPulse {
  0%, 100% { opacity: 0; transform: scale(0.95); }
  50%       { opacity: 1; transform: scale(1.02); }
}

/* ─── Partículas ─── */
.hmb-logo-particles {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* Partícula individual (generada por JS) */
.hmb-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--fire);
  pointer-events: none;
  animation: hmbParticle linear infinite;
  box-shadow: 0 0 4px var(--ember);
}

@keyframes hmbParticle {
  0%   { opacity: 0; transform: translate(0, 0) scale(0); }
  15%  { opacity: 1; transform: translate(var(--tx1), var(--ty1)) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx2), var(--ty2)) scale(0.3); }
}

/* Fallback texto */
.hmb-logo-text-fallback {
  font-family: 'Metal Mania', cursive, sans-serif;
  font-size: 28px;
  color: #EFEFEF;
  text-shadow: 0 0 20px rgba(204,34,0,0.5);
  letter-spacing: 1px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   EFECTOS — activados por clase en .hmb-logo-wrap
   ═══════════════════════════════════════════════════════════ */

/* ── GLOW: resplandor rojo permanente con pulso ── */
.effect-glow .hmb-logo-img {
  filter:
    drop-shadow(0 0 8px  rgba(204,34,0,0.6))
    drop-shadow(0 0 20px rgba(139,0,0,0.4))
    drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  animation: hmbGlowPulse 3s ease-in-out infinite;
}

@keyframes hmbGlowPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 6px  rgba(204,34,0,0.5))
      drop-shadow(0 0 16px rgba(139,0,0,0.3))
      drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  }
  50% {
    filter:
      drop-shadow(0 0 14px rgba(255,69,0,0.8))
      drop-shadow(0 0 30px rgba(204,34,0,0.5))
      drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  }
}

.effect-glow .hmb-logo-link:hover .hmb-logo-img {
  filter:
    drop-shadow(0 0 20px rgba(255,69,0,1))
    drop-shadow(0 0 40px rgba(204,34,0,0.8))
    drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  transform: scale(1.05);
  animation: none;
}

/* ── EMBER: fuego dorado/naranja ── */
.effect-ember .hmb-logo-img {
  filter:
    drop-shadow(0 0 10px rgba(255,69,0,0.7))
    drop-shadow(0 0 25px rgba(218,165,18,0.4))
    drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  animation: hmbEmberPulse 2.5s ease-in-out infinite;
}

@keyframes hmbEmberPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 8px  rgba(255,69,0,0.6))
      drop-shadow(0 0 20px rgba(218,165,18,0.3))
      drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  }
  33% {
    filter:
      drop-shadow(0 0 16px rgba(255,140,0,0.9))
      drop-shadow(0 0 35px rgba(255,69,0,0.5))
      drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  }
  66% {
    filter:
      drop-shadow(0 0 10px rgba(218,165,18,0.7))
      drop-shadow(0 0 22px rgba(255,69,0,0.4))
      drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  }
}

.effect-ember .hmb-logo-link:hover .hmb-logo-img {
  transform: scale(1.06) translateY(-2px);
  filter:
    drop-shadow(0 0 25px rgba(255,140,0,1))
    drop-shadow(0 0 50px rgba(255,69,0,0.7))
    drop-shadow(0 4px 8px rgba(0,0,0,0.9));
}

/* ── BLOOD: resplandor oscuro y amenazante ── */
.effect-blood .hmb-logo-img {
  filter:
    drop-shadow(0 0 6px  rgba(139,0,0,0.9))
    drop-shadow(0 0 20px rgba(100,0,0,0.5))
    drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  animation: hmbBloodPulse 4s ease-in-out infinite;
}

@keyframes hmbBloodPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px  rgba(139,0,0,0.7))
      drop-shadow(0 0 14px rgba(80,0,0,0.4))
      drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  }
  50% {
    filter:
      drop-shadow(0 0 12px rgba(180,0,0,1))
      drop-shadow(0 0 28px rgba(139,0,0,0.6))
      drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  }
}

.effect-blood .hmb-logo-link:hover .hmb-logo-img {
  transform: scale(1.04);
  filter:
    drop-shadow(0 0 20px rgba(204,0,0,1))
    drop-shadow(0 0 45px rgba(139,0,0,0.8))
    drop-shadow(0 2px 4px rgba(0,0,0,0.9));
}

/* ── SILVER: metálico plateado ── */
.effect-silver .hmb-logo-img {
  filter:
    drop-shadow(0 0 6px  rgba(192,192,192,0.5))
    drop-shadow(0 0 18px rgba(128,128,128,0.3))
    drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  animation: hmbSilverPulse 3.5s ease-in-out infinite;
}

@keyframes hmbSilverPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px rgba(160,160,160,0.4))
      drop-shadow(0 0 12px rgba(100,100,100,0.2))
      drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  }
  50% {
    filter:
      drop-shadow(0 0 10px rgba(220,220,220,0.8))
      drop-shadow(0 0 25px rgba(180,180,180,0.4))
      drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  }
}

.effect-silver .hmb-logo-link:hover .hmb-logo-img {
  transform: scale(1.05);
  filter:
    drop-shadow(0 0 18px rgba(255,255,255,0.9))
    drop-shadow(0 0 40px rgba(200,200,200,0.5))
    drop-shadow(0 2px 4px rgba(0,0,0,0.9));
}

/* ── GOLD: dorado épico ── */
.effect-gold .hmb-logo-img {
  filter:
    drop-shadow(0 0 8px  rgba(218,165,18,0.7))
    drop-shadow(0 0 22px rgba(184,134,11,0.4))
    drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  animation: hmbGoldPulse 3s ease-in-out infinite;
}

@keyframes hmbGoldPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 6px  rgba(218,165,18,0.6))
      drop-shadow(0 0 18px rgba(184,134,11,0.3))
      drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  }
  50% {
    filter:
      drop-shadow(0 0 14px rgba(255,215,0,0.9))
      drop-shadow(0 0 32px rgba(218,165,18,0.5))
      drop-shadow(0 2px 4px rgba(0,0,0,0.9));
  }
}

.effect-gold .hmb-logo-link:hover .hmb-logo-img {
  transform: scale(1.06) translateY(-2px);
  filter:
    drop-shadow(0 0 22px rgba(255,215,0,1))
    drop-shadow(0 0 45px rgba(218,165,18,0.7))
    drop-shadow(0 4px 8px rgba(0,0,0,0.9));
}

/* ── NONE: sin efecto ── */
.effect-none .hmb-logo-img {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
}

.effect-none .hmb-logo-link:hover .hmb-logo-img {
  transform: scale(1.03);
}

/* ── Efecto hover compartido ── */
.hmb-logo-link:hover .hmb-logo-img {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
              filter   0.3s ease;
}

/* ── Hover: activa anillos ── */
.hmb-logo-link:hover .hmb-logo-ring--1 { animation-duration: 1.2s; }
.hmb-logo-link:hover .hmb-logo-ring--2 { animation-duration: 1.5s; }
.hmb-logo-link:hover .hmb-logo-ring--3 { animation-duration: 1.8s; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hmb-logo-img       { height: var(--logo-h-md); }
  .hmb-logo-img-mirror{ height: var(--logo-h-md); }
}

@media (max-width: 767px) {
  .hmb-logo-img        { height: var(--logo-h-sm); }
  .hmb-logo-img-mirror { height: var(--logo-h-sm); }
  .hmb-logo-mirror     { display: none; }
  .hmb-logo-rings      { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   ACCESIBILIDAD
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hmb-logo-img,
  .hmb-logo-ring { animation: none !important; }
  .hmb-logo-link:hover .hmb-logo-img { transform: none; }
}

.hmb-logo-link:focus-visible {
  outline: 2px solid #CC2200;
  outline-offset: 6px;
  border-radius: 4px;
}