/* Contenedor global invisible para la nieve */
#snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* NO interfiere con clics */
  overflow: hidden;
  z-index: 9999;
  /* Siempre arriba */
}

.snowflake {
  position: absolute;
  top: -10px;
  color: white;
  opacity: 0.9;
  user-select: none;
  pointer-events: none;
  animation: fall linear infinite;
}

@keyframes fall {
  to {
    transform: translateY(110vh);
  }
}

/* Esquinas navideñas */
.corner {
  position: fixed;
  width: 110px;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.9;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

.top-left {
  top: 10px;
  left: 10px;
}

.top-right {
  top: 10px;
  right: 10px;
  transform: scaleX(-1);
}

.bottom-left {
  bottom: 10px;
  left: 10px;
}

.bottom-right {
  bottom: 10px;
  right: 10px;
  transform: scaleX(-1);
}



/* Luces */
/* Contenedor general */
#left-christmas-string {
    position: fixed;
    top: 20%; /* ⭐️ más abajo */
    left: 0;
    width: 60px;
    height: calc(100% - 40%);
    z-index: 99999;
    pointer-events: none;
}

/* La cuerdita */
.string-line {
    position: absolute;
    left: 28px;
    top: 0;
    width: 4px;
    height: 100%;
    background: #7b5e2a;
    border-radius: 4px;
    box-shadow: 0 0 6px rgba(80, 60, 30, 0.8);
}

/* Contenedor de luces */
.lights-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px; /* separación entre luces */
}

/* Bombillo */
.bulb {
    width: 22px;
    height: 32px;
    border-radius: 50% 50% 40% 40%;
    background: red;
    position: relative;
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.8);
    animation: glow 1.6s infinite ease-in-out;
}

/* Casquillo del foco */
.bulb::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 4px;
    width: 14px;
    height: 8px;
    background: #555;
    border-radius: 3px;
}

/* Colores alternados */
.bulb:nth-child(4n+1) {
    background: #ff4d4d;
    box-shadow: 0 0 12px rgba(255, 80, 80, 1);
}
.bulb:nth-child(4n+2) {
    background: #4dff4d;
    box-shadow: 0 0 12px rgba(80, 255, 80, 1);
}
.bulb:nth-child(4n+3) {
    background: #4dbbff;
    box-shadow: 0 0 12px rgba(110, 180, 255, 1);
}
.bulb:nth-child(4n+4) {
    background: #ffff4d;
    box-shadow: 0 0 12px rgba(255, 255, 120, 1);
}

/* Animación del brillo */
@keyframes glow {
    0% { opacity: 0.5; transform: translateY(0) scale(0.95); }
    50% { opacity: 1; transform: translateY(2px) scale(1.1); }
    100% { opacity: 0.5; transform: translateY(0) scale(0.95); }
}