.neon-stage {
  position: fixed; inset: 0; z-index: 200; isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #030304; color: #e9f3ff; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
.neon-stage:focus-visible { outline: 1px solid #bdd9f0; outline-offset: -12px; }
.neon-wall {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 35% at 46% 48%, rgba(77,114,154,.16), transparent 78%),
    radial-gradient(ellipse 70% 45% at 55% 57%, rgba(17,24,33,.8), transparent 90%),
    linear-gradient(135deg, #0c0c0f, #050507 52%, #090a0d);
}
.neon-wall::before {
  content: ''; position: absolute; inset: 0; opacity: var(--wall-power, .8);
  background: radial-gradient(ellipse 49% 24% at 46% 49%, rgba(112,177,245,.16), transparent 75%);
}
.neon-wall::after {
  content: ''; position: absolute; inset: 0; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.neon-sign { position: relative; text-align: center; transform: translateY(-3vh); }
.neon-logo {
  position: relative; display: inline-block; margin-bottom: clamp(35px, 6vh, 66px);
  font: 500 clamp(16px, 1.5vw, 22px)/clamp(42px, 5.76vw, 80.4px) 'Inter', sans-serif;
  letter-spacing: .2em; text-transform: uppercase; transform: none; white-space: nowrap; --power: 1;
}
.neon-logo sup { font: 400 9px 'Inter', sans-serif; vertical-align: super; margin-left: 5px; }
.neon-word { display: flex; justify-content: center; gap: .032em; padding: 0 .15em;
  font: 400 clamp(38px, 10.9vw, 156px)/1.15 'Quicksand', sans-serif; }
.neon-tube { position: relative; display: inline-block; --power: 1; }
html.neon-boot .neon-tube, html.neon-boot .neon-logo { --power: 0; }
.neon-tube:not([data-tube="0"]):not([data-tube="1"]):not([data-tube="3"]) { --power: 0; }
.neon-glass { color: transparent; -webkit-text-stroke: 1px rgba(122,145,166,.22);
  text-shadow: 1px 2px 1px #000, 0 -1px 1px rgba(147,175,204,.06); }
.neon-power { position: absolute; inset: 0; opacity: var(--power); pointer-events: none; }
.neon-halo, .neon-core { position: absolute; inset: 0; }
.neon-halo {
  color: transparent; -webkit-text-stroke: 1.5px #acd8fc;
  text-shadow: 0 0 6px #83c5fa, 0 0 17px rgba(121,188,251,.8), 0 0 44px rgba(93,161,234,.6), 0 0 90px rgba(95,152,224,.24);
  animation: neon-breath 8s ease-in-out infinite;
}
.neon-core { color: rgba(221,241,255,.025); -webkit-text-stroke: 1.1px #edf8ff;
  text-shadow: 0 0 2px #f4faff, 0 0 6px rgba(193,230,255,.8); }
.neon-logo .neon-glass { -webkit-text-stroke: .4px rgba(122,145,166,.15); text-shadow: none; }
.neon-logo .neon-core { color: #e7eff7; -webkit-text-stroke: 0;
  text-shadow: 0 0 6px rgba(210,231,252,.2); }
.neon-logo .neon-halo { color: #dbeafa; -webkit-text-stroke: 0;
  text-shadow: 0 0 12px rgba(183,214,245,.2), 0 0 28px rgba(150,193,234,.1); }
.neon-cue { display: flex; justify-content: center; align-items: center; gap: 18px;
  margin-top: clamp(36px, 6vh, 64px); font: 400 10px 'Inter', sans-serif;
  letter-spacing: 3.5px; text-transform: uppercase; color: #97a7ba;
  animation: neon-cue-in 1.3s ease 1.4s both; }
.neon-cue-line { width: 24px; height: 1px; background: #576b80; }
.neon-footnote { position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); left: 0; right: 0;
  text-align: center; font: 400 9px 'Inter', sans-serif; letter-spacing: 2px; color: #454d57; text-transform: uppercase; }
@keyframes neon-breath { 0%,100% { opacity: .9; } 55% { opacity: .73; } }
@keyframes neon-cue-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
#entry-stage { display: none; pointer-events: none; cursor: inherit; }
html.entry-handoff #entry-stage { display: flex; }
#entry-stage.opening {
  -webkit-mask-image: radial-gradient(ellipse var(--portal-rx, 1px) var(--portal-ry, 1px) at var(--portal-cx, 50%) var(--portal-cy, 50%), transparent calc(100% - 1px), #000 100%);
  mask-image: radial-gradient(ellipse var(--portal-rx, 1px) var(--portal-ry, 1px) at var(--portal-cx, 50%) var(--portal-cy, 50%), transparent calc(100% - 1px), #000 100%);
}
.neon-camera { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  contain: layout paint; will-change: transform; transform: translate3d(0, 0, 0); }
@media (max-width: 600px) {
  .neon-word { font-size: 11.2vw; gap: .025em; }
  .neon-core { -webkit-text-stroke-width: .85px; }
  .neon-halo { -webkit-text-stroke-width: 1.2px; }
  .neon-logo { margin-bottom: 40px; }
  .neon-sign { transform: translateY(-4vh); }
  .neon-cue { font-size: 9px; letter-spacing: 2.4px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .neon-halo, .neon-cue { animation: none; }
  .neon-cue { opacity: 1; }
}

/* The large sign uses glass tubes with a colored body and a separate white core. */
.neon-word .neon-tube { flex: 0 0 .64em; width: .64em; height: 1.15em; }
.neon-word .neon-glass { display: block; width: 100%; height: 100%; }
.tube-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tube-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tube-jacket { stroke-width: 7.5; }
.tube-cavity { stroke: #10191f; stroke-width: 4.5; }
.tube-reflection { stroke: #a5bac8; stroke-width: .7; opacity: .36; }
.tube-clamp { fill: #121a21; stroke: #7b8991; stroke-width: .9; opacity: .7; }
.tube-bloom { stroke: #4aaef2; stroke-width: 7.5;
  filter: drop-shadow(0 0 3px #8bd4ff) drop-shadow(0 0 9px #3a8ccc) drop-shadow(0 0 19px #206398); }
.tube-color { stroke: #7fcfff; stroke-width: 5; }
.tube-core { stroke: #f1fbff; stroke-width: 2.5; }
.tube-electrode { fill: #1c2730; stroke: #a0adb5; stroke-width: .7; }
.neon-logo-crisp { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  overflow: hidden; pointer-events: none; }
