/* ============================================================
   LAUNCH STATE UPDATE — loading skeletons + pre-launch empty states
   Adds to the launch grid pages (Artists, Drops, Live, Rising).
   Pairs with launch-states.js. Tonight/Discover ships its own copy.
   ============================================================ */

/* ---- state visibility ---- */
.ls-hidden { display: none !important; }

/* ---- loading skeletons ---- */
.sk-card { border: 1px solid var(--ink-line); border-radius: var(--radius); overflow: hidden; background: var(--ink-2); }
.sk-card .sk-img { height: 168px; }
.sk-card .sk-body { padding: 18px; }
.sk-line { height: 11px; border-radius: 5px; margin-bottom: 12px; }
.sk-rule { height: 1px; background: var(--ink-line); margin: 16px 0; }
.skel.sk-flat { border-radius: 0; }

/* ---- ghost / empty tailoring ---- */
.es-ghost { background: var(--ink-1); }
.gh-av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; border: 1px dashed var(--gold-30); background: var(--gold-08); }
.gh-av.sm { width: 36px; height: 36px; }
.gh-spark { width: 20px; height: 20px; fill: var(--gold-100); opacity: 0.7; }
.gh-av.sm .gh-spark { width: 15px; height: 15px; }
.gh-plus { width: 22px; height: 22px; fill: none; stroke: #050a0e; stroke-width: 2.2; stroke-linecap: round; }
.gh-name { font-family: var(--f-display); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; color: var(--cream-80); }
.gh-tag { display: inline-block; width: 64px; height: 22px; border-radius: 999px; border: 1px dashed var(--ink-line-strong); }
.gh-tag.w2 { width: 46px; }
.gh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 10px; border-radius: 999px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--ink-line); background: transparent; color: var(--cream-60); transition: all .2s; }
.gh-btn:hover { border-color: var(--gold-30); color: var(--cream-100); }
.gh-btn.sm { width: auto; padding: 9px 15px; flex-shrink: 0; }
.gh-ic { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gh-ed { color: var(--cream-60) !important; border-color: var(--ink-line-strong) !important; background: transparent !important; }
.gh-price { font-family: var(--f-display); font-weight: 300; font-size: 20px; color: var(--cream-40); }
.gh-tr { color: var(--cream-40) !important; }
.gh-fill { background: var(--gold-30) !important; }

/* invite (featured) card */
.es-invite { background: linear-gradient(165deg, var(--gold-08), var(--ink-2)); border-color: var(--gold-30); display: flex; flex-direction: column; }
.es-av-gold { background: var(--gold-100); }
.es-invite-p { font-size: 12.5px; color: var(--cream-60); line-height: 1.5; margin: 16px 0; flex: 1; }

/* live standby pill (replaces the red live badge) */
.live-standby { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-60); background: rgba(247,236,216,0.06); border: 1px solid var(--ink-line-strong); border-radius: 999px; padding: 4px 10px; }
.live-standby::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-100); box-shadow: 0 0 8px var(--gold-100); animation: ls-standby 2.4s ease-in-out infinite; }
@keyframes ls-standby { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* rising empty: gentle scan + muted names */
.rk-row.es-ghost .rk-name { color: var(--cream-60); }
.rk-row.es-ghost .rk-bar { position: relative; }
.rk-row.es-ghost .rk-bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(212,168,81,0.18), transparent); animation: ls-scan 2.8s ease-in-out infinite; }
@keyframes ls-scan { 0% { left: -40%; } 100% { left: 100%; } }

/* radar empty (Artists/Drops/Live/Rising share Tonight's radar device for a
   unified empty when a grid resolves to nothing — used as the section intro) */
.ls-emptynote { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 18px; margin-bottom: 22px; border: 1px dashed var(--gold-30); border-radius: 999px; background: var(--gold-08); width: fit-content; }
.ls-emptynote .pulse-dot { flex-shrink: 0; }
.ls-emptynote span { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-60); }
.ls-emptynote b { color: var(--gold-100); font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  .live-standby::before, .rk-row.es-ghost .rk-bar::after { animation: none; }
}