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

/* ============================================================
   Centering + sizing model
   neonTextLayer (grid, place-items:center)
     -> neonTextContainer (centered box, capped width)
       -> neonTextLink
         -> neon-text-wrap (flex column, centers the two lines as one block)
           -> neon-line x2 (block, nowrap, margin-inline:auto)

   Font-size comes from ONE source: nl-neonText.js sets --neon-fit-size on
   .neon-text-wrap to the largest size at which the widest line still fits
   the container (measured via canvas text metrics, real layout geometry).
   No transform:scale() is used for sizing.
   ============================================================ */

.neonTextLayer {
  position: relative;
  z-index: 35;
  pointer-events: none;
  display: grid;
  place-items: center;
  min-height: 100svh;
  box-sizing: border-box;
}

/* 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: grid;
  place-items: center;
  z-index: 60;
  pointer-events: none;
  box-sizing: border-box;
}

.neonTextContainer {
  display: grid;
  /* grid-template-columns: minmax(0, 1fr) — a bare "1fr" track still has an
     implicit "auto" minimum, and grid's auto-min for a grid item resolves to
     that item's min-content size. Because .neon-line uses white-space:nowrap
     several levels down, its min-content width equals its full unbroken
     text width, which propagates back up: the "1fr" track (and therefore
     .neonTextLink, whose width:100% resolves against it) grows to fit the
     widest unbreakable line instead of the container's actual size. The
     explicit 0 minimum removes that content-based floor so the track — and
     everything stretched to it — is sized purely by the container. */
  grid-template-columns: minmax(0, 1fr);
  /* justify-items must stay "stretch" (the grid default) so .neonTextLink's
     width:100% actually spans the container's full inline size. With
     place-items:center here, .neonTextLink would shrink to its own content
     width instead — and since that content is two lines of differing
     length, the link (and therefore the wrap centered inside it) would
     size itself to whichever line happened to be widest, throwing the
     other line's centerX off by half the width difference between them. */
  align-items: center;
  justify-items: stretch;
  box-sizing: border-box;
}

/* Limit the neon container to 80% of the viewport width so each
   design variant occupies that horizontal space, with a hard safety
   ceiling of (100vw - 32px) so it can never exceed the actual viewport
   even where 80vw alone might (e.g. a scrollbar or browser zoom rounding
   pushing 80vw + its own padding past the edge). Keep centered. */
#nightlifeVaporwave > .neonTextLayer .neonTextContainer {
  width: min(80vw, calc(100vw - 32px));
  max-width: min(80vw, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 5vw;
}

.neonTextLink {
  text-align: center;
  margin: 0;
  line-height: 1;
  text-decoration: none;
  color: #fff;
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 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 */

/* Was: @media (max-width: 650px) { .neonTextLink { font-size: 3.5em; } } — an em-based
   override that resolved against .neonTextLink's *inherited* parent font-size, not its own
   clamp() rule above, and had no relationship to the actual rendered headline size (that's
   .neon-line's own font-size, now an explicit clamp() — see above). Removed as dead/misleading;
   .neon-line's clamp() already covers the full viewport range including narrow mobile. */

/* 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 headline block. The wrap centers itself (as one unit) inside
   neonTextLink; each line is centered within the wrap via margin-inline:auto.
   font-size is NOT set here — nl-neonText.js sets --neon-fit-size on
   .neon-text-wrap once it has measured the real rendered width of both
   lines against the container, and the clamp() below is only the size
   used before that measurement has run (first paint / no-JS fallback). */
.neonTextLink .neon-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: var(--neon-fit-size, clamp(2.4rem, 3.2rem + 3.5vw, 7.15rem));
}

.neonTextLink .neon-line {
  display: block;
  white-space: nowrap;
  text-align: center;
  margin-inline: auto;
}

/* 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; }