@keyframes lights {
  0% {
    color: hsl(60, 100%, 70%); 
    text-shadow:
      0 0 1em hsla(60, 100%, 50%, 0.6),
      0 0 0.25em hsla(60, 100%, 60%, 0.8),
      -0.5em -0.25em 0.5em hsla(120, 100%, 40%, 0.4),
      0.5em 0.25em 0.5em hsla(200, 100%, 60%, 0.4);
  }

  25% { 
    color: hsl(220, 100%, 75%); 
    text-shadow:
      0 0 1em hsla(220, 100%, 60%, 0.6),
      0 0 0.25em hsla(220, 100%, 80%, 0.8),
      -0.5em -0.25em 0.5em hsla(0, 100%, 50%, 0.3),
      0.5em 0.25em 0.5em hsla(60, 100%, 70%, 0.3);
  }

  50% { 
    color: hsl(0, 0%, 100%); 
    text-shadow:
      0 0 1em hsla(0, 0%, 100%, 0.8),
      0 0 0.25em hsla(60, 100%, 70%, 0.5),
      -0.5em -0.25em 0.5em hsla(120, 100%, 40%, 0.3),
      0.5em 0.25em 0.5em hsla(220, 100%, 60%, 0.3);
  }

  75% {
    color: hsl(120, 100%, 50%); 
    text-shadow:
      0 0 1em hsla(120, 100%, 40%, 0.7),
      0 0 0.25em hsla(120, 100%, 60%, 0.8),
      -0.5em -0.25em 0.5em hsla(0, 100%, 50%, 0.4),
      0.5em 0.25em 0.5em hsla(220, 100%, 70%, 0.4);
  }

  100% {
    color: hsl(0, 100%, 65%);
    text-shadow:
      0 0 1em hsla(0, 100%, 50%, 0.7),
      0 0 0.25em hsla(0, 100%, 70%, 0.8),
      -0.5em -0.25em 0.5em hsla(120, 100%, 40%, 0.3),
      0.5em 0.25em 0.5em hsla(60, 100%, 70%, 0.3);
  }
}
/* Neon Text Effect */  

.neon-text {
  margin: auto;
  font-size: 3.5rem;
  font-weight: 300;
  animation: lights 5s 750ms linear infinite;
}


/* Event Hero MAsking Text */
.masked-text {
  font-size: 5rem;
  font-weight: bold;
  color: transparent;
  background-image: url('https://images.unsplash.com/photo-1498940757830-82f7813bf178?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Y29sb3JmdWx8ZW58MHx8MHx8fDA%3D'); 
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate-background 5s infinite alternate linear;
}

@keyframes animate-background {
    0% {
        background-position: 0 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}



/* ===== Hero background for christmass ===== */
.christmas-hero {
  color: #ffffff;
  background:
    radial-gradient(circle at top, #1b4965 0, #0b1320 55%, #020308 100%);
  position: relative;
  overflow: hidden;
}

/* Optional subtle overlay */
.christmas-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.06) 0, transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.04) 0, transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(255,255,255,0.03) 0, transparent 50%);
  pointer-events: none;
}

/* Keep content above overlay */
.christmas-hero > .container {
  position: relative;
  z-index: 1;
}

/* ===== CSS tree ===== */
.css-tree-wrapper {
  position: relative;
  width: 160px;
  padding-top: 40px;
}

/* Star */
.css-star {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #ffd700;
  font-size: 1.8rem;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
  animation: star-twinkle 1.8s ease-in-out infinite;
}

/* Main tree (tiered triangles using borders) */
.css-tree {
  position: relative;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-bottom: 100px solid #2ecc71;
  filter: drop-shadow(0 0 6px rgba(46, 204, 113, 0.8));
  animation: tree-glow 2.5s ease-in-out infinite;
}

/* Middle tier */
.css-tree::before,
.css-tree::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
}

.css-tree::before {
  top: 18px;
  border-bottom: 90px solid #27ae60;
}

.css-tree::after {
  top: 38px;
  border-bottom: 80px solid #1e8449;
}

/* Trunk */
.css-tree-trunk {
  width: 28px;
  height: 36px;
  margin: -8px auto 0;
  background-color: #8e5b3a;
  border-radius: 4px;
}

/* Animations */
@keyframes tree-glow {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(46, 204, 113, 0.7));
    transform: translateY(0);
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(46, 204, 113, 1));
    transform: translateY(-4px);
  }
}

@keyframes star-twinkle {
  0%, 100% {
    opacity: 0.8;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.12);
  }
}

/* Make tree a bit smaller on very small screens */
@media (max-width: 575.98px) {
  .css-tree-wrapper {
    width: 120px;
  }
}