/* 08 Supper Club: the revue. Velvet curtains at the edges, gold-foil titles, a spotlight, marquee-bulb buttons. */
[data-world="supper-club"] {
  --grain: 0.05;
  --enter: rise-in 600ms cubic-bezier(.2, .7, .2, 1);
  --edge: max(0px, calc((100vw - 1260px) / 2));
}
@keyframes curtain-part { from { width: 50vw; z-index: 60; } to { width: var(--edge); z-index: 0; } }
@keyframes foil { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes confetti-fall { to { transform: translate(var(--dx), 110%) rotate(540deg); opacity: 0; } }

/* velvet curtain panels; they part when the world home opens */
[data-world="supper-club"] body::before, [data-world="supper-club"] body::after {
  content: ""; position: fixed; top: 0; bottom: 0; width: var(--edge); z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, black 35%, transparent), transparent 30%, color-mix(in srgb, black 25%, transparent) 60%, transparent),
    repeating-linear-gradient(90deg, var(--spice) 0 18px, color-mix(in srgb, var(--spice) 65%, black) 18px 36px);
}
[data-world="supper-club"] body::before { left: 0; }
[data-world="supper-club"] body::after { right: 0; }
[data-world="supper-club"] body:has(.main-home)::before,
[data-world="supper-club"] body:has(.main-home)::after { animation: curtain-part 500ms cubic-bezier(.6, 0, .2, 1) both; }

[data-world="supper-club"] .hero-title { line-height: 1.08; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  [data-world="supper-club"] .hero-title span {
    background: linear-gradient(100deg, var(--ink) 38%, var(--accent) 50%, var(--ink) 62%) 0 0 / 260% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: foil 3.2s ease-in-out 500ms both;
  }
}
/* sparse confetti flecks on the hero, and the spotlight (supper-club.js moves it with the cursor) */
[data-world="supper-club"] .hero-fx::before {
  content: ""; position: absolute; inset: 0; opacity: 0.7;
  background:
    radial-gradient(3px 3px at 12% 18%, var(--accent), transparent), radial-gradient(2px 4px at 31% 9%, var(--accent), transparent),
    radial-gradient(3px 2px at 58% 14%, var(--ink), transparent), radial-gradient(3px 3px at 77% 26%, var(--accent), transparent),
    radial-gradient(2px 3px at 91% 11%, var(--spice), transparent), radial-gradient(3px 3px at 46% 31%, var(--accent), transparent);
}
[data-world="supper-club"] .spotlight {
  position: absolute; inset: 0; opacity: 0; transition: opacity 300ms; mix-blend-mode: screen;
  background: radial-gradient(circle 240px at var(--sx, 50%) var(--sy, 40%), color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%);
}
[data-world="supper-club"] .hero-media:hover .spotlight { opacity: 1; }
/* labels: uppercase with wide tracking */
[data-world="supper-club"] .site-nav a, [data-world="supper-club"] .eyebrow, [data-world="supper-club"] .meta,
[data-world="supper-club"] .more, [data-world="supper-club"] .link, [data-world="supper-club"] .btn {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8125rem;
}
/* pills are for buttons (marquee bulbs); panels keep a softer curve */
[data-world="supper-club"] .card, [data-world="supper-club"] .ph, [data-world="supper-club"] .lightbox button { border-radius: 18px; }
[data-world="supper-club"] .hero-media .ph, [data-world="supper-club"] .embed .ph { border-radius: 0; }
[data-world="supper-club"] .confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
[data-world="supper-club"] .confetti i {
  position: absolute; top: -12px; width: 7px; height: 11px; background: var(--accent);
  animation: confetti-fall var(--t, 2.6s) cubic-bezier(.3, .2, .6, 1) forwards;
}
[data-world="supper-club"] #follow { position: relative; }