/* Maxischermo: tutto in unità del viewport, così vale per TV, proiettori e ledwall di ogni proporzione.
   Colori e carattere arrivano dal tema; i colori fissi qui sotto valgono solo per abbinamento e collegamento. */
:root {
  --bg: #0f0d0b;
  --text: #f8f4ec;
  --accent: #F27329;
  --font: system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); }
#app { position: fixed; inset: 0; }
.stage { --bar: 0px; position: absolute; inset: 0; background: var(--bg) center / cover no-repeat; display: grid; place-items: center; }
/* barra in basso con logo della sagra e marchio: tutto il resto le lascia lo spazio */
.stage.has-bar { --bar: 14vmin; }

/* abbinamento */
.pair { position: absolute; inset: 0; display: grid; place-content: center; gap: 2vmin; text-align: center; padding: 4vmin; font-size: clamp(16px, 2.6vmin, 40px); }
.pair h1 { font-size: 2.4em; margin: 0; }
.pair input { font: 700 2.4em/1 ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: .3em; text-align: center; padding: .3em .2em .3em .5em; width: 7.5em; margin: 0 auto; border-radius: .3em; border: 0; box-shadow: inset 0 0 0 2px #333; background: #1c1916; color: inherit; }
.pair input:focus { outline: none; box-shadow: inset 0 0 0 3px #F27329, 0 0 0 .3em color-mix(in oklab, #F27329 22%, transparent); }
.pair button { font: inherit; font-weight: 600; padding: .6em 1.4em; border: 0; border-radius: 999px; background: #F27329; color: #1A1206; cursor: pointer; justify-self: center; }
.pair button:focus-visible { outline: .12em solid #F27329; outline-offset: .15em; }
.pair b { color: #F27329; }
.pair-error { color: #F79A80; min-height: 1.4em; margin: 0; }

/* attesa e chiuso */
.idle { position: absolute; inset: 0 0 var(--bar); display: grid; place-items: center; padding: 4vmin; transition: opacity .5s; }
.stage.showing .idle, .stage.ad-playing .idle { opacity: 0; }
.waiting { display: flex; align-items: center; justify-content: center; gap: 6vmin; width: 100%; height: 100%; }
.invite { max-width: 48vw; }
.invite h1 { font-size: 5vmin; margin: 0 0 2vmin; color: var(--accent); }
.big { font-size: 7vmin; line-height: 1.1; font-weight: 800; margin: 0; }
.logo { max-height: 18vmin; max-width: 40vw; margin-bottom: 3vmin; }
a.qr { display: block; cursor: pointer; }
.qr { width: 62vmin; aspect-ratio: 1; background: #fff; padding: 1.2vmin; border-radius: 2vmin; flex: none; }
.qr svg { width: 100%; height: 100%; display: block; }
/* rete caduta: il QR scaduto non si mostra, chi lo scansionasse troverebbe un errore */
.qr.lost { display: grid; place-items: center; background: #1c1916; color: var(--text); box-shadow: inset 0 0 0 .4vmin #F2522E; text-align: center; }
.qr.lost p { font-size: 4.4vmin; font-weight: 700; margin: 0; padding: 4vmin; }
.closed { text-align: center; }
.closed h1 { font-size: 5vmin; color: var(--accent); margin: 0 0 2vmin; }
.closed p { font-size: 3.4vmin; margin: 1vmin 0; }
.closed .big { font-size: 12vmin; }
.hint { font-size: 3vmin; opacity: .7; }

/* verticale: QR sotto al testo */
@media (max-aspect-ratio: 1/1) {
  .waiting { flex-direction: column; text-align: center; }
  .invite { max-width: 90vw; }
  .qr { width: 70vmin; }
}
/* ledwall molto larghi e bassi */
@media (min-aspect-ratio: 3/1) {
  .invite h1 { font-size: 9vh; }
  .big { font-size: 13vh; }
  .qr { width: calc(86vh - var(--bar)); }
  .stage.has-bar { --bar: 18vh; }
}

/* QR in angolo durante le foto */
.corner-qr { position: absolute; right: 2vmin; bottom: 2vmin; width: 15vmin; aspect-ratio: 1; background: #fff; padding: .6vmin; border-radius: 1vmin; opacity: 0; transition: opacity .4s; z-index: 5; }
.corner-qr:empty { display: none; }
.stage.showing .corner-qr, .stage.ad-playing .corner-qr { opacity: 1; }
.corner-qr svg { width: 100%; height: 100%; display: block; }

.status { position: absolute; left: 1.2vmin; top: 1.2vmin; width: 1.2vmin; height: 1.2vmin; border-radius: 50%; z-index: 6; }
.status.on { background: #6DA0A6; opacity: .35; }
/* unico ciclo infinito ammesso: segnala un guasto, non decora */
.status.off { background: #F2522E; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* logo della sagra al centro, marchio a sinistra: sempre sopra, anche a foto e pubblicità in onda */
.brandbar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--bar); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2vmin; padding: 1.6vmin 2.4vmin; z-index: 7; pointer-events: none; }
.brandbar:empty { display: none; }
.brandbar .sagra { max-height: calc(var(--bar) - 3.2vmin); max-width: 46vw; object-fit: contain; filter: drop-shadow(0 .3vmin .8vmin rgba(0, 0, 0, .6)); }
.brand { justify-self: start; display: flex; align-items: center; gap: 1.2vmin; padding: .8vmin 2vmin .8vmin 1vmin; border-radius: 999px; background: rgba(15, 13, 11, .62); color: #f8f4ec; font: 800 3.4vmin/1 system-ui, sans-serif; white-space: nowrap; }
.brand img { height: 6.4vmin; width: auto; }
.brand b { color: #F27329; }

/* pubblicità degli sponsor */
.ad { position: absolute; inset: 0 0 var(--bar); display: grid; place-items: center; z-index: 4; padding: 3vmin; animation: fade-in .5s ease-out both; }
.ad img, .ad video { width: 100%; height: 100%; object-fit: contain; display: block; }
.ad.leaving { animation: leave .5s ease-in both; }

/* foto in onda */
.on-air { position: absolute; inset: 0 0 var(--bar); display: grid; place-items: center; z-index: 4; }
.card {
  --aspect: 1;
  --tilt: 0deg;
  position: relative;
  aspect-ratio: var(--aspect);
  width: min(90vw, calc((86vh - var(--bar)) * var(--aspect)));
  transform: rotate(var(--tilt));
  filter: drop-shadow(0 2vmin 4vmin rgba(0, 0, 0, .55));
}
.hole { position: absolute; overflow: hidden; }
.hole.oval { border-radius: 50%; }
.hole img.photo { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.card img.frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.card:not(:has(img.frame)) .hole { inset: 0; border-radius: 1vmin; }

/* transizioni di base: ingresso */
.enter-fade { animation: fade-in .7s ease-out both; }
.enter-slide { animation: slide-in .8s cubic-bezier(.2, .9, .3, 1.2) both; }
.enter-zoom { animation: zoom-in .7s cubic-bezier(.2, .9, .3, 1.3) both; }
.enter-drop { animation: drop-in 1s cubic-bezier(.3, 1.3, .5, 1) both; }
.enter-flip { animation: flip-in .9s ease-out both; }
.enter-swing { animation: swing-in 1.1s ease-out both; transform-origin: 50% 0; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateY(110vh) rotate(calc(var(--tilt) * -3)); } }
@keyframes zoom-in { from { transform: scale(.2) rotate(var(--tilt)); opacity: 0; } }
@keyframes drop-in { from { transform: translateY(-120vh) rotate(calc(var(--tilt) + 25deg)); } }
@keyframes flip-in { from { transform: perspective(200vmin) rotateY(90deg) rotate(var(--tilt)); opacity: 0; } }
@keyframes swing-in {
  0% { transform: rotate(calc(var(--tilt) - 35deg)) translateY(-40vh); opacity: 0; }
  40% { transform: rotate(calc(var(--tilt) + 12deg)); opacity: 1; }
  70% { transform: rotate(calc(var(--tilt) - 5deg)); }
}
/* sviluppo: la foto affiora come una polaroid */
.enter-develop { animation: fade-in .5s ease-out both; }
.enter-develop .hole img.photo { animation: develop 3.2s ease-out both; }
@keyframes develop {
  0% { filter: brightness(3) contrast(.1) sepia(1) blur(2px); }
  60% { filter: brightness(1.3) contrast(.8) sepia(.4); }
  100% { filter: none; }
}
/* molletta: cade sul filo e oscilla */
.enter-pin { transform-origin: 50% -4vmin; animation: pin-drop 1.6s cubic-bezier(.3, 1.4, .5, 1) both; }
.enter-pin::before {
  content: ""; position: absolute; z-index: 2; left: 50%; top: -6vmin; width: 4vmin; height: 9vmin; margin-left: -2vmin;
  border-radius: .6vmin; background: linear-gradient(90deg, #b8875a, #e2b98a 45%, #a5744a); box-shadow: 0 .4vmin .8vmin #0008;
}
@keyframes pin-drop {
  0% { transform: translateY(-110vh) rotate(var(--tilt)); }
  45% { transform: translateY(0) rotate(calc(var(--tilt) + 9deg)); }
  65% { transform: rotate(calc(var(--tilt) - 6deg)); }
  82% { transform: rotate(calc(var(--tilt) + 3deg)); }
  100% { transform: rotate(var(--tilt)); }
}
/* uscita */
.on-air.leaving { animation: leave .6s ease-in both; }
@keyframes leave { to { opacity: 0; transform: scale(.9); } }

@media (prefers-reduced-motion: reduce) {
  .card, .on-air.leaving, .ad, .ad.leaving { animation-duration: .01s !important; }
}