/* --- Snow Layer --- */
#festive-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 9997; }
.festive-flake { position: absolute; top: -40px; color: #fff; opacity: 0.85; animation: festiveFall linear infinite; text-shadow: 0 0 6px rgba(255,255,255,0.6); will-change: transform; }
@keyframes festiveFall { 0% { transform: translate3d(0,-40px,0) rotate(0deg); } 100% { transform: translate3d(20px,105vh,0) rotate(360deg); } }

/* --- Golden Rope --- */
#festive-rope {
  position: fixed; top: -10px; right: 20px; z-index: 99999; /* Increased z-index to stay above nav */
  width: 24px; height: 110px; cursor: grab;
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-origin: top center;
}
#festive-rope:active { cursor: grabbing; transform: scaleY(1.1); }
#festive-rope.pulled { animation: ropePull 0.4s ease; }
@keyframes ropePull { 0% { transform: scaleY(1); } 50% { transform: scaleY(1.2); } 100% { transform: scaleY(1); } }

.rope-line { 
  width: 8px; height: 90px; 
  background: repeating-linear-gradient(45deg, #ffd700, #ffd700 10px, #b8860b 10px, #b8860b 20px); 
  margin: 0 auto; border-radius: 4px; 
  box-shadow: inset -2px 0 3px rgba(0,0,0,0.3), 0 0 10px rgba(255,215,0,0.5); 
}
.rope-loop { 
  width: 28px; height: 28px; 
  border: 6px solid #ffd700; border-radius: 50%; 
  margin: -6px auto 0; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.3), 0 0 10px #ffd700; 
}

/* --- Cooldown Message --- */
#festive-message {
  position: fixed; top: 120px; right: 30px; z-index: 100000;
  background: rgba(0,0,0,0.85); color: #ffd700; padding: 8px 16px;
  border-radius: 8px; font-size: 14px; font-weight: bold;
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
#festive-message.show { opacity: 1; }

/* --- Santa --- */
#festive-santa {
  position: fixed; bottom: -150px; right: 20px; z-index: 99999;
  font-size: 80px; transition: bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
#festive-santa.show { bottom: 80px; }

#festive-santa-bubble {
  position: fixed; bottom: 170px; right: 110px; z-index: 99999;
  background: white; padding: 12px 18px; border-radius: 20px;
  font-weight: bold; color: #d42426; font-size: 14px; max-width: 200px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  opacity: 0; transition: opacity 0.4s; pointer-events: none;
  border: 2px solid #2e7d32;
}
#festive-santa-bubble.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .festive-flake { display: none; }
}
/* Move rope to the left on mobile so it doesn't block the menu */
@media (max-width: 991px) {
    #festive-rope {
        right: auto;
        left: 15px;
        top: 60px; 
    }
}