@font-face {
  font-family: 'Mr Dafoe';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/mr-dafoe-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/barlow-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/barlow-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/barlow-600.woff2') format('woff2');
}

  :root {
    --wall: #171310;        /* night wall */
    --steel: #241e18;       /* panel steel */
    --marquee: #fff3dc;     /* warm white sign glow */
    --teal: #45e3c6;        /* neon tube teal */
    --ember: #ff7a33;       /* ember orange accent */
    --zinc: #9a9184;        /* muted body text */
    --ink: #e8dfce;         /* light copy on steel */
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html, body { height: 100%; }

  body {
    background-color: var(--wall);
    background-image:
      radial-gradient(ellipse 60% 45% at 50% 18%, rgba(0,0,0,0.0), rgba(0,0,0,0.35) 100%),
      repeating-linear-gradient(90deg,
        rgba(255,255,255,0.014) 0px, rgba(255,255,255,0.014) 2px,
        rgba(0,0,0,0.0) 2px, rgba(0,0,0,0.0) 26px);
    color: var(--ink);
    font-family: 'Barlow', 'Segoe UI', Arial, sans-serif;
    min-height: 100svh;
    display: grid;
    place-items: center;
    overflow-x: hidden;
  }

  /* Warm light spilling onto the wall from the sign */
  .glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 56% 36% at 50% 30%, rgba(255,209,140,0.17), rgba(255,209,140,0) 70%),
      radial-gradient(ellipse 30% 18% at 50% 52%, rgba(69,227,198,0.08), rgba(69,227,198,0) 70%);
    opacity: 1;
    transition: opacity 0.45s ease;
    animation: glowIn 1.2s ease 0.1s both;
  }

  .scene {
    position: relative;
    text-align: center;
    padding: 3rem 1.25rem 4.5rem;
    max-width: 62rem;
    width: 100%;
  }

  /* Lighted logo sign */
  .sign { margin: 0; }

  .sign img {
    display: block;
    width: min(94vw, 46rem);
    height: auto;
    margin: 0 auto;
    filter:
      brightness(1)
      drop-shadow(0 0 6px rgba(255,240,210,0.95))
      drop-shadow(0 0 26px rgba(255,205,130,0.5))
      drop-shadow(0 0 80px rgba(255,170,80,0.35));
    transition: filter 0.45s ease;
    animation: warmUp 1s ease 0.2s both;
  }

  /* Neon tube script */
  .neon {
    font-family: 'Mr Dafoe', 'Brush Script MT', cursive;
    font-size: clamp(2.3rem, 7.5vw, 4.6rem);
    line-height: 1.1;
    color: #dcfff5;
    text-shadow:
      0 0 4px rgba(255,255,255,0.9),
      0 0 11px var(--teal),
      0 0 26px var(--teal),
      0 0 60px rgba(69,227,198,0.55);
    transform: rotate(-2deg);
    margin-top: 1.1rem;
    transition: color 0.45s ease, text-shadow 0.45s ease;
    animation: neonFlick 1.5s ease 1s both;
  }

  /* Vinyl banner with grommets */
  .banner {
    position: relative;
    display: inline-block;
    margin-top: 2.6rem;
    padding: 1rem 2.5rem;
    background: var(--steel);
    border: 1px dashed rgba(255,243,220,0.26);
    border-radius: 3px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.38);
    transform: rotate(-0.5deg);
    animation: rise 0.7s ease 1.9s both;
  }

  .banner p {
    font-size: clamp(0.68rem, 1.7vw, 0.84rem);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 2;
  }

  .banner .dot { color: var(--zinc); padding: 0 0.35em; }
  .banner .hot { color: var(--ember); }

  .grommet {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #d3cab9, #6d6455 55%, #26211a 78%);
    box-shadow: inset 0 0 2px rgba(0,0,0,0.7);
  }
  .g1 { top: 7px; left: 9px; }
  .g2 { top: 7px; right: 9px; }
  .g3 { bottom: 7px; left: 9px; }
  .g4 { bottom: 7px; right: 9px; }

  .tagline {
    margin: 2.2rem auto 0;
    max-width: 36ch;
    font-size: 1.05rem;
    font-weight: 400;
    color: #b9af9f;
    animation: rise 0.7s ease 2.05s both;
  }

  /* Contact */
  .reach {
    margin-top: 1.7rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--zinc);
    animation: rise 0.7s ease 2.15s both;
  }

  .contact {
    margin-top: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0.7rem;
    flex-wrap: wrap;
    animation: rise 0.7s ease 2.25s both;
  }

  .contact a {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    background: var(--steel);
    border: 1px solid #3a332a;
    border-radius: 4px;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }

  .contact a:hover {
    border-color: var(--ember);
    color: var(--marquee);
    box-shadow: 0 0 18px rgba(255, 122, 51, 0.22);
  }

  .contact a:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
  }

  footer {
    margin-top: 2.6rem;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7f776a;
    animation: rise 0.7s ease 2.4s both;
  }

  footer a {
    color: #b9af9f;
    text-decoration: none;
    border-bottom: 1px solid rgba(185,175,159,0.3);
    padding-bottom: 1px;
  }

  footer a:hover { color: var(--marquee); border-color: var(--marquee); }
  footer a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
  footer .dot { padding: 0 0.6em; }

  /* Power switch */
  .power {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--steel);
    border: 1px solid #3a332a;
    border-radius: 5px;
    color: var(--zinc);
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .power:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

  .power .bulb {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 8px var(--teal);
    transition: background 0.3s ease, box-shadow 0.3s ease;
  }

  /* Lights off state: unlit letters and dead tubes */
  body.lights-off .glow { opacity: 0; }

  body.lights-off .sign img {
    filter:
      brightness(0.22)
      drop-shadow(0 0 6px rgba(255,240,210,0))
      drop-shadow(0 0 26px rgba(255,205,130,0))
      drop-shadow(0 0 80px rgba(255,170,80,0));
  }

  body.lights-off .neon {
    color: #2f5a52;
    text-shadow: none;
  }

  body.lights-off .power .bulb {
    background: #4a423a;
    box-shadow: none;
  }

  @keyframes glowIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes warmUp {
    from {
      opacity: 0.6;
      filter:
        brightness(0.25)
        drop-shadow(0 0 6px rgba(255,240,210,0))
        drop-shadow(0 0 26px rgba(255,205,130,0))
        drop-shadow(0 0 80px rgba(255,170,80,0));
    }
    to {
      opacity: 1;
      filter:
        brightness(1)
        drop-shadow(0 0 6px rgba(255,240,210,0.95))
        drop-shadow(0 0 26px rgba(255,205,130,0.5))
        drop-shadow(0 0 80px rgba(255,170,80,0.35));
    }
  }

  @keyframes neonFlick {
    0% { opacity: 0; }
    6% { opacity: 0.55; }
    10% { opacity: 0.08; }
    16% { opacity: 0.7; }
    21% { opacity: 0.12; }
    30% { opacity: 1; }
    37% { opacity: 0.35; }
    46% { opacity: 1; }
    100% { opacity: 1; }
  }

  @keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Banner keeps its tilt while fading in */
  .banner { animation-name: riseBanner; }
  @keyframes riseBanner {
    from { opacity: 0; transform: rotate(-0.5deg) translateY(8px); }
    to { opacity: 1; transform: rotate(-0.5deg) translateY(0); }
  }

  @media (max-width: 560px) {
    .banner { padding: 0.9rem 2.1rem; }
    .scene { padding-bottom: 6.5rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }