/* Home stage: animated poker-table slider. Original artwork (CSS + inline SVG). Always dark, in both site themes. */

.pkc-stage {
  --stage-ink: #f5f1fa;
  --stage-muted: #cfc4e6;
  --felt-a: #5a4fd6;
  --felt-b: #3a2f9e;
  --rim-a: #e84393;
  --rim-b: #8e2ba8;
  position: relative; isolation: isolate; overflow: hidden; color: var(--stage-ink);
  padding-block: clamp(1.4rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.6rem);
  background:
    radial-gradient(900px 520px at 50% 45%, rgba(122, 61, 190, .55), transparent 70%),
    radial-gradient(700px 420px at 8% 8%, rgba(232, 67, 147, .16), transparent 70%),
    linear-gradient(180deg, #120a24 0%, #1a0d33 55%, #0c0716 100%);
}
.pkc-stage::after { /* soft columns in the room */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(90deg, transparent 0 11%, rgba(255, 255, 255, .035) 11% 12%, transparent 12% 23%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 70%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}
.pkc-stage .pkc-eyebrow { color: #f48bbf; }
.pkc-stage__top { text-align: center; margin-bottom: clamp(.4rem, 1.5vw, 1rem); position: relative; z-index: 2; }
.pkc-stage__h1 { margin: 0; font: 600 clamp(1.9rem, 4.2vw, 3.4rem)/1.08 var(--font-head); letter-spacing: -.02em; color: var(--stage-ink); }
.pkc-stage .pkc-shimmer { color: #f48bbf; }
.pkc-stage__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(300px, 410px) minmax(0, 1fr); align-items: center; gap: clamp(1rem, 3vw, 3rem); }

/* ----- Ambient room ----- */
.pkc-stage__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pkc-candle { position: absolute; top: 34%; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 190, 90, .55), rgba(255, 150, 60, .12) 55%, transparent 70%); animation: pkc-flicker 3.1s ease-in-out infinite; }
.pkc-candle--l { left: 3%; }
.pkc-candle--r { right: 3%; animation-delay: -1.4s; }
@keyframes pkc-flicker { 0%, 100% { opacity: .55; } 30% { opacity: .85; } 55% { opacity: .5; } 80% { opacity: .78; } }
.pkc-confetti { position: absolute; top: -20px; left: var(--x); width: 8px; height: 14px; border-radius: 2px; background: var(--c); opacity: .85; transform: rotate(18deg); animation: pkc-fall 11s linear var(--d) infinite; }
@keyframes pkc-fall { 0% { transform: translate3d(0, -20px, 0) rotate(0); opacity: 0; } 8% { opacity: .85; } 100% { transform: translate3d(36px, 640px, 0) rotate(520deg); opacity: 0; } }

/* ----- Copy panel ----- */
.pkc-stage__copy { position: relative; padding: 1.4rem 1.4rem 1rem; border-radius: 22px; background: rgba(18, 10, 36, .66); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.pkc-slide__kicker { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font: 700 .9rem/1.2 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: #f48bbf; }
.pkc-slide__title { margin: 0 0 .5rem; font: 600 clamp(1.6rem, 2.8vw, 2.2rem)/1.15 var(--font-head); color: var(--stage-ink); }
.pkc-slide__text { margin: 0 0 .9rem; color: var(--stage-muted); font-size: 1rem; }
.pkc-slide__stat { display: inline-flex; align-items: baseline; gap: .6rem; margin: 0 0 1rem; padding: .35rem .9rem; border-radius: 999px; border: 1.5px solid #f0c75a; color: #f0c75a; }
.pkc-slide__stat span { font: 700 .75rem var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--stage-muted); }
.pkc-slide__stat b { font: 700 1.4rem/1 var(--font-label); }
.pkc-slide__cta { display: flex; flex-wrap: wrap; gap: .6rem; }
.pkc-stage .pkc-btn--ghost { color: var(--stage-ink); border-color: rgba(255, 255, 255, .28); }
.pkc-stage .pkc-btn--ghost:hover { border-color: #f48bbf; color: #f48bbf; }
.pkc-stage .pkc-disclosure { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--stage-muted); }
.pkc-stage .pkc-disclosure a { color: #f48bbf; }
html:not(.js) .pkc-slide + .pkc-slide { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .14); }
.js .pkc-slide[data-inactive] { display: none; }

/* Controls */
.pkc-stage__nav { display: none; align-items: center; gap: .6rem; margin-top: 1.1rem; }
.js .pkc-stage__nav { display: flex; }
.pkc-stage .pkc-iconbtn { color: var(--stage-ink); border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); }
.pkc-stage .pkc-iconbtn:hover { background: rgba(255, 255, 255, .16); }
.pkc-i--left { transform: rotate(90deg); }
.pkc-i--right { transform: rotate(-90deg); }
.pkc-dots { display: flex; align-items: center; gap: .45rem; flex: 1; list-style: none; margin: 0; padding: 0; }
.pkc-dots button { position: relative; width: 28px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.pkc-dots button i { display: block; width: 100%; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; position: relative; }
.pkc-dots button i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #e84393, #f0c75a); transform: scaleX(0); transform-origin: left center; }
.pkc-dots button[aria-current="true"] i::after { transform: scaleX(1); animation: pkc-dot var(--pkc-dur, 7s) linear; }
.pkc-stage.is-paused .pkc-dots button[aria-current="true"] i::after, .pkc-stage.is-static .pkc-dots button[aria-current="true"] i::after { animation: none; }
@keyframes pkc-dot { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pkc-pause-i { display: inline-flex; gap: 4px; }
.pkc-pause-i i { width: 4px; height: 14px; background: currentColor; border-radius: 1px; }
.pkc-stage__pause[aria-pressed="true"] .pkc-pause-i i:first-child { width: 0; height: 0; background: transparent; border-left: 10px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-radius: 0; }
.pkc-stage__pause[aria-pressed="true"] .pkc-pause-i i:last-child { display: none; }

/* ----- Scene: container-sized so everything scales together ----- */
.pkc-scene { min-width: 0; }
.pkc-scene__in { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 16 / 10.5; }
.pkc-felt { position: absolute; left: 7%; right: 7%; top: 22%; height: 52%; border-radius: 50%; padding: 3.2cqw; background: linear-gradient(180deg, var(--rim-a), var(--rim-b) 60%, #4b1670); box-shadow: 0 3.2cqw 3cqw rgba(0, 0, 0, .55), 0 0 6cqw rgba(232, 67, 147, .35), inset 0 .4cqw .6cqw rgba(255, 255, 255, .35); }
.pkc-felt__rim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.pkc-felt__rim::after { content: ""; position: absolute; inset: -.6cqw; border-radius: inherit; border: .35cqw solid rgba(244, 139, 191, .7); filter: blur(.5cqw); animation: pkc-rim 3.6s ease-in-out infinite; }
@keyframes pkc-rim { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
.pkc-felt__top { position: relative; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, var(--felt-a), var(--felt-b) 75%); box-shadow: inset 0 1.2cqw 3cqw rgba(0, 0, 0, .55), inset 0 0 0 .3cqw rgba(255, 255, 255, .12); }
.pkc-board { position: absolute; left: 50%; top: 28%; display: flex; gap: 1.1cqw; transform: translateX(-50%); }
.pkc-slot { width: 7.2cqw; aspect-ratio: 5 / 7; border: .3cqw dashed rgba(255, 255, 255, .32); border-radius: .9cqw; }
.pkc-pc { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.pkc-pc.is-empty { visibility: hidden; }
.pkc-pc__face, .pkc-pc__back { position: absolute; inset: 0; border-radius: .9cqw; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 .6cqw 1.2cqw rgba(0, 0, 0, .4); }
.pkc-pc__face { display: flex; flex-direction: column; justify-content: space-between; padding: .7cqw .8cqw; background: #fff; color: #14091f; }
.pkc-pc.is-red .pkc-pc__face { color: #b81d6b; }
.pkc-pc__face b { font: 700 2.1cqw/1 var(--font-head); }
.pkc-pc__face .pkc-i { width: 2cqw; height: 2cqw; }
.pkc-pc__face i { align-self: flex-end; display: inline-flex; transform: rotate(180deg); }
.pkc-pc__back { transform: rotateY(180deg); background: repeating-conic-gradient(from 45deg, #8e2ba8 0 25%, #e84393 0 50%) 0 0 / 1.4cqw 1.4cqw; border: .4cqw solid #fff; }
.pkc-pc.is-down { transform: rotateY(180deg); }
.pkc-pot { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); display: inline-flex; align-items: baseline; gap: 1cqw; padding: .5cqw 1.6cqw; border-radius: 99px; background: rgba(12, 7, 22, .72); border: .25cqw solid rgba(255, 255, 255, .25); color: #fff; white-space: nowrap; }
.pkc-pot span { font: 600 1.5cqw var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: #cfc4e6; }
.pkc-pot b { font: 700 2.4cqw var(--font-label); color: #f0c75a; }
.pkc-deck { position: absolute; left: 14%; top: 24%; width: 5.6cqw; aspect-ratio: 5 / 7; }
.pkc-deck i { position: absolute; inset: 0; border-radius: .8cqw; background: repeating-conic-gradient(from 45deg, #8e2ba8 0 25%, #e84393 0 50%) 0 0 / 1.2cqw 1.2cqw; border: .35cqw solid #fff; box-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .4); }
.pkc-deck i:nth-child(2) { transform: translate(.4cqw, -.4cqw); }
.pkc-deck i:nth-child(3) { transform: translate(.8cqw, -.8cqw); }
.pkc-stack { position: absolute; display: flex; flex-direction: column-reverse; align-items: center; animation: pkc-bob 4.2s ease-in-out infinite; }
.pkc-stack--a { right: 12%; top: 18%; }
.pkc-stack--b { left: 24%; bottom: 14%; animation-delay: -1.6s; }
.pkc-stack span { display: block; width: 5.2cqw; height: 1.4cqw; margin-top: -.55cqw; border-radius: 50%; background: repeating-conic-gradient(var(--rim-a) 0 18deg, #fff 18deg 36deg); border: .22cqw solid rgba(0, 0, 0, .3); box-shadow: 0 .4cqw .5cqw rgba(0, 0, 0, .35); }
.pkc-stack span:nth-child(3n) { background: repeating-conic-gradient(#3b82f6 0 18deg, #fff 18deg 36deg); }
.pkc-stack span:nth-child(3n + 1) { background: repeating-conic-gradient(#f0c75a 0 18deg, #fff 18deg 36deg); }
@keyframes pkc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.5cqw); } }

.pkc-seat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: .8cqw; }
.pkc-seat--l { left: 1%; top: 30%; }
.pkc-seat--r { right: 1%; top: 30%; }
.pkc-seat--t { left: 50%; top: 2%; transform: translateX(-50%); }
.pkc-seat__av { display: grid; place-items: center; width: 8.4cqw; height: 8.4cqw; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, #a56bf0, #4a1d8c); border: .55cqw solid #8e5af0; box-shadow: 0 0 2.4cqw rgba(142, 90, 240, .6); transition: box-shadow .3s ease-out, border-color .3s ease-out; }
.pkc-seat__av .pkc-i { width: 3.6cqw; height: 3.6cqw; }
.pkc-seat.is-on .pkc-seat__av, .pkc-seat__av--you { border-color: #f0c75a; box-shadow: 0 0 3cqw rgba(240, 199, 90, .7); }
.pkc-seat__cards { display: flex; margin-top: -1cqw; }
.pkc-seat__cards i { width: 4.2cqw; aspect-ratio: 5 / 7; border-radius: .7cqw; border: .3cqw solid #fff; background: repeating-conic-gradient(from 45deg, #8e2ba8 0 25%, #e84393 0 50%) 0 0 / 1.1cqw 1.1cqw; box-shadow: 0 .4cqw .8cqw rgba(0, 0, 0, .45); }
.pkc-seat__cards i:first-child { transform: rotate(-10deg); }
.pkc-seat__cards i:last-child { transform: rotate(10deg) translateX(-1cqw); }
.pkc-hand { position: absolute; left: 50%; top: 62%; width: 18cqw; height: 15cqw; transform: translateX(-50%); }
.pkc-pc--hand { position: absolute; width: 9.4cqw; aspect-ratio: 5 / 7; height: auto; }
.pkc-pc--h1 { left: 0; top: 1cqw; transform: rotate(-9deg); }
.pkc-pc--h2 { right: 0; top: 0; transform: rotate(8deg); }
.pkc-pc--hand .pkc-pc__face b { font-size: 2.8cqw; }
.pkc-pc--hand .pkc-pc__face .pkc-i { width: 2.6cqw; height: 2.6cqw; }
.pkc-you { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .4cqw; font: 600 1.9cqw var(--font-body); }
.pkc-you .pkc-seat__av { width: 6.6cqw; height: 6.6cqw; }
.pkc-you b { color: #fff; }

/* ----- Audience bar under the stage ----- */
.pkc-aud--bar { position: relative; z-index: 3; margin-top: clamp(1rem, 2.2vw, 1.8rem); display: grid; grid-template-columns: auto 1fr; gap: .7rem 1.2rem; align-items: center; background: rgba(18, 10, 36, .72); border-color: rgba(255, 255, 255, .14); color: var(--stage-ink); }
.pkc-aud--bar .pkc-aud__q { color: var(--stage-ink); margin: 0; }
.pkc-aud--bar .pkc-chip { background: rgba(255, 255, 255, .06); color: var(--stage-ink); border-color: rgba(255, 255, 255, .2); }
.pkc-aud--bar .pkc-chip[aria-selected="true"] { background: var(--brand-gradient); color: var(--on-cta); border-color: transparent; }
.pkc-aud--bar .pkc-aud__panels { grid-column: 1 / -1; margin-top: .2rem; }
.pkc-aud--bar .pkc-aud__lead { color: var(--stage-muted); }
.pkc-aud--bar .pkc-aud__panel a { color: var(--stage-ink); }
.pkc-aud--bar .pkc-aud__panel a:hover { color: #f48bbf; }

/* ----- Responsive ----- */
@media (max-width: 1000px) {
  .pkc-stage__grid { grid-template-columns: minmax(0, 1fr); }
  .pkc-scene { order: -1; }
  .pkc-scene__in { aspect-ratio: 16 / 11; }
  .pkc-candle { display: none; }
  .pkc-aud--bar { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pkc-stage__copy { padding: 1.1rem 1rem .8rem; border-radius: 18px; }
  .pkc-slide__cta .pkc-btn { flex: 1 1 100%; }
  .pkc-stage__nav { gap: .4rem; }
  .pkc-dots button { width: 22px; }
  .pkc-seat--t { display: none; }
}

/* ----- Reduced motion: still, no autoplay, no ambient ----- */
@media (prefers-reduced-motion: reduce) {
  .pkc-candle, .pkc-confetti, .pkc-felt__rim::after, .pkc-stack, .pkc-shimmer::after, .pkc-dots button[aria-current="true"] i::after { animation: none !important; }
  .pkc-confetti { display: none; }
  .pkc-felt__rim::after { opacity: .7; }
}

/* Polish */
.pkc-stage .pkc-shimmer { overflow: clip; vertical-align: baseline; }
.pkc-pot { top: 64%; }
@media (max-width: 1000px) {
  .pkc-scene__in { aspect-ratio: 16 / 12.5; }
  .pkc-felt { left: 3%; right: 3%; top: 20%; height: 56%; }
  .pkc-seat--l { left: 0; } .pkc-seat--r { right: 0; }
  .pkc-hand { top: 64%; }
}
