/* Chuva no vidro do modo tela cheia, e o botão que a desliga.

   A camada mora dentro de #dynamicBackground, no topo da pilha do fundo: acima
   das ondas ascii (z-index 6) e abaixo da interface. No caminho de refração o
   canvas é opaco, então ele SUBSTITUI o fundo — que é reconstruído na textura
   pelo ambient-rain.js. Título, logo, capa e controles ficam por cima, intactos.

   Nada de mix-blend-mode ou filter aqui: os dois destroem a lente.

   Quem revela a camada é a classe `rain-on`, posta pelo ambient-rain.js, e não
   o `.ambient-mode` sozinho: a chuva depende também de estar chovendo de
   verdade e de o ouvinte não ter desligado o efeito. */
#rainLayer {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease;
}

.dynamic-background.rain-on #rainLayer {
  opacity: var(--rain-opacity, 1);
  visibility: visible;
}

#rainCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* O botão espelha o [+] tela cheia do canto oposto: mesma tipografia, mesmo
   colchete, do outro lado da tela. Ele só existe enquanto está chovendo — o
   `is-available` é quem o traz. */
.ambient-effects-toggle {
  position: fixed;
  right: 22px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 44;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.player-view.ambient-mode .ambient-effects-toggle.is-available {
  opacity: .62;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.player-view.ambient-mode .ambient-effects-toggle.is-available:hover,
.player-view.ambient-mode .ambient-effects-toggle.is-available:focus-visible {
  opacity: 1;
}

/* Com o efeito ligado o colchete mostra [-] (clique para tirar a chuva); com
   ele desligado, [+]. É a mesma gramática do resto da interface. */
.ambient-effects-toggle.is-on .glyph-stem { display: none; }

@media (max-width: 700px) {
  .ambient-effects-toggle {
    right: 22px;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  #rainLayer { display: none; }
  .ambient-effects-toggle { display: none; }
}