/* Isolated preview-window interaction layer. Does not replace the FOUNTAIN+ player. */
.category-hero[data-category-hero]{cursor:pointer}
.category-hero[data-category-hero] .hero-copy,
.category-hero[data-category-hero] .hero-player-stage,
.category-hero[data-category-hero] .hero-player-close{cursor:default}
.hero-sound-hint{
  position:absolute;
  z-index:6;
  top:calc(var(--header) + 18px);
  right:24px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:calc(100vw - 48px);
  min-height:36px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(4,5,7,.72);
  color:rgba(255,255,255,.86);
  box-shadow:0 12px 35px rgba(0,0,0,.28);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  pointer-events:none;
  opacity:0;
  transform:translateY(-5px);
  transition:opacity .22s ease,transform .22s ease,border-color .22s ease,color .22s ease;
}
.hero-sound-hint::before{content:'◉';font-size:10px;color:var(--gold)}
.hero-sound-hint.is-visible{opacity:1;transform:translateY(0)}
.category-hero.preview-sound-on .hero-sound-hint{
  border-color:rgba(255,179,63,.72);
  color:#fff;
  background:rgba(14,10,4,.82);
}
.category-hero.preview-sound-on .hero-sound-hint::before{content:'🔊';font-size:12px}
.category-hero.hero-playing .hero-sound-hint{display:none}
@media(max-width:760px){
  .hero-sound-hint{
    top:calc(var(--header) + 12px);
    right:14px;
    min-height:34px;
    padding:0 11px;
    font-size:7px;
  }
}