/* PORTAL LÍQUIDO · truco escondido hacia la caja del Universo 11.
   Namespace propio (.pliq-* / .liq-iso-*). Solo LEE clases que pone
   vitrina.js (.vit.frente, estados de .sala) para saber cuándo esconderse;
   no cambia ninguno de sus selectores. Qué hace y por qué: WEBSITE/src/LEEME.md. */

/* ---------- escritorio: la franja a la izquierda de Camu ---------- */
/* Vive DENTRO de la vitrina de Camu, así se mueve con el riel sin medir nada.
   pointer-events se hereda de la .vit (vitrina.js lo apaga en las que no
   están al frente): por eso aquí no se declara. */
.pliq{
  position:absolute; top:7%; height:84%;
  width:19%; right:calc(100% + 5%);
  opacity:0; transition:opacity .9s cubic-bezier(.22,1,.36,1);
  touch-action:none; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
}
.pliq-agua{display:block; width:100%; height:100%; filter:blur(.5px)}
.vit.frente > .pliq{opacity:1}
.sala:is(.enUniverso,.enSalto,.secuenciaViva,.portalAbierto,.cargando,.viajeLaroye) .pliq{
  opacity:0 !important; pointer-events:none !important;
}
/* la onda breve de la pared al reconocer el gesto (≤ 300 ms) */
.pliq.pliq-onda{animation:pliqOnda .28s cubic-bezier(.2,.7,.3,1)}
@keyframes pliqOnda{
  0%{transform:scaleX(1); filter:none}
  40%{transform:scaleX(1.32); filter:brightness(2.4) saturate(1.3)}
  100%{transform:scaleX(1); filter:none}
}
@media (max-width:900px){ .pliq{display:none} }
@media (prefers-reduced-motion:reduce){
  .pliq{transition:none}
  .pliq.pliq-onda{animation:none}
}

/* ---------- el isotipo de la esquina: brillo líquido ---------- */
/* (3 oct) sin touch-action propio en .marca: la sala ya lo pone en none y el
   gesto del isotipo solo se queda con la zona del isotipo (portal.js) */
.liq-iso-caja{position:relative; display:inline-flex; flex:none; line-height:0}
.liq-iso-brillo{
  position:absolute; inset:-2px -3px; pointer-events:none; opacity:0;
  background:linear-gradient(104deg,
    transparent 34%, rgba(214,200,255,.0) 40%, rgba(246,242,255,.95) 49%,
    rgba(185,160,255,.75) 55%, rgba(255,255,255,0) 63%, transparent 70%);
  background-size:320% 100%; background-position:115% 0;
  /* solo brilla donde está el dibujo del isotipo */
  -webkit-mask:var(--liq-iso-mascara) center/34px 15.3px no-repeat;
          mask:var(--liq-iso-mascara) center/34px 15.3px no-repeat;
  mix-blend-mode:screen;
}
.liq-iso-caja.liq-ola .liq-iso-brillo{animation:liqIsoBrillo 1.15s cubic-bezier(.45,.05,.3,1) both}
@keyframes liqIsoBrillo{
  0%{opacity:0; background-position:115% 0}
  18%{opacity:1}
  80%{opacity:1}
  100%{opacity:0; background-position:-15% 0}
}
@media (prefers-reduced-motion:reduce){
  .liq-iso-caja.liq-ola .liq-iso-brillo{animation:liqIsoQuieto 1.2s ease both}
  @keyframes liqIsoQuieto{0%,100%{opacity:0; background-position:50% 0}35%,65%{opacity:.8; background-position:50% 0}}
}

/* (26 oct) el segundo muro: la misma agua, a la derecha de RAS T-1 */
.pliq.pliq-der{right:auto; left:calc(100% + 5%)}
.vit.frente > .pliq.pliq-fuera{opacity:0; pointer-events:none}