/* ===== INTRO MÖBIUS + ícono de sonido (ver intro.js / sound.js) ===== */

/* mientras dibuja la cinta, el óvalo de pana se esconde y estudio/creativo se abren */
body.fx-on .cl-oval{ opacity:0 !important; }
.side--left { transform:translate(calc(var(--fxa,0) * -260px),-50%); letter-spacing:calc(-0.035em + var(--fxa,0) * .25em); }
.side--right{ transform:translate(calc(var(--fxa,0) *  260px),-50%); letter-spacing:calc(-0.035em + var(--fxa,0) * .25em); }
.logo, .side{ z-index:2; }

/* ícono de sonido: chiquito, abajo a la derecha, casi escondido */
#snd{
  position:fixed; right:22px; bottom:20px; z-index:9999;
  width:34px; height:24px; padding:2px; border:0; background:none; cursor:pointer;
  opacity:.28; transition:opacity .3s;
}
#snd:hover, #snd:focus-visible{ opacity:.9; }
#snd.on{ opacity:.7; }
#snd svg{ width:100%; height:100%; overflow:visible; display:block; }
#snd path{
  fill:none; stroke:var(--red); stroke-width:2; stroke-linecap:round;
  transform-origin:center; transform:scaleY(.12);        /* apagado = línea casi plana */
  transition:transform .6s ease;
}
#snd.on path{ animation:snd-wave 2.6s ease-in-out infinite; }
@keyframes snd-wave{ 0%,100%{ transform:scaleY(.55); } 50%{ transform:scaleY(1); } }

/* modo TV (tv.js): el cuarto con la tele tapa todo; entra y sale por negro */
#tvmode{ position:fixed; inset:0; z-index:10000; background:#000; opacity:0; transition:opacity .9s ease; }
#tvmode.on{ opacity:1; }
#tvmode iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }