/* Specchio Magico — stile a tutto schermo, pensato per una TV grande.
   Le misure usano vh/vw così l'interfaccia si adatta a qualsiasi risoluzione. */

:root {
  --accent: #ffd54a;
  --accent2: #ff4fa3;
  --glass: rgba(10, 10, 20, 0.55);
  --text: #ffffff;
  --font: "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --emoji: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--text);
  font-family: var(--font);
  cursor: none;
  user-select: none;
}

#stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  display: block;
  background: #000;
}

#ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
#ui.hidden-ui > *:not(#error):not(#flash) { display: none !important; }

.hidden { display: none !important; }

/* Lampo di transizione tra un effetto e l'altro */
#flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%);
  opacity: 0;
}
#flash.go { animation: flash 0.7s ease-out; }
@keyframes flash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Etichetta fissa in alto a sinistra con l'effetto corrente */
#chip {
  position: absolute;
  top: 2.4vh;
  left: 2vw;
  display: flex;
  align-items: center;
  gap: 0.8vh;
  padding: 0.9vh 1.8vh 1.3vh;
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(6px);
  font-size: 2.4vh;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 0.4vh 2vh rgba(0,0,0,0.35);
}
#chip .icon { font-family: var(--emoji); font-size: 2.8vh; }
#chip .bar {
  position: absolute;
  left: 1.8vh;
  right: 1.8vh;
  bottom: 0.55vh;
  height: 0.35vh;
  border-radius: 1vh;
  background: rgba(255,255,255,0.18);
  overflow: hidden;
}
#chip .bar > div {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

/* Titolo grande quando cambia effetto */
#title {
  position: absolute;
  top: 7vh;
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  text-align: center;
  opacity: 0;
  white-space: nowrap;
}
#title.show { animation: title-in 4.2s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes title-in {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.4) rotate(-4deg); }
  10%  { opacity: 1; transform: translateX(-50%) scale(1.05) rotate(1deg); }
  16%  { transform: translateX(-50%) scale(1) rotate(0); }
  85%  { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.92) translateY(-3vh); }
}
#title .icon {
  font-family: var(--emoji);
  font-size: 11vh;
  line-height: 1.1;
  filter: drop-shadow(0 0 2vh rgba(255,255,255,0.6));
}
#title .name {
  font-size: 8.5vh;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #fff 30%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0.5vh 1.2vh rgba(0,0,0,0.7));
}
#title .tagline {
  margin-top: 1.2vh;
  font-size: 3.6vh;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0.3vh 1.2vh rgba(0,0,0,0.9);
}

/* Invito ad avvicinarsi quando non c'è nessuno */
#attract {
  position: absolute;
  left: 50%;
  bottom: 12vh;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  white-space: nowrap;
}
#attract.show { opacity: 1; }
#attract .big {
  font-size: 9vh;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 3vh var(--accent2), 0 0.6vh 1.5vh rgba(0,0,0,0.8);
  animation: pulse 1.8s ease-in-out infinite;
}
#attract .sub {
  margin-top: 1vh;
  font-size: 4.2vh;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0.3vh 1.2vh rgba(0,0,0,0.9);
}
#attract .arrow {
  display: inline-block;
  margin-top: 1vh;
  font-family: var(--emoji);
  font-size: 8vh;
  transform-origin: 70% 80%;
  animation: wave 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 2vh rgba(255, 79, 163, 0.8));
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes wave {
  0%, 60%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(16deg); }
  20%, 40% { transform: rotate(-10deg); }
}

/* Suggerimento in basso */
#hint {
  position: absolute;
  left: 50%;
  bottom: 3vh;
  transform: translateX(-50%) translateY(2vh);
  padding: 1.2vh 3vh;
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(6px);
  font-size: 2.8vh;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  white-space: nowrap;
}
#hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Logo */
#brand {
  position: absolute;
  right: 2vw;
  bottom: 3vh;
  display: flex;
  align-items: center;
  gap: 1vh;
  font-size: 2.6vh;
  font-weight: 800;
  text-shadow: 0 0.3vh 1vh rgba(0,0,0,0.8);
}
#brand img { height: 7vh; width: auto; filter: drop-shadow(0 0.3vh 1vh rgba(0,0,0,0.6)); }

/* Pannello tecnico (tasto D) */
#debug {
  position: absolute;
  right: 1vw;
  top: 1vh;
  margin: 0;
  padding: 1vh 1.4vh;
  max-width: 45vw;
  background: rgba(0,0,0,0.7);
  color: #9f9;
  font: 1.6vh/1.35 Consolas, monospace;
  border-radius: 0.8vh;
  white-space: pre-wrap;
}

#error {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 3vh 4vh;
  max-width: 70vw;
  border-radius: 2vh;
  background: rgba(120, 0, 30, 0.85);
  font-size: 3.4vh;
  font-weight: 700;
  text-align: center;
}

/* Caricamento */
#loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vh;
  background: radial-gradient(circle at 50% 40%, #2a1850, #07060d 70%);
  transition: opacity 0.8s ease;
  z-index: 10;
}
#loading.gone { opacity: 0; pointer-events: none; }
#loading .msg { font-size: 3.4vh; font-weight: 700; opacity: 0.9; }
#loading .spinner {
  width: 9vh;
  height: 9vh;
  border-radius: 50%;
  border: 1vh solid rgba(255,255,255,0.15);
  border-top-color: var(--accent);
  border-right-color: var(--accent2);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }