/* =========================================================
   Polline — quizzettour.css
   Solo ciò che non può stare inline: keyframes e l'arco
   decorativo di sfondo. I token colore vengono da base.css.
   ========================================================= */

.qz-arc-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 900px;
  overflow: hidden;
  pointer-events: none;
}

.qz-arc {
  position: absolute;
  top: -300px;
  left: 50%;
  transform: translateX(-50%);
  width: 1600px;
  height: 840px;
  border-radius: 0 0 50% 50%;
  background: repeating-linear-gradient(180deg, var(--color-surface-soft) 0 46px, var(--color-surface-soft-alt) 46px 92px);
  opacity: 0.8;
}

@keyframes qz-in {
  from { opacity: 0; transform: translateY(20px) scale(0.975); }
  to   { opacity: 1; transform: none; }
}

@keyframes qz-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes qz-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* pulsanti con ombra piena: lo schiacciamento al click.
   Ogni pulsante dichiara il colore della propria ombra in --sh. */
.qz-btn { transition: transform 0.12s ease, box-shadow 0.12s ease; }
.qz-btn:hover  { transform: translateY(3px); box-shadow: 0 7px 0 0 var(--sh); }
.qz-btn:active { transform: translateY(8px); box-shadow: 0 2px 0 0 var(--sh); }
a.qz-btn { text-decoration: none; }

/* Indietro e "Rifai il Quizzettour" */
[data-act="back"]:hover, [data-act="restart"]:hover { border-color: var(--color-ink); }

@media (prefers-reduced-motion: reduce) {
  .qz-arc, [id="qz-app"] * { animation: none !important; transition: none !important; }
}