/* ❤️‍🔥 PULSAR BANNER 3D v15.1 - APRIMORAMENTOS DE CIDADE */

/* Melhorias nos prédios */
.building {
  border-left: 1px solid rgba(142, 45, 226, 0.3) !important;
  border-right: 1px solid rgba(142, 45, 226, 0.3) !important;
  border-top: 2px solid rgba(0, 224, 255, 0.6) !important;
  box-shadow: 
    0 0 35px rgba(142, 45, 226, 0.45),
    0 -12px 55px rgba(255, 0, 102, 0.25),
    inset 0 0 55px rgba(0, 0, 0, 0.65) !important;
  animation: buildingPulse 8s infinite ease-in-out !important;
  overflow: hidden;
  filter: brightness(1.05);
}

/* Prédios icônicos com efeito especial */
.building.iconic {
  filter: brightness(1.25) saturate(1.3) !important;
  animation: iconicGlow 4s infinite ease-in-out !important;
}

/* Luz de beacon no topo dos prédios icônicos */
.building.iconic::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 12px;
  background: currentColor;
  animation: beaconLight 3s infinite ease-in-out;
  filter: blur(5px);
  opacity: 0.9;
  box-shadow: 0 0 20px currentColor;
}

/* Empire State Building (dourado) */
.building.empire-state::after {
  background: #FFD700;
  box-shadow: 0 0 30px #FFD700, 0 0 50px #FFD700;
}

/* One World Trade Center (azul ciano) */
.building.one-wtc::after {
  background: #00ffff;
  box-shadow: 0 0 30px #00ffff, 0 0 50px #00ffff;
}

/* Chrysler Building (magenta) */
.building.chrysler::after {
  background: #ff00ff;
  box-shadow: 0 0 30px #ff00ff, 0 0 50px #ff00ff;
}

/* Janelas iluminadas mais realistas */
.building::before {
  inset: 12px !important;
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 16px,
      rgba(255, 255, 100, 0.75) 16px,
      rgba(255, 255, 100, 0.75) 18px,
      transparent 18px,
      transparent 34px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 9px,
      rgba(255, 255, 100, 0.75) 9px,
      rgba(255, 255, 100, 0.75) 11px,
      transparent 11px,
      transparent 20px
    ) !important;
  animation: windowFlicker 7s infinite alternate !important;
  box-shadow: inset 0 0 30px rgba(255, 255, 0, 0.18);
}

/* Animações melhoradas */
@keyframes buildingPulse {
  0%, 100% { 
    filter: brightness(1.05) saturate(1);
    transform: scaleY(1);
  }
  50% { 
    filter: brightness(1.2) saturate(1.25);
    transform: scaleY(1.008);
  }
}

@keyframes iconicGlow {
  0%, 100% { 
    filter: brightness(1.25) saturate(1.3) drop-shadow(0 0 25px currentColor);
  }
  50% { 
    filter: brightness(1.45) saturate(1.4) drop-shadow(0 0 45px currentColor);
  }
}

@keyframes beaconLight {
  0%, 100% { 
    opacity: 0.7;
    filter: blur(5px) brightness(1.2);
    transform: translateX(-50%) scale(1);
  }
  50% { 
    opacity: 1;
    filter: blur(7px) brightness(1.6);
    transform: translateX(-50%) scale(1.1);
  }
}

@keyframes windowFlicker {
  0%, 100% { opacity: 0.75; }
  15% { opacity: 1; }
  30% { opacity: 0.88; }
  50% { opacity: 0.95; }
  70% { opacity: 0.82; }
  85% { opacity: 0.92; }
}

/* Melhorias no coração com mais brilho */
.heart-pulse {
  filter: drop-shadow(0 0 35px rgba(255, 0, 102, 0.9)) 
          drop-shadow(0 0 60px rgba(142, 45, 226, 0.7))
          drop-shadow(0 0 90px rgba(255, 0, 255, 0.5)) !important;
}

/* Efeito de profundidade na skyline */
.skyline-simulation {
  filter: brightness(1.1) contrast(1.05) !important;
}

/* Responsivo - Mobile */
@media (max-width: 768px) {
  .building::before {
    background-image: 
      repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 12px,
        rgba(255, 255, 100, 0.7) 12px,
        rgba(255, 255, 100, 0.7) 14px,
        transparent 14px,
        transparent 26px
      ),
      repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 6px,
        rgba(255, 255, 100, 0.7) 6px,
        rgba(255, 255, 100, 0.7) 8px,
        transparent 8px,
        transparent 14px
      ) !important;
  }
  
  .building.iconic::after {
    height: 8px;
    filter: blur(3px);
  }
}

@media (max-width: 480px) {
  .building::before {
    inset: 8px !important;
    background-image: 
      repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 10px,
        rgba(255, 255, 100, 0.8) 10px,
        rgba(255, 255, 100, 0.8) 11px,
        transparent 11px,
        transparent 21px
      ),
      repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 5px,
        rgba(255, 255, 100, 0.8) 5px,
        rgba(255, 255, 100, 0.8) 6px,
        transparent 6px,
        transparent 11px
      ) !important;
  }
  
  .building.iconic::after {
    height: 6px;
    filter: blur(2px);
  }
}

/* Otimização de performance */
@media (prefers-reduced-motion: reduce) {
  .building,
  .building.iconic,
  .building::before,
  .building::after {
    animation: none !important;
  }
  
  .building {
    filter: brightness(1.1) !important;
  }
  
  .building.iconic {
    filter: brightness(1.3) saturate(1.2) !important;
  }
}