/* PLAYRS CLUB // CLUBS ERA // BEATS ROOM — v1
   The BeatStars player is a third-party frame; nothing here styles its inside.
   The room observes it: a signal line breathes above it and swells toward the
   pointer. No frame: the player sits directly in the room. */

.beats-signal {
  --beats-line: var(--playrs-store-line, var(--playrs-border));
  --beats-ink: var(--playrs-store-fg, var(--playrs-text));
  --beats-dim: var(--playrs-store-muted, var(--playrs-text-muted));
  margin: 0 0 80px;
}

.beats-readout {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 14px 0;
}

.beats-readout a {
  color: inherit;
  text-decoration: none;
  transition: opacity 240ms ease;
}

.beats-readout a:hover,
.beats-readout a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

#beats-status { transition: opacity 600ms ease; }

.beats-line {
  display: block;
  width: 100%;
  height: 48px;
}

/* ---- frame ---- */

.beats-frame {
  position: relative;
}

.beats-waiting {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  transform: translateY(-50%);
  transition: opacity 600ms ease;
  animation: beats-pulse 2.4s ease-in-out infinite;
}

.beats-frame.is-received .beats-waiting { opacity: 0; animation: none; }

#beats-player {
  display: block;
  width: 100%;
  height: 1000px;
  border: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 1200ms ease;
}

.beats-frame.is-received #beats-player { opacity: 1; }

@keyframes beats-pulse {
  0%, 100% { opacity: .35; }
  50% { opacity: .8; }
}

@media (max-width: 600px) {
  #beats-player { height: 900px; }
}

@media (prefers-reduced-motion: reduce) {
  .beats-waiting,
  #beats-player,
  #beats-status { transition: none; animation: none; }
}

/* ---- signal fragment (header) ----
   Pure CSS 3D. Dark grained faces, hairline edges, a soft core that flickers.
   The core is screen-space (always at the cube's centre) and blended with
   `screen`, so it reads as light seen through the faces. */

.signals-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
}

.signals-fragment {
  --s: 150px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.signals-fragment figcaption { margin: 0; }

.frag-stage {
  position: relative;
  width: calc(var(--s) * 1.8);
  height: calc(var(--s) * 1.8);
  display: grid;
  place-items: center;
  perspective: calc(var(--s) * 6);
}

.frag-wobble {
  width: var(--s);
  height: var(--s);
  transform-style: preserve-3d;
  animation: frag-wobble 13s ease-in-out infinite alternate;
}

.frag-cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: frag-tumble 32s linear infinite;
}

.frag-face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(240, 240, 234, .62);
  background-color: var(--frag-shade, #151515);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 2.2 -1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .9;
}

.f-front  { --frag-shade: #181818; transform: translateZ(calc(var(--s) / 2)); }
.f-back   { --frag-shade: #101010; transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.f-right  { --frag-shade: #0c0c0c; transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.f-left   { --frag-shade: #1d1d1d; transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.f-top    { --frag-shade: #232323; transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.f-bottom { --frag-shade: #0a0a0a; transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }

.frag-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--s) * .44);
  height: calc(var(--s) * .44);
  margin: calc(var(--s) * -.22) 0 0 calc(var(--s) * -.22);
  background: #e9e8e2;
  filter: blur(calc(var(--s) * .075));
  mix-blend-mode: screen;
  opacity: .34;
  pointer-events: none;
  animation: frag-core-turn 32s linear infinite, frag-flicker 7.3s steps(1, end) infinite;
}

@keyframes frag-tumble {
  from { transform: rotateX(-24deg) rotateY(0deg) rotateZ(32deg); }
  to   { transform: rotateX(-24deg) rotateY(360deg) rotateZ(32deg); }
}

@keyframes frag-wobble {
  from { transform: rotateX(-7deg) rotateZ(-4deg); }
  to   { transform: rotateX(9deg) rotateZ(5deg); }
}

@keyframes frag-core-turn {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

/* Mostly a steady low glow; a few brief, uneven lifts — a signal, not a strobe. */
@keyframes frag-flicker {
  0%   { opacity: .34; }
  11%  { opacity: .5; }
  12%  { opacity: .3; }
  13%  { opacity: .46; }
  15%  { opacity: .34; }
  48%  { opacity: .4; }
  49%  { opacity: .34; }
  71%  { opacity: .56; }
  72%  { opacity: .36; }
  73%  { opacity: .34; }
  100% { opacity: .34; }
}

@media (max-width: 600px) {
  .signals-top { gap: 12px; }
  .signals-fragment { --s: 54px; gap: 10px; }
  .signals-fragment figcaption { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .frag-wobble,
  .frag-cube,
  .frag-core { animation: none; }
  .frag-cube { transform: rotateX(-24deg) rotateY(38deg) rotateZ(32deg); }
}

/* ---- full-bleed player ----
   Only the player frame breaks out of the page column to the full viewport
   width; headings, readouts and the signal line stay on the column. */

html:has(.beats-room) { overflow-x: clip; }

.beats-frame {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ---- pulse toggle (readout) ---- */
.beats-pulse {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.beats-pulse[hidden] { display: none; }
.beats-pulse:hover,
.beats-pulse:focus-visible { text-decoration: underline; text-underline-offset: 4px; outline: none; }
.beats-pulse[aria-pressed="false"] { opacity: .5; }