/* Kundenansicht neu: das Glas-Logo auf der Anmeldung (Handy und PC). Spielt einmal beim Laden; ein Klick spielt es erneut.
   Lief gerade das Startbild der App (startbild.js setzt data-kn-startbild am <html>), ruht das Logo sofort, damit die
   Animation nicht zweimal hintereinander kommt. Der Name unter dem Logo blendet per CSS ein, sobald das Glas losgelassen hat
   (oeffentlich.css); ruht das Logo, steht er sofort da (Klasse kn-login-ruht). */

import { glasLogo } from './glas-logo.js'

const LOGIN_EINSTELLUNGEN = { finalScale: 0.9 }

const feld = document.querySelector('.kn-login-glas')
const marke = feld?.closest('.kn-login-marke')
if (feld && marke) {
  const ruht = document.documentElement.hasAttribute('data-kn-startbild') || window.matchMedia('(prefers-reduced-motion: reduce)').matches
  if (ruht) marke.classList.add('kn-login-ruht')
  const logo = glasLogo(feld, { standbild: ruht, rand: 1.4, einstellungen: LOGIN_EINSTELLUNGEN })
  feld.addEventListener('click', () => {
    if (!logo.abspielen()) return
    // Name wieder aus- und nach dem Glas einblenden: Animation neu starten
    marke.classList.remove('kn-login-ruht')
    const name = marke.querySelector(':scope > span')
    if (!name) return
    name.style.animation = 'none'
    void name.offsetWidth
    name.style.animation = ''
  })
}