@import url("https://fonts.googleapis.com/css2?family=Audiowide&family=Iceland&family=Monoton&family=Pacifico&family=Press+Start+2P&family=Vampiro+One&display=swap");

.neonTextLayer {
  position: relative;
  z-index: 35;
  pointer-events: none;
}

.neonTextContainer {
  padding: clamp(1rem, 2.5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 2.6vw, 4rem);
  align-items: center;
}

/* center content vertically inside the neon layer and keep GPU-friendly layout */
.neonTextLayer { display:flex; align-items:center; justify-content:center; min-height: 100svh; }
.neonTextContainer { justify-content: center; height: 100%; }

/* Force absolute centering inside the vaporwave section so text is
   horizontally and vertically centered regardless of document flow. */
#nightlifeVaporwave > .neonTextLayer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  pointer-events: none;
}

#nightlifeVaporwave > .neonTextLayer .neonTextContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Limit the neon container to 90% of the viewport width so each
   design variant occupies that horizontal space. Keep centered. */
#nightlifeVaporwave > .neonTextLayer .neonTextContainer {
  width: 80vw;
  max-width: 80vw;
  box-sizing: border-box;
  padding: 5vw;
}

.neonTextLink {
    font-size: clamp(1rem, 2vw, 2rem); 
  text-align: center;

  margin: 0;
  line-height: 1;
  text-decoration: none;
  color: #fff;
  pointer-events: auto;
  display: block;
  width: 80%;
  box-sizing: border-box;
  white-space: normal; /* allow wrapping so long headlines don't overflow */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* GPU friendly hints */
.neonTextLink {
  will-change: opacity, transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

html[data-device-tier='low'] #nightlifeVaporwave .neonTextLink,
html[data-device-tier='low'] #nightlifeVaporwave .neonTextLink * {
  animation: none !important;
  transition: none !important;
  filter: none !important;
  text-shadow: 0 0 1px rgba(255,255,255,0.35) !important;
}

.neonTextLinkOne {
    text-align: center;
  font-family: Monoton, cursive;
  /* disable continuous text-shadow animation to reduce paint cost */
  -webkit-animation: none !important;
  animation: none !important;
  text-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5), 0 0 15px rgba(255,255,255,0.5), 0 0 20px rgba(var(--neon-color-rgb,255,17,119),0.5), 0 0 35px rgba(var(--neon-color-rgb,255,17,119),0.5), 0 0 40px rgba(var(--neon-color-rgb,255,17,119),0.5), 0 0 50px rgba(var(--neon-color-rgb,255,17,119),0.5), 0 0 60px rgba(var(--neon-color-rgb,255,17,119),0.5);
}

.neonTextLinkTwo {
    text-align: center;
  font-family: Iceland, cursive;
  -webkit-animation: none !important;
  animation: none !important;
  text-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5), 0 0 15px rgba(255,255,255,0.5), 0 0 20px rgba(var(--neon-color-rgb,34,141,255),0.5), 0 0 28px rgba(var(--neon-color-rgb,34,141,255),0.5), 0 0 32px rgba(var(--neon-color-rgb,34,141,255),0.5), 0 0 40px rgba(var(--neon-color-rgb,34,141,255),0.5), 0 0 30px rgba(var(--neon-color-rgb,34,141,255),0.5);
}

.neonTextLinkThree {
    text-align: center;
  font-family: Pacifico, cursive;
  -webkit-animation: none !important;
  animation: none !important;
  /* Reduced glow for neonTextNeon3 */
  text-shadow: 0 0 4px rgba(255,255,255,0.5), 0 0 8px rgba(255,255,255,0.5), 0 0 12px rgba(255,255,255,0.5), 0 0 16px rgba(var(--neon-color-rgb,255,221,27),0.5), 0 0 28px rgba(var(--neon-color-rgb,255,221,27),0.5), 0 0 32px rgba(var(--neon-color-rgb,255,221,27),0.5), 0 0 36px rgba(var(--neon-color-rgb,255,221,27),0.5), 0 0 40px rgba(var(--neon-color-rgb,255,221,27),0.5);
}

.neonTextLinkFour {
    text-align: center;
  font-family: "Press Start 2P", cursive;
  -webkit-animation: none !important;
  animation: none !important;
  text-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5), 0 0 15px rgba(255,255,255,0.5), 0 0 20px rgba(var(--neon-color-rgb,255,41,65),0.5), 0 0 28px rgba(var(--neon-color-rgb,255,41,65),0.5), 0 0 35px rgba(var(--neon-color-rgb,255,41,65),0.5), 0 0 44px rgba(var(--neon-color-rgb,255,41,65),0.5), 0 0 53px rgba(var(--neon-color-rgb,255,41,65),0.5);
}

.neonTextLinkFive {
    text-align: center;
  font-family: Audiowide, cursive;
  -webkit-animation: none !important;
  animation: none !important;
  text-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5), 0 0 15px rgba(255,255,255,0.5), 0 0 20px rgba(var(--neon-color-rgb,255,153,0),0.5), 0 0 28px rgba(var(--neon-color-rgb,255,153,0),0.5), 0 0 32px rgba(var(--neon-color-rgb,255,153,0),0.5), 0 0 40px rgba(var(--neon-color-rgb,255,153,0),0.5), 0 0 30px rgba(var(--neon-color-rgb,255,153,0),0.5);
}

.neonTextLinkSix {
    text-align: center;
  font-family: "Vampiro One", cursive;
  -webkit-animation: none !important;
  animation: none !important;
  text-shadow: 0 0 5px rgba(255,255,255,0.5), 0 0 10px rgba(255,255,255,0.5), 0 0 15px rgba(255,255,255,0.5), 0 0 20px rgba(var(--neon-color-rgb,255,0,222),0.5), 0 0 28px rgba(var(--neon-color-rgb,255,0,222),0.5), 0 0 32px rgba(var(--neon-color-rgb,255,0,222),0.5), 0 0 40px rgba(var(--neon-color-rgb,255,0,222),0.5), 0 0 30px rgba(var(--neon-color-rgb,255,0,222),0.5);
}

@-webkit-keyframes neonTextNeon1 {
  from {
    /* reduced by 20% */
    text-shadow: 0 0 8px rgba(255,255,255,0.5), 0 0 16px rgba(255,255,255,0.5), 0 0 24px rgba(255,255,255,0.5), 0 0 32px rgba(var(--neon-color-rgb,255,17,119),0.5),
      0 0 40px rgba(var(--neon-color-rgb,255,17,119),0.5), 0 0 40px rgba(var(--neon-color-rgb,255,17,119),0.5), 0 0 40px rgba(var(--neon-color-rgb,255,17,119),0.5), 0 0 40px rgba(var(--neon-color-rgb,255,17,119),0.5);
  }
  to {
    /* reduced by 20% */
    text-shadow: 0 0 4px rgba(255,255,255,0.5), 0 0 8px rgba(255,255,255,0.5), 0 0 12px rgba(255,255,255,0.5), 0 0 16px rgba(var(--neon-color-rgb,255,17,119),0.5),
      0 0 28px rgba(var(--neon-color-rgb,255,17,119),0.5), 0 0 32px rgba(var(--neon-color-rgb,255,17,119),0.5), 0 0 40px rgba(var(--neon-color-rgb,255,17,119),0.5), 0 0 40px rgba(var(--neon-color-rgb,255,17,119),0.5);
  }
}

@keyframes neonTextNeon1 {
  from {
    /* reduced by 20% */
    text-shadow: 0 0 8px rgba(255,255,255,0.5), 0 0 16px rgba(255,255,255,0.5), 0 0 24px rgba(255,255,255,0.5), 0 0 32px rgba(var(--neon-color-rgb,255,17,119),0.5),
      0 0 56px rgba(var(--neon-color-rgb,255,17,119),0.5), 0 0 64px rgba(var(--neon-color-rgb,255,17,119),0.5), 0 0 80px rgba(var(--neon-color-rgb,255,17,119),0.5), 0 0 120px rgba(var(--neon-color-rgb,255,17,119),0.5);
  }
  to {
    /* reduced by 20% */
    text-shadow: 0 0 4px rgba(255,255,255,0.5), 0 0 8px rgba(255,255,255,0.5), 0 0 12px rgba(255,255,255,0.5), 0 0 16px rgba(var(--neon-color-rgb,255,17,119),0.5),
      0 0 28px rgba(var(--neon-color-rgb,255,17,119),0.5), 0 0 32px rgba(var(--neon-color-rgb,255,17,119),0.5), 0 0 40px rgba(var(--neon-color-rgb,255,17,119),0.5), 0 0 60px rgba(var(--neon-color-rgb,255,17,119),0.5);
  }
}

@-webkit-keyframes neonTextNeon2 {
  from{
    /* reduced by 60% */
    text-shadow: 0 0 4px rgba(255,255,255,0.5), 0 0 8px rgba(255,255,255,0.5), 0 0 12px rgba(255,255,255,0.5), 0 0 16px rgba(var(--neon-color-rgb,34,141,255),0.5),
      0 0 28px rgba(var(--neon-color-rgb,34,141,255),0.5), 0 0 32px rgba(var(--neon-color-rgb,34,141,255),0.5), 0 0 40px rgba(var(--neon-color-rgb,34,141,255),0.5), 0 0 40px rgba(var(--neon-color-rgb,34,141,255),0.5);
  }
  to {
    /* reduced by 60% */
    text-shadow: 0 0 2px rgba(255,255,255,0.5), 0 0 4px rgba(255,255,255,0.5), 0 0 6px rgba(255,255,255,0.5), 0 0 8px rgba(var(--neon-color-rgb,34,141,255),0.5),
      0 0 14px rgba(var(--neon-color-rgb,34,141,255),0.5), 0 0 16px rgba(var(--neon-color-rgb,34,141,255),0.5), 0 0 20px rgba(var(--neon-color-rgb,34,141,255),0.5), 0 0 30px rgba(var(--neon-color-rgb,34,141,255),0.5);
  }
}

@keyframes neonTextNeon2 {
  from {
    /* reduced by 60% */
    text-shadow: 0 0 4px rgba(255,255,255,0.5), 0 0 8px rgba(255,255,255,0.5), 0 0 12px rgba(255,255,255,0.5), 0 0 16px rgba(var(--neon-color-rgb,34,141,255),0.5),
      0 0 28px rgba(var(--neon-color-rgb,34,141,255),0.5), 0 0 32px rgba(var(--neon-color-rgb,34,141,255),0.5), 0 0 40px rgba(var(--neon-color-rgb,34,141,255),0.5), 0 0 60px rgba(var(--neon-color-rgb,34,141,255),0.5);
  }
  to {
    /* reduced by 60% */
    text-shadow: 0 0 2px rgba(255,255,255,0.5), 0 0 4px rgba(255,255,255,0.5), 0 0 6px rgba(255,255,255,0.5), 0 0 8px rgba(var(--neon-color-rgb,34,141,255),0.5),
      0 0 14px rgba(var(--neon-color-rgb,34,141,255),0.5), 0 0 16px rgba(var(--neon-color-rgb,34,141,255),0.5), 0 0 20px rgba(var(--neon-color-rgb,34,141,255),0.5), 0 0 30px rgba(var(--neon-color-rgb,34,141,255),0.5);
  }
}

@-webkit-keyframes neonTextNeon3 {
  from {
    /* reduced by 40% */
    text-shadow: 0 0 4px rgba(255,255,255,0.5), 0 0 7px rgba(255,255,255,0.5), 0 0 11px rgba(255,255,255,0.5), 0 0 14px rgba(var(--neon-color-rgb,255,221,27),0.5),
      0 0 25px rgba(var(--neon-color-rgb,255,221,27),0.5), 0 0 29px rgba(var(--neon-color-rgb,255,221,27),0.5), 0 0 36px rgba(var(--neon-color-rgb,255,221,27),0.5), 0 0 40px rgba(var(--neon-color-rgb,255,221,27),0.5);
  }
  to {
    /* reduced by 40% */
    text-shadow: 0 0 2px rgba(255,255,255,0.5), 0 0 5px rgba(255,255,255,0.5), 0 0 7px rgba(255,255,255,0.5), 0 0 10px rgba(var(--neon-color-rgb,255,221,27),0.5),
      0 0 17px rgba(var(--neon-color-rgb,255,221,27),0.5), 0 0 19px rgba(var(--neon-color-rgb,255,221,27),0.5), 0 0 22px rgba(var(--neon-color-rgb,255,221,27),0.5), 0 0 24px rgba(var(--neon-color-rgb,255,221,27),0.5);
  }
}

@keyframes neonTextNeon3 {
  from {
    /* reduced by 40% */
    text-shadow: 0 0 4px rgba(255,255,255,0.5), 0 0 7px rgba(255,255,255,0.5), 0 0 11px rgba(255,255,255,0.5), 0 0 14px rgba(var(--neon-color-rgb,255,221,27),0.5),
      0 0 25px rgba(var(--neon-color-rgb,255,221,27),0.5), 0 0 29px rgba(var(--neon-color-rgb,255,221,27),0.5), 0 0 36px rgba(var(--neon-color-rgb,255,221,27),0.5), 0 0 54px rgba(var(--neon-color-rgb,255,221,27),0.5);
  }
  to {
    /* reduced by 40% */
    text-shadow: 0 0 2px rgba(255,255,255,0.5), 0 0 5px rgba(255,255,255,0.5), 0 0 7px rgba(255,255,255,0.5), 0 0 10px rgba(var(--neon-color-rgb,255,221,27),0.5),
      0 0 17px rgba(var(--neon-color-rgb,255,221,27),0.5), 0 0 19px rgba(var(--neon-color-rgb,255,221,27),0.5), 0 0 22px rgba(var(--neon-color-rgb,255,221,27),0.5), 0 0 24px rgba(var(--neon-color-rgb,255,221,27),0.5);
  }
}

@-webkit-keyframes neonTextNeon4 {
  from {
    /* reduced by 30% */
    text-shadow: 0 0 7px rgba(255,255,255,0.5), 0 0 14px rgba(255,255,255,0.5), 0 0 21px rgba(255,255,255,0.5), 0 0 28px rgba(var(--neon-color-rgb,255,41,65),0.5),
      0 0 40px rgba(var(--neon-color-rgb,255,41,65),0.5), 0 0 40px rgba(var(--neon-color-rgb,255,41,65),0.5), 0 0 40px rgba(var(--neon-color-rgb,255,41,65),0.5), 0 0 40px rgba(var(--neon-color-rgb,255,41,65),0.5);
  }
  to {
    /* reduced by 30% */
    text-shadow: 0 0 4px rgba(255,255,255,0.5), 0 0 7px rgba(255,255,255,0.5), 0 0 11px rgba(255,255,255,0.5), 0 0 14px rgba(var(--neon-color-rgb,255,41,65),0.5),
      0 0 25px rgba(var(--neon-color-rgb,255,41,65),0.5), 0 0 28px rgba(var(--neon-color-rgb,255,41,65),0.5), 0 0 35px rgba(var(--neon-color-rgb,255,41,65),0.5), 0 0 40px rgba(var(--neon-color-rgb,255,41,65),0.5);
  }
}

@keyframes neonTextNeon4 {
  from {
    /* reduced by 30% */
    text-shadow: 0 0 7px rgba(255,255,255,0.5), 0 0 14px rgba(255,255,255,0.5), 0 0 21px rgba(255,255,255,0.5), 0 0 28px rgba(var(--neon-color-rgb,255,41,65),0.5),
      0 0 49px rgba(var(--neon-color-rgb,255,41,65),0.5), 0 0 56px rgba(var(--neon-color-rgb,255,41,65),0.5), 0 0 70px rgba(var(--neon-color-rgb,255,41,65),0.5), 0 0 105px rgba(var(--neon-color-rgb,255,41,65),0.5);
  }
  to {
    /* reduced by 30% */
    text-shadow: 0 0 4px rgba(255,255,255,0.5), 0 0 7px rgba(255,255,255,0.5), 0 0 11px rgba(255,255,255,0.5), 0 0 14px rgba(var(--neon-color-rgb,255,41,65),0.5),
      0 0 25px rgba(var(--neon-color-rgb,255,41,65),0.5), 0 0 28px rgba(var(--neon-color-rgb,255,41,65),0.5), 0 0 35px rgba(var(--neon-color-rgb,255,41,65),0.5), 0 0 53px rgba(var(--neon-color-rgb,255,41,65),0.5);
  }
}

/* neonTextNeon5 and neonTextNeon6 keyframes removed to limit extreme glow sizes */

@media (max-width: 650px) {
  .neonTextLink {
    font-size: 3.5em;
  }
}

/* Limit the second line's container width so it doesn't expand too wide */
.neonTextLink .neon-line--second {
  display: inline-block;
  max-width: 60vw;
  white-space: normal;
  text-align: center;
  box-sizing: border-box;
}

/* Visibility + vaporwave-like crossfade between two texts */
.neonTextLink {
  opacity: 0;
  transform: scale(0.98);
  filter: blur(0.4px);
  transition: opacity 1s ease-in-out, transform 1s cubic-bezier(.2,.8,.2,1), filter 1s ease-in-out;
  pointer-events: none;
}

.neonTextLink.is-visible {
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
  pointer-events: auto;
}

/* Ensure linkTwo appears blue (text-shadow defined) and linkFour red by keyframes above */
.neonTextLinkTwo { color: #dff0ff; }
.neonTextLinkFour { color: #ffd6d6; }

/* Dev helper: add this class to <body> during design to reveal
   all static anchors inside #neonTextContainer. */
body.show-neon-all .neonTextLayer { pointer-events: auto !important; }
body.show-neon-all #neonTextContainer .neonTextLink {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0) !important;
  pointer-events: auto !important;
}



/* Two-line helper for the stacked headline. Each span occupies a full
   line and is centered. This keeps the two-word construct stable and
   within the 80vw container. */
.neonTextLink .neon-line {
  display: inline-block; /* allow the line boxes to be centered inside the wrap */
  width: auto;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap; /* keep each span on a single line so we can scale it to fit */
  margin: 0 auto; /* center the block within the .neon-text-wrap */
}
.neonTextLink .neon-text-wrap {
  display: inline-block;
  text-align: center;
  transform-origin: center center;
  transform: scale(3.57143);
}
.neonTextLink .neon-line--first { display:block; }
.neonTextLink .neon-line--second { display:block; }

/* Small spacing tweak between the two lines */
.neonTextLink .neon-line { line-height: 0.95; 

  color: rgba((--neon-color-rgba),1);

}

/* Variant-specific line-height rules — selector must match the actual
  markup: the anchor has both classes (neonTextLink and neonTextLinkX). */
.neonTextLink.neonTextLinkOne .neon-line  { line-height: 0.95; }
.neonTextLink.neonTextLinkTwo .neon-line  { line-height: 0.75; }
.neonTextLink.neonTextLinkThree .neon-line{ line-height: 1.10; }
.neonTextLink.neonTextLinkFour .neon-line { line-height: 1.10; }