/* QRJam Webplayer — structural + motion styles.
   Theming (bg / ink / accent) is driven by inline CSS vars on .wp per variant.
   Fonts + tokens inherited from the QRJam design system. */

* { box-sizing: border-box; }

/* ── Player shell (fills the phone screen) ───────────────────── */
.wp {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 60px 26px 40px;
  background: var(--wp-bg);
  background-image: var(--wp-bg-image, none);
  color: var(--wp-ink);
  overflow: hidden;
  gap: 16px;
  -webkit-font-smoothing: antialiased;
  font-family: "Space Grotesk", system-ui, sans-serif;
}

/* ── Header ──────────────────────────────────────────────────── */
.wp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.wp-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--wp-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.01em;
}
.wp-brand em { font-style: normal; color: var(--wp-accent); }
.wp-tag {
  font-family: "Space Mono", monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wp-ink-soft);
  border: 1px solid var(--wp-line);
  padding: 5px 9px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wp-live-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--wp-accent);
  box-shadow: 0 0 0 0 var(--wp-accent);
  animation: wp-pulse 1.6s infinite;
}
.wp[data-paused="true"] .wp-live-dot { animation: none; opacity: .4; }
@keyframes wp-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp-accent) 60%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── Hero / flip card ────────────────────────────────────────── */
.wp-hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  perspective: 1300px;
}
.wp-flip {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .38s cubic-bezier(.6,.04,.2,1);
}
.wp-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* The visible face is driven by React inline `visibility`; the half-flip
   rotation (0→90→0) lives on .wp-flip. Faces share orientation — neither is
   pre-rotated — so nothing can render mirrored under a flattening transform. */

/* fade reveal mode (override the 3D flip) */
.wp[data-anim="fade"] .wp-flip { transform: none !important; }
.wp[data-anim="fade"] .wp-face { transform: none !important; transition: opacity .55s ease; }
.wp[data-anim="fade"] .wp-face.front { opacity: 0; }
.wp[data-anim="fade"][data-revealed="true"] .wp-face.front { opacity: 1; }
.wp[data-anim="fade"][data-revealed="true"] .wp-face.back  { opacity: 0; }

/* slide reveal mode */
.wp[data-anim="slide"] .wp-flip { transform: none !important; }
.wp[data-anim="slide"] .wp-face { transform: none; transition: transform .6s cubic-bezier(.3,.7,.4,1), opacity .4s ease; }
.wp[data-anim="slide"] .wp-face.front { transform: translateY(102%); }
.wp[data-anim="slide"][data-revealed="true"] .wp-face.front { transform: translateY(0); }
.wp[data-anim="slide"][data-revealed="true"] .wp-face.back  { transform: translateY(-102%); opacity: 0; }

/* ── Mystery face (now-playing record) ───────────────────────── */
.wp-mystery {
  width: 100%; height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wp-disc-bg);
  border-radius: 14px;
  overflow: hidden;
}
.wp-mystery-grain {
  position: absolute; inset: 0;
  opacity: .5;
  background-image: var(--wp-mystery-tex, none);
}
.wp-disc {
  position: relative;
  border-radius: 999px;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      var(--wp-groove-a) 0 1.4px, var(--wp-groove-b) 1.4px 3.6px);
  box-shadow:
    0 18px 40px -16px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.04);
  display: grid;
  place-items: center;
  animation: wp-spin 4.5s linear infinite;
}
.wp[data-paused="true"] .wp-disc { animation-play-state: paused; }
@keyframes wp-spin { to { transform: rotate(360deg); } }
.wp-disc-sheen {
  position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(125deg, rgba(255,255,255,.16) 0%, transparent 38%, transparent 62%, rgba(255,255,255,.07) 100%);
}
.wp-disc-label {
  width: 38%; height: 38%;
  border-radius: 999px;
  background: var(--wp-accent);
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--wp-display);
  font-weight: 800;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}
.wp-disc-hole {
  width: 8%; height: 8%; border-radius: 999px;
  background: var(--wp-disc-bg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
}
.wp-mystery-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to top, rgba(0,0,0,.45), transparent);
}
.wp-q {
  font-family: var(--wp-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
/* equalizer */
.wp-eq { display: flex; align-items: flex-end; gap: 3px; height: 20px; }
.wp-eq span {
  width: 3px;
  background: var(--wp-accent);
  border-radius: 2px;
  transform-origin: bottom;
  animation: wp-bounce 900ms ease-in-out infinite alternate;
}
.wp-eq span:nth-child(1) { height: 60%; animation-delay: -200ms; }
.wp-eq span:nth-child(2) { height: 100%; animation-delay: -600ms; }
.wp-eq span:nth-child(3) { height: 45%; animation-delay: -120ms; }
.wp-eq span:nth-child(4) { height: 80%; animation-delay: -420ms; }
.wp-eq span:nth-child(5) { height: 55%; animation-delay: -720ms; }
.wp[data-paused="true"] .wp-eq span { animation-play-state: paused; }
@keyframes wp-bounce { from { transform: scaleY(.3); } to { transform: scaleY(1); } }

/* ── Track meta ──────────────────────────────────────────────── */
.wp-meta {
  flex-shrink: 0;
  text-align: center;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.wp-meta-title {
  font-family: var(--wp-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.wp-meta-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: var(--wp-ink-soft);
}
.wp-year-chip {
  font-family: "Space Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--wp-accent);
  background: color-mix(in srgb, var(--wp-accent) 14%, transparent);
  padding: 3px 9px;
  border-radius: 999px;
}
.wp-hidden { color: var(--wp-ink-soft); letter-spacing: .18em; }
.wp-meta-hint {
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wp-ink-soft);
}

/* ── Progress ────────────────────────────────────────────────── */
.wp-progress { flex-shrink: 0; }
.wp-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--wp-line);
  overflow: visible;
}
.wp-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 999px;
  background: var(--wp-accent);
}
.wp-bar-thumb {
  position: absolute;
  top: 50%;
  width: 13px; height: 13px;
  border-radius: 999px;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0,0,0,.35), 0 0 0 2px var(--wp-accent);
}
.wp-times {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--wp-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ── Controls ────────────────────────────────────────────────── */
.wp-controls {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.wp-ctrl {
  border: 0;
  background: transparent;
  color: var(--wp-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: transform .12s, opacity .15s;
}
.wp-ctrl:active { transform: scale(.92); }
.wp-ctrl.ghost { opacity: .8; width: 46px; height: 46px; }
.wp-ctrl.ghost:hover { opacity: 1; }
.wp-play {
  width: 64px; height: 64px;
  border-radius: 999px;
  background: var(--wp-accent);
  color: #fff;
  box-shadow: var(--wp-play-shadow, 0 8px 22px -8px rgba(0,0,0,.5));
}
.wp-play:hover { filter: brightness(1.06); }

/* ── CTA ─────────────────────────────────────────────────────── */
.wp-cta {
  flex-shrink: 0;
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 17px 22px;
  font-family: var(--wp-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--wp-accent);
  color: #fff;
  box-shadow: var(--wp-play-shadow, 0 10px 26px -10px rgba(0,0,0,.5));
  transition: transform .12s, filter .15s, background .2s, color .2s;
}
.wp-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.wp-cta:active { transform: translateY(0); }
.wp-cta.secondary {
  background: transparent;
  color: var(--wp-ink);
  border: 1.5px solid var(--wp-line-strong);
  box-shadow: none;
}
.wp-cta.secondary:hover { background: var(--wp-soft); filter: none; }

/* small scan hint shown after reveal */
.wp-next {
  flex-shrink: 0;
  text-align: center;
  font-family: "Space Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp-ink-soft);
  margin-top: 2px;
}