/* ═══════════════════════════════════════════════════════════════════════════
   RETRO — Neon billboard, retro accents, route 66 visual flair
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── BILLBOARD (the End of the Trail neon sign) ─── */
.billboard {
  position: relative;
  margin: 0 auto;
  max-width: 720px;
  padding: 3rem 2.5rem;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,45,135,0.18), transparent 50%),
    radial-gradient(circle at 75% 80%, rgba(0,153,204,0.18), transparent 50%),
    var(--asphalt);
  border-radius: var(--radius-xl);
  border: 4px solid var(--gold);
  text-align: center;
  box-shadow:
    var(--shadow-lg),
    0 0 0 2px var(--asphalt-deep),
    0 0 36px rgba(255,215,0,0.35),
    inset 0 0 60px rgba(255,45,135,0.12);
  overflow: hidden;
}
.billboard::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 2px dashed rgba(255,215,0,0.4);
  border-radius: 22px;
  pointer-events: none;
}
.billboard__lights {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 16px;
  background:
    radial-gradient(circle at 15px 8px, var(--gold) 0 4px, transparent 5px),
    radial-gradient(circle at 45px 8px, var(--neon-pink) 0 4px, transparent 5px),
    radial-gradient(circle at 75px 8px, var(--turquoise) 0 4px, transparent 5px);
  background-size: 60px 16px;
  background-repeat: repeat-x;
  animation: lights-chase 1.2s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255,215,0,0.5));
}
.billboard__inner { position: relative; z-index: 1; }
.billboard__small {
  font-family: var(--font-script);
  font-size: 1.4rem;
  color: var(--turquoise);
  margin-bottom: 0.4rem;
  text-shadow: 0 0 18px rgba(64,224,208,0.6);
}
.billboard__big {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  color: var(--cream);
  letter-spacing: 0.04em;
  margin: 0.4rem 0;
  animation: neon-flicker 7s linear infinite;
  line-height: 1;
}
.billboard__sub {
  font-family: var(--font-marquee);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  color: var(--gold);
  margin-top: 0.6rem;
  text-shadow: 0 0 14px rgba(255,215,0,0.5);
}

/* ─── RETRO STAGE NUM ─── */
.stage__num {
  text-shadow: 0 0 12px rgba(255,215,0,0.2);
}

/* ─── HALFTONE BG OVERLAY (subtle) ─── */
.eats {
  background:
    radial-gradient(rgba(26,26,46,0.06) 1px, transparent 1.5px) 0 0 / 18px 18px,
    var(--beach-cream);
}

.travel {
  background:
    radial-gradient(rgba(0,153,204,0.08) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--beach-cream);
}

/* ─── DASHED ROAD STRIPE (decorative — used across sections) ─── */
.story::before,
.cars::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--gold) 0 30px,
    transparent 30px 60px
  );
  opacity: 0.7;
}

/* ─── HOVER LIFT FOR EVERYTHING ─── */
.btn:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--neon-pink);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ─── STAR DECORATION FOR CTA ─── */
.cta-final::after {
  content: '★';
  position: absolute;
  top: 12%;
  right: 8%;
  font-size: 3rem;
  color: var(--gold);
  opacity: 0.5;
  filter: drop-shadow(0 0 12px var(--gold));
  animation: sun-pulse 3s ease-in-out infinite;
}

/* ─── PRINT (in case anyone prints the schedule) ─── */
@media print {
  .nav, .ticker, .hero__sky, .hero__sea, .hero__palms, .cta-final, .footer { display: none !important; }
  body { background: white; color: black; }
  .section { padding: 1rem 0; break-inside: avoid; }
}