/* ---------- Home "next party" spotlight (js/spotlight.js) ----------
   The flyer is shown whole (img keeps its own aspect ratio, nothing drawn
   over it). Only the wrappers move: .spot-float drifts up and down,
   .spot-tilt follows the pointer. */
.spotlight{
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(28px, 6vw, 80px);
  align-items: center;
  margin: clamp(28px, 4vw, 48px) 0 clamp(40px, 6vw, 72px);
}
.spotlight[hidden]{ display: none; }
.spot-flyer{ perspective: 900px; }
.spot-float{ animation: spot-float 6s ease-in-out infinite alternate; }
@keyframes spot-float{
  from{ transform: translateY(-6px); }
  to{ transform: translateY(6px); }
}
.spot-tilt{ will-change: transform; }
.spot-tilt img{
  display: block; width: 100%; height: auto;
  border-radius: 14px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.7);
}

.spot-info h3{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.05;
  margin: 10px 0 8px;
}
.spot-meta{ color: var(--cream-dim); margin: 0 0 24px; }
.spot-clock{ display: flex; gap: clamp(14px, 3vw, 28px); margin-bottom: 28px; }
.spot-unit{ display: flex; flex-direction: column; gap: 2px; min-width: 3ch; }
.spot-digits{
  display: inline-block;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--cream);
}
.spot-unit span{ font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-faint); }
.spot-live{ font-family: var(--font-display); font-size: 1.6rem; color: var(--coral); margin: 0 0 28px; }

@media (max-width: 720px){
  .spotlight{ grid-template-columns: 1fr; }
  .spot-flyer{ max-width: 320px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce){
  .spot-float{ animation: none; }
}