/* ============================================================
   NEON — animated tube sign
   ============================================================ */

.neon {
  --intensity: 1;
  display: inline-block;
  position: relative;
  font-family: "Great Vibes", "Dancing Script", "Allura", cursive;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--neon-bright);
  text-shadow:
    0 0 calc(4px * var(--intensity)) var(--neon-bright),
    0 0 calc(11px * var(--intensity)) var(--neon),
    0 0 calc(22px * var(--intensity)) var(--neon),
    0 0 calc(50px * var(--intensity)) var(--neon-deep),
    0 0 calc(95px * var(--intensity)) var(--neon-deep);
  filter: drop-shadow(0 0 calc(8px * var(--intensity)) var(--neon-deep));
  transition: text-shadow 0.6s var(--ease);
}

.neon[data-intensity="off"] {
  --intensity: 0;
  color: rgba(255, 255, 255, 0.18);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  filter: none;
}
.neon[data-intensity="subtle"] { --intensity: 0.5; }
.neon[data-intensity="heavy"]  { --intensity: 1.4; }

/* Boot flicker — runs on first appearance */
.neon.flickering {
  animation: neon-boot 1.4s steps(1, end) 1 forwards;
}
@keyframes neon-boot {
  0%, 8%   { opacity: 0; }
  10%      { opacity: 0.9; }
  12%      { opacity: 0.1; }
  14%      { opacity: 0.85; }
  18%      { opacity: 0.05; }
  20%, 22% { opacity: 0.95; }
  23%      { opacity: 0.2; }
  26%      { opacity: 1; }
  40%      { opacity: 0.6; }
  42%      { opacity: 1; }
  100%     { opacity: 1; }
}

/* Live pulse / hum */
.neon.alive {
  animation: neon-hum 5.6s ease-in-out infinite;
}
@keyframes neon-hum {
  0%, 100% { filter: drop-shadow(0 0 calc(8px * var(--intensity)) var(--neon-deep)) brightness(1); }
  46%      { filter: drop-shadow(0 0 calc(10px * var(--intensity)) var(--neon-deep)) brightness(1.06); }
  47%      { filter: drop-shadow(0 0 calc(6px * var(--intensity)) var(--neon-deep)) brightness(0.86); }
  49%      { filter: drop-shadow(0 0 calc(11px * var(--intensity)) var(--neon-deep)) brightness(1.1); }
  50%      { filter: drop-shadow(0 0 calc(8px * var(--intensity)) var(--neon-deep)) brightness(1); }
}

/* Tube shimmer overlay (a thin highlight running through the strokes) */
.neon::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 60%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: calc(0.4 * var(--intensity));
}

/* The wordmark composition: SINATRA (clean) + LABS (neon) */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  font-family: var(--display);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 0.9;
}
.wordmark .sinatra {
  color: var(--ink);
  font-style: normal;
  font-weight: 300;
}
.wordmark .labs {
  display: inline-block;
  line-height: 0.82;
  transform: translateY(0.05em);
}

/* ---------- Sinatra signature mark (uses uploaded PNG as a mask) ---------- */
.sinatra-sig {
  display: inline-block;
  background-color: var(--ink);
  -webkit-mask: url("assets/sinatra-signature.png") center / contain no-repeat;
          mask: url("assets/sinatra-signature.png") center / contain no-repeat;
  width: 1.85em;
  aspect-ratio: 800 / 424;
  /* keep the signature visually balanced with the neon "Labs" cap height */
  transform: translateY(0.05em);
}
.hero-wordmark .sinatra-sig {
  width: 1.85em;
  margin-right: -0.05em;
}
.brand-sig {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url("assets/sinatra-signature.png") center / contain no-repeat;
          mask: url("assets/sinatra-signature.png") center / contain no-repeat;
  width: 64px;
  height: 28px;
  vertical-align: middle;
  margin-right: 6px;
  transform: translateY(-2px);
}
.footer-sig {
  width: 1.6em;
  background-color: var(--ink);
}

.neon-reflect {
  position: absolute;
  inset: auto 0 -22%;
  height: 22%;
  background: inherit;
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.35), transparent 60%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.35), transparent 60%);
  filter: blur(6px);
  pointer-events: none;
  opacity: 0.45;
}

/* Wall-power line + bracket */
.neon-bracket {
  position: absolute;
  top: -18px;
  left: 12%;
  width: 76%;
  height: 1px;
  background: rgba(255,255,255,0.08);
}
.neon-bracket::before, .neon-bracket::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 1px; height: 16px;
  background: rgba(255,255,255,0.12);
}
.neon-bracket::before { left: 0; }
.neon-bracket::after  { right: 0; }