/* ============================================================
   SUSHI POP / retro pop world
   Neon pink x deep navy x sunset gold. Halftone, brush, neon.
   ============================================================ */

body.sushi-pop {
  --sp-pink: #e8386d;
  --sp-pink-hot: #ff4d88;
  --sp-navy: #141a2e;
  --sp-navy-deep: #0d1122;
  --sp-cream: #f3ead8;
  --sp-gold: #d3a13f;
  --sp-cyan: #5ec8e5;
  background: var(--sp-cream);
  color: var(--sp-navy);
}

/* ---------- hero ---------- */
.sp-hero {
  min-height: 100svh;
  position: relative; overflow: hidden;
  display: grid; place-items: center; text-align: center;
  color: #fff;
  background:
    radial-gradient(1100px 520px at 82% 108%, rgba(211, 161, 63, .5), transparent 60%),
    radial-gradient(900px 600px at 12% 112%, rgba(232, 56, 109, .42), transparent 58%),
    linear-gradient(180deg, #0d1122 0%, #1b2340 42%, #55284e 74%, #a03a58 100%);
}
/* halftone dots */
.sp-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.6px);
  background-size: 22px 22px;
  mask-image: linear-gradient(200deg, rgba(0,0,0,.9), transparent 55%);
  -webkit-mask-image: linear-gradient(200deg, rgba(0,0,0,.9), transparent 55%);
}
/* brush swash behind title */
.sp-hero .swash {
  position: absolute; z-index: 1; width: min(880px, 96vw); height: clamp(110px, 24vw, 190px);
  top: 50%; left: 50%; transform: translate(-50%, -66%) rotate(-2.4deg);
  background: var(--sp-navy-deep);
  border-radius: 46% 54% 52% 48% / 62% 48% 60% 40%;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.sp-hero-inner { position: relative; z-index: 2; padding: 130px 18px 150px; width: 100%; }
.sp-badge {
  display: inline-block;
  font-family: var(--font-display); font-weight: 400; font-size: 13.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--sp-cream);
  border: 1.6px solid rgba(243, 234, 216, .55);
  padding: 8px 22px; border-radius: 999px;
  background: rgba(13, 17, 34, .5); backdrop-filter: blur(4px);
}
.sp-title {
  font-family: var(--font-brush);
  font-size: clamp(64px, 14vw, 172px);
  line-height: .95; margin: 26px 0 6px;
  text-shadow: 0 14px 50px rgba(0,0,0,.45);
}
.sp-title .pop { color: var(--sp-pink-hot); text-shadow: 0 0 26px rgba(255, 77, 136, .65), 0 14px 50px rgba(0,0,0,.45); }
.sp-tagline {
  font-family: var(--font-display); font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
  font-size: clamp(14px, 2vw, 19px);
}
.sp-tagline .eat { color: var(--sp-cyan); }
.sp-tagline .enjoy { color: var(--sp-pink-hot); }
.sp-meta-chips { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.sp-chip {
  font-size: 13px; letter-spacing: .1em;
  border: 1.4px solid rgba(255,255,255,.4); border-radius: 999px;
  padding: 8px 18px; background: rgba(255,255,255,.08); backdrop-filter: blur(4px);
}
.sp-hero .countdown { justify-content: center; margin-top: 34px; }
.sp-hero .cd-num { color: var(--sp-cream); text-shadow: 0 0 18px rgba(255,77,136,.4); }
.sp-hero-ctas { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn.sp-cta { background: var(--sp-pink); color: #fff; box-shadow: 0 12px 34px rgba(232,56,109,.45); }
.btn.sp-cta:hover { background: var(--sp-pink-hot); }

/* neon sign */
.neon-sign {
  position: absolute; top: 108px; right: 6vw; z-index: 2;
  font-family: var(--font-brush); font-size: clamp(18px, 2.6vw, 30px);
  color: #9ee8ff; transform: rotate(4deg);
  text-shadow: 0 0 8px #6fd6f7, 0 0 24px #2ea8d4, 0 0 46px #1b7ea6;
  animation: neon-flicker 4.6s linear infinite;
}
@keyframes neon-flicker {
  0%, 6%, 9%, 100% { opacity: 1; }
  7%, 8% { opacity: .4; }
  54% { opacity: 1; } 55% { opacity: .55; } 56% { opacity: 1; }
}
@media (max-width: 720px) { .neon-sign { display: none; } }

/* ---------- marquee band ---------- */
.sp-marquee {
  background: var(--sp-navy-deep); color: var(--sp-cream);
  padding: 16px 0;
  font-family: var(--font-display); font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  font-size: clamp(14px, 1.8vw, 19px);
  border-block: 3px solid var(--sp-pink);
  transform: rotate(-1.2deg) scale(1.02);
  margin-block: -12px 0;
  position: relative; z-index: 3;
}
.sp-marquee .dot { color: var(--sp-pink-hot); }

/* ---------- features ---------- */
.sp-features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px; margin-top: 50px;
}
.sp-feature {
  background: #fff; border-radius: var(--radius);
  padding: 34px 26px 30px; text-align: center;
  box-shadow: var(--shadow-soft);
  border-top: 4px solid var(--sp-pink);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s;
}
.sp-feature:nth-child(2) { border-top-color: var(--sp-gold); }
.sp-feature:nth-child(3) { border-top-color: var(--sp-cyan); }
.sp-feature:nth-child(4) { border-top-color: var(--sp-navy); }
.sp-feature:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: var(--shadow); }
.sp-feature .icon { width: 58px; height: 58px; margin: 0 auto 16px; color: var(--sp-navy); }
.sp-feature h3 { font-family: var(--font-display); font-weight: 400; font-size: 18px; letter-spacing: .06em; margin-bottom: 8px; }
.sp-feature p { font-size: 13.5px; color: var(--ink-soft); }
.sp-feature .big { font-family: var(--font-brush); font-size: 15px; color: var(--sp-pink); display: block; margin-top: 10px; }

/* ---------- flyer showcase ---------- */
/* Single column while the flyer is pulled. Restore the two-column rule
   (1.05fr .95fr) when a corrected flyer goes back in. */
.sp-showcase { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; max-width: 640px; }
.sp-showcase .flyer-frame {
  transform: rotate(-2.2deg);
  border: 10px solid #fff; border-radius: 10px;
  box-shadow: var(--shadow);
  position: relative;
}
.sp-showcase .flyer-frame::after {
  content: "★ OFFICIAL FLYER";
  position: absolute; top: -16px; right: -14px;
  background: var(--sp-navy); color: var(--sp-cream);
  font-family: var(--font-display); font-weight: 400; font-size: 11px; letter-spacing: .18em;
  padding: 7px 14px; border-radius: 999px; transform: rotate(3deg);
}
.sp-list { margin-top: 22px; display: grid; gap: 12px; }
.sp-list li { display: flex; gap: 12px; align-items: baseline; font-size: 15.5px; }
.sp-list li::before { content: "✦"; color: var(--sp-pink); font-size: 13px; }
@media (max-width: 860px) { .sp-showcase { grid-template-columns: 1fr; } }

/* ---------- lineup cassette ---------- */
.sp-lineup { background: var(--sp-navy-deep); color: var(--sp-cream); position: relative; overflow: hidden; }
.sp-lineup::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.6px);
  background-size: 26px 26px;
}
.cassette {
  position: relative; margin-top: 44px;
  background: linear-gradient(160deg, #232a4a, #161c36);
  border: 1.5px solid rgba(255,255,255,.14);
  border-radius: 22px; padding: clamp(28px, 4vw, 46px);
  display: flex; align-items: center; gap: clamp(24px, 4vw, 54px); flex-wrap: wrap;
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
}
.cassette .reels { display: flex; align-items: center; gap: 60px; }
.reel { width: 74px; height: 74px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); position: relative; animation: spin 5s linear infinite; }
.reel::before { content: ""; position: absolute; inset: 24px; border-radius: 50%; background: var(--sp-pink); }
.reel::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 3px dashed rgba(255,255,255,.35);
}
.reel.slow { animation-duration: 7s; }
@keyframes spin { to { transform: rotate(360deg); } }
.cassette .label-area { flex: 1; min-width: 240px; }
.cassette .tape-label {
  font-family: var(--font-brush); font-size: clamp(22px, 3vw, 34px);
  color: var(--sp-pink-hot);
}
.cassette p { opacity: .8; font-size: 14.5px; margin-top: 8px; }

/* ---------- venue ---------- */
.sp-venue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 56px); align-items: center; }
.sp-venue-card {
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-soft);
  padding: clamp(30px, 4vw, 48px);
}
.sp-venue-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; margin-bottom: 6px; }
.sp-venue-card .addr { color: var(--ink-soft); font-size: 15px; }
.sp-venue-card .lines { margin-top: 20px; display: grid; gap: 10px; font-size: 14.5px; }
.sp-venue-card .lines div { display: flex; gap: 10px; }
.sp-venue-card .lines .k { font-weight: 700; min-width: 84px; color: var(--sp-pink); font-family: var(--font-display); font-weight: 400; letter-spacing: .06em; font-size: 12.5px; text-transform: uppercase; padding-top: 3px; }
@media (max-width: 820px) { .sp-venue-grid { grid-template-columns: 1fr; } }

/* ---------- tickets ---------- */
.sp-tickets {
  text-align: center;
  background:
    radial-gradient(700px 300px at 50% 120%, rgba(232,56,109,.28), transparent 65%),
    var(--sp-navy);
  color: var(--sp-cream);
}
.sp-tickets .sp-title2 { font-family: var(--font-brush); font-size: clamp(38px, 6vw, 66px); }
.sp-tickets p { opacity: .85; max-width: 520px; margin: 14px auto 0; }

.sp-tiers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px; max-width: 720px; margin: 40px auto 30px;
}
.sp-tier {
  border: 1.5px solid rgba(243, 234, 216, .22); border-radius: 18px;
  padding: 26px 14px 22px; background: rgba(255,255,255,.05);
  transition: transform .3s, border-color .3s;
}
.sp-tier:hover { transform: translateY(-6px); border-color: var(--sp-pink-hot); }
.sp-tier.featured {
  border-color: var(--sp-pink);
  background: linear-gradient(160deg, rgba(232,56,109,.22), rgba(232,56,109,.05));
  box-shadow: 0 14px 40px rgba(232,56,109,.25);
}
.sp-tier .tier-name {
  font-family: var(--font-display); font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  font-size: 13px; opacity: .8;
}
.sp-tier.featured .tier-name { color: var(--sp-pink-hot); opacity: 1; }
.sp-tier .tier-price { font-family: var(--font-num); font-weight: 900; font-size: clamp(34px, 4vw, 46px); margin-top: 8px; }
.sp-tier .tier-price sup { font-size: .5em; }

/* sponsorship ways — sushi pop accent */
body.sushi-pop .way::before { color: var(--sp-pink); }
body.sushi-pop .way:hover { border-color: var(--sp-pink); }

/* lineup section sits on dark navy — lift the body copy for contrast */
.sp-lineup .section-lead { color: rgba(243, 234, 216, .82); }

/* brush lettering hero logo */
.sp-hero-logo {
  width: min(800px, 88vw); height: auto; display: block; margin: 20px auto 10px;
  filter: drop-shadow(0 14px 46px rgba(0,0,0,.45));
}

/* the swash was sized for the old text title; soften it behind the brush logo */
.sp-hero .swash {
  width: min(1000px, 96vw); height: clamp(150px, 30vw, 300px);
  transform: translate(-50%, -58%) rotate(-2.4deg);
  opacity: .5; filter: blur(18px);
}

/* ticket button carries the sushi pop pink */
body.sushi-pop .btn-ticket {
  background: var(--sp-pink); color: #fff;
  box-shadow: 0 6px 20px rgba(232,56,109,.42);
}
body.sushi-pop .btn-ticket:hover { background: var(--sp-pink-hot); box-shadow: 0 10px 26px rgba(232,56,109,.5); }