/* ===== Base ===== */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #f3f3f3;
  /* colore iniziale richiesto */
  color: #f3f3f3;
  font-family: "Roboto", sans-serif;
  overflow: hidden;
}

/* ===== Layer a pieno schermo (NOTA: #end-image NON è full-screen) ===== */
#viewer-container,
#noise-canvas,
#replacement-video,
#vignette {
  position: absolute;
  inset: 0;
  /* top/right/bottom/left:0 */
  width: 100vw;
  height: 100vh;
}

#viewer-container {
  z-index: 0;
}

/* ===== model-viewer ===== */
model-viewer {
  width: 100%;
  height: 100%;
  object-fit: contain;

  /* Transizioni solo su opacity/filter: il transform è pilotato da JS (shake fluido) */
  transition: opacity .25s ease, filter .25s ease;
  opacity: 1;
  filter: none;
  transform: none;
}

/* Nascondi UI/loader/hint di model-viewer */
model-viewer::part(default-progress-bar) {
  display: none;
}

model-viewer::part(default-ar-button) {
  display: none;
}

model-viewer::part(announcement) {
  display: none;
}

/* ===== Canvas rumore (sopra al modello e sotto al video) ===== */
#noise-canvas {
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s linear;
}

/* ===== Video full-screen ===== */
#replacement-video {
  z-index: 2;
  display: none;
  /* mostrato da JS */
  pointer-events: none;
  /* non intercetta input */
  object-fit: cover;
  /* copre tutto */
  background: #000;
  opacity: 0;
  transition: opacity .3s ease;
}

/* Vignetta sopra il video */
#vignette {
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .5) 100%);
  opacity: 0;
  transition: opacity .3s ease;
}

/* ===== Immagine pillola finale (più piccola) ===== */
#end-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* centrata */
  display: none;
  /* nascosta all’avvio */
  width: clamp(56px, 12vmin, 120px);
  height: auto;
  max-width: 70vw;
  max-height: 70vh;
  cursor: pointer;
  z-index: 4;
  transition: transform .2s ease, filter .2s ease;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .5));
}

#end-image:hover {
  transform: translate(-50%, calc(-50% - 6px));
  /* hover più delicato */
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, .55));
}

/* ===== Tooltip minimal ef.link ===== */
#tooltip {
  position: absolute;
  display: none;
  padding: 0;
  background: none;
  color: #ffffff;
  border: none;
  font-family: "Roboto", sans-serif;
  font-size: 0.9rem;
  white-space: nowrap;
  text-decoration-line: underline;
  z-index: 5;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

#tooltip span {
  display: inline-block;
}


/* --- Switch lingua (in alto a destra) --- */
/* Nascosto all'inizio: lo rende visibile il JS a fine video */
#lang-switch {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10;

  display: none;
  /* hidden finché non c'è .show */
  opacity: 0;
  /* fade-in morbido */
  gap: 6px;
  padding: 6px;
  border-radius: 10px;

  /* leggibile su scuro ma discreto */
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px);

  transition: opacity .25s ease;
}

#lang-switch.show {
  display: flex;
  opacity: .65;
  /* poco visibile */
}

#lang-switch:hover {
  opacity: .85;
  /* leggermente più visibile su hover */
}

#lang-switch .lang {
  min-width: 38px;
  height: 28px;
  padding: 0 8px;

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  color: #fff;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;

  cursor: pointer;
  filter: none;
  opacity: 1;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

#lang-switch .lang:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
}

#lang-switch .lang.active {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.55);
}

#hover-name,
#hover-info {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  opacity: 0;
  transition: opacity .35s ease;
  /* <— più lento di prima */
  pointer-events: none;
  z-index: 9;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45));
  user-select: none;
  will-change: opacity, transform;
}

#hover-name { width: clamp(150px, 26vmin, 320px); } 
#hover-info { width: clamp(300px, 34vmin, 640px); }