/* Ηχοχρωματική background-music player — a small centered inline toggle that
   sits under the three pillars. Mirrors the hero .hero__sound look (gold border,
   void bg, Cinzel letterspaced label) but is inline/centered rather than fixed. */
.hxr-sound {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin: 2rem auto; /* center under the pillars */
  background: var(--void); border: 1px solid rgba(201, 169, 110, 0.5);
  color: var(--gold); padding: 0.5rem 1.05rem; cursor: pointer;
  font-family: var(--f-display); font-size: 0.62rem; letter-spacing: 0.25em; text-transform: uppercase;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
/* The pattern renders the button as a flow-level element via wp:html; center it. */
.hxr-pillars-wrap .hxr-sound,
.page-hxoxromatiki .hxr-sound { display: flex; width: -moz-fit-content; width: fit-content; }

.hxr-sound:hover { background: var(--gold); color: var(--void); border-color: var(--gold); }
.hxr-sound-icon { display: inline-block; line-height: 1; font-size: 0.95rem; }
.hxr-sound-label { display: inline-block; line-height: 1; }
.hxr-sound.is-playing { background: var(--gold); color: var(--void); border-color: var(--gold); }
.hxr-sound.is-playing .hxr-sound-icon { animation: hxr-note 1.1s ease-in-out infinite; }
@keyframes hxr-note { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
  .hxr-sound.is-playing .hxr-sound-icon { animation: none; }
}