/* apri.re — LINEA B "China", LA VERSIONE UFFICIALE.
   Carta chiara, una card bianca, inchiostro nero: come le illustrazioni a
   china delle ispirazioni. Tipografia grossa (Bricolage Grotesque), scritte
   a mano (Caveat) nella scena. Il bianco e nero è la regola; il colore
   compare solo per dire "libero" o "errore". */

@font-face {
  font-family: "Bricolage";
  src: url("fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
}

:root {
  color-scheme: light dark;
  --terra: #F2EFEA;
  --carta-b: #FFFFFF;
  --china: #141414;
  --grigio: #8A8782;
  --linea: #E4E0D9;
  --verde: #1F8A4C;
  --rosso: #D9483B;
  --ombra: rgba(40, 30, 10, .18);
  --morbido: cubic-bezier(.2, .8, .2, 1);
  --molla: cubic-bezier(.3, 1.4, .4, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --terra: #151412; --carta-b: #1E1C19; --china: #F3F0EA; --grigio: #9A968F; --linea: #35322D; --ombra: rgba(0, 0, 0, .5);
  }
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; min-height: 100svh;
  display: grid; place-items: center;
  background: var(--terra); color: var(--china);
  font-family: "Bricolage", -apple-system, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 3vh 16px;
}

/* ---------- la card ---------- */

.carta {
  width: 100%; max-width: 800px;
  background: var(--carta-b);
  border-radius: 28px;
  padding: 30px 40px 26px;
  box-shadow: 0 40px 90px -50px var(--ombra);
  animation: sali .7s var(--morbido) both;
}
@keyframes sali { from { opacity: 0; transform: translateY(16px); } }

.testata { display: flex; justify-content: space-between; align-items: baseline; }
.marchio { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: inherit; text-decoration: none; }
.marchio b { font-weight: 800; }
.archivio { font-size: 14px; font-weight: 600; color: var(--grigio); text-decoration: none; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.archivio:hover { color: var(--china); border-color: var(--china); }

/* ---------- la scena (le regole della scena raster stanno in fondo al file) ---------- */

.scena { margin: 6px 0 4px; }
@keyframes taglia {
  0%   { opacity: 0; transform: rotate(-14deg) scale(.9); }
  25%  { opacity: 1; transform: rotate(10deg); }
  50%  { transform: rotate(-10deg); }
  100% { opacity: 0; transform: rotate(0) translateY(-8px); }
}

/* ---------- i campi ---------- */

form { margin-top: 10px; }
.blocco { margin-bottom: 16px; }
.campo { position: relative; display: flex; flex-direction: column; }
.campo label {
  order: -1; margin: 0 0 8px 2px;
  font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  transition: color .2s;
}
.campo label small { font-weight: 500; color: var(--grigio); font-size: 13px; }
.campo input {
  width: 100%; height: 56px;
  padding: 0 16px;
  border: 2px solid var(--china); border-radius: 14px;
  background: var(--carta-b); color: inherit;
  font: inherit; font-size: 17px; font-weight: 500;
  outline: none;
  transition: transform .18s var(--morbido), box-shadow .18s var(--morbido), border-color .2s, opacity .25s;
}
.campo input::placeholder { color: var(--grigio); opacity: .7; }
.campo input:focus { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--china); }
.campo input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--carta-b) inset; -webkit-text-fill-color: var(--china); }
.blocco.errore .campo input { border-color: var(--rosso); box-shadow: 4px 4px 0 var(--rosso); transform: translate(-2px, -2px); }
.blocco.errore .campo label { color: var(--rosso); }
.campo.scuoti { animation: scuoti .42s var(--morbido); }
@keyframes scuoti { 15%, 85% { transform: translateX(-2px); } 30%, 70% { transform: translateX(4px); } 45%, 55% { transform: translateX(-5px); } }

.dominio {
  position: absolute; right: 14px; bottom: 18px;
  font-size: 13px; font-weight: 600; color: var(--grigio);
  max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .25s var(--morbido);
  pointer-events: none;
}
.dominio::before { content: "→ "; }
.campo.ok .dominio { opacity: 1; transform: none; }
.campo.ok input { padding-right: 44%; }

.campo-alias { --wp: 66px; }
.prefisso { position: absolute; left: 16px; bottom: 18px; font-size: 17px; font-weight: 500; color: var(--grigio); pointer-events: none; }
.campo-alias input { padding-left: calc(16px + var(--wp) + 2px); }
.esito {
  position: absolute; right: 14px; bottom: 19px;
  display: flex; align-items: center; gap: 7px;
  font-family: "Caveat", cursive; font-size: 19px; font-weight: 700; color: var(--grigio);
  opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .25s var(--morbido);
}
.pallino { width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; }
.campo-alias[data-esito] .esito { opacity: 1; transform: none; }
.campo-alias[data-esito="libero"] .esito { color: var(--verde); }
.campo-alias[data-esito="libero"] .pallino { background: var(--verde); border-color: var(--verde); }
.campo-alias[data-esito="occupato"] .esito, .campo-alias[data-esito="riservato"] .esito { color: var(--rosso); }

.aiuto {
  margin: 0; padding: 0 4px; height: 0; overflow: hidden;
  font-size: 14px; font-weight: 500; line-height: 18px; color: var(--rosso);
  opacity: 0; transition: height .25s var(--morbido), opacity .2s, padding .25s;
}
.blocco.errore .aiuto { height: 26px; padding-top: 8px; opacity: 1; }

.riga-alias { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--morbido), opacity .3s; }
.riga-alias .interno { min-height: 0; overflow: hidden; padding: 4px; margin: -4px; }
form.pronto .riga-alias { grid-template-rows: 0fr; opacity: 0; }

/* ---------- il bottone (pillola nera) ---------- */

.azione { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.crea {
  position: relative; display: inline-block; min-width: 200px; height: 56px; padding: 0 30px;
  border: 2px solid var(--china); border-radius: 999px;
  background: var(--china); color: var(--carta-b);
  font: inherit; font-size: 17px; font-weight: 700; line-height: 52px; text-align: center; text-decoration: none;
  cursor: pointer; overflow: hidden;
  transition: transform .18s var(--morbido), box-shadow .18s var(--morbido);
}
.crea:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--grigio); }
.crea:active { transform: none; box-shadow: none; }
.crea:focus-visible { outline: 3px solid var(--grigio); outline-offset: 3px; }
.crea.riservato { background: transparent; color: var(--china); }
.etichetta { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .2s, transform .3s var(--morbido); }
.freccia { font-style: normal; display: inline-block; transition: transform .2s var(--morbido); }
.crea:hover .freccia { transform: translateX(4px); }
.e-copia, .e-copiato { opacity: 0; transform: translateY(10px); }
.crea.attesa .etichetta { opacity: 0; transform: translateY(-8px); }
.anello { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2.5px solid rgba(128,128,128,.4); border-top-color: currentColor; border-radius: 50%; opacity: 0; transition: opacity .2s; }
.crea.attesa .anello { opacity: 1; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
form.pronto .e-crea { opacity: 0; transform: translateY(-10px); }
form.pronto .e-copia { opacity: 1; transform: none; }
form.pronto .crea.copiato .e-copia { opacity: 0; transform: translateY(-10px); }
form.pronto .crea.copiato .e-copiato { opacity: 1; transform: none; }
.spunta { stroke-dasharray: 24; stroke-dashoffset: 24; }
.crea.copiato .spunta { animation: traccia .4s .1s var(--morbido) forwards; }
@keyframes traccia { to { stroke-dashoffset: 0; } }

/* ---------- il risultato: un timbro ---------- */

.risultato {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  display: flex; align-items: center; padding: 0 16px;
  border: 2px dashed var(--china); border-radius: 14px;
  opacity: 0; transform: scale(1.06); pointer-events: none; cursor: copy;
  transition: opacity .25s ease .15s, transform .5s var(--molla) .15s;
}
.corto { display: flex; align-items: baseline; font-size: 26px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.corto .dom { color: var(--grigio); font-weight: 500; }
.corto .codice span { display: inline-block; opacity: 0; animation: timbra .35s var(--molla) forwards; }
@keyframes timbra { from { opacity: 0; transform: translateY(6px) scale(1.3); } to { opacity: 1; transform: none; } }
form.pronto .campo-url input { opacity: 0; }
form.pronto .campo-url .dominio { opacity: 0; }
form.pronto .campo-url .risultato { opacity: 1; transform: none; pointer-events: auto; }

.dopo {
  flex: 1 1 260px; min-width: 0; margin: 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-size: 14px; font-weight: 500; color: var(--grigio);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .3s ease .35s, transform .4s var(--morbido) .35s;
}
form.pronto .dopo { opacity: 1; transform: none; pointer-events: auto; }
.dopo .porta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dopo a { color: var(--china); text-decoration: none; }
.dopo .altro { flex: none; font-weight: 700; border-bottom: 2px solid var(--china); }

/* ---------- la nota ---------- */

.nota { margin-top: 26px; padding-top: 16px; border-top: 2px solid var(--linea); font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--grigio); }
.nota p { margin: 0 0 4px; }
.riga2 { display: flex; flex-wrap: wrap; column-gap: 6px; }
.riga2 span { opacity: .5; }
.nota a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.nota a:hover { color: var(--china); }

@media (max-width: 560px) {
  body { padding: 0; }
  .carta { border-radius: 0; min-height: 100svh; padding: 24px 22px 20px; box-shadow: none; }
  .marchio { font-size: 26px; }
  .campo.ok input { padding-right: 38%; }
  .corto { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
}


/* ---------- la scena generata da Codex, tagliata in quattro fasce ---------- */

.scena-raster { position: relative; margin: 6px 0 4px; height: var(--alt, 200px); overflow: hidden; }
.scena-raster .fila { display: flex; justify-content: flex-end; height: 100%; }
.scena-raster .pezzo {
  flex: none; height: 100%;
  background-image: var(--img); background-repeat: no-repeat;
  background-size: var(--w) auto; background-position-y: var(--y);
}
.scena-raster .tavola { position: absolute; inset: 0; }
.scena-raster .vento    { width: var(--lv); background-position-x: var(--pv); transition: opacity .3s; }
.scena-raster .sinistra { width: var(--ls); background-position-x: var(--ps); }
.scena-raster .mezzo    { width: var(--lm); background-position-x: var(--pm); transition: width .9s var(--molla); }
.scena-raster .destra   { width: var(--ld); background-position-x: var(--pd); }
body.aperto .scena-raster .mezzo { width: 0; }
body.aperto .scena-raster .vento { opacity: 0; }
/* ritocchi: posizioni in pixel dell'immagine originale, scalati con --k (px della figura per px dell'immagine).
   Le fasce sinistra e destra partono rispettivamente da x=190 e x=750 dell'immagine; la fascia verticale da y=280. */
.scena-raster .pezzo { position: relative; }
.ritocco { position: absolute; opacity: 0; transition: opacity .3s ease; }
body.aperto .ritocco { opacity: 1; transition-delay: .95s; }
.ritocco.sempre { opacity: 1; transition: none; }
.cartello { left: calc((1222 - 750) * 1px * var(--k)); top: calc((284 - 280) * 1px * var(--k)); width: calc(206px * var(--k)); height: calc(120px * var(--k)); }
.testata-x { justify-content: flex-end; }
.coda-toppa { left: calc((196 - 190) * 1px * var(--k)); top: calc((592 - 280) * 1px * var(--k)); width: calc(52px * var(--k)); height: calc(60px * var(--k)); background: #fff; transition: none; }
.coda-viva {
  left: calc((196 - 190) * 1px * var(--k)); top: calc((592 - 280) * 1px * var(--k)); width: calc(52px * var(--k)); height: calc(60px * var(--k));
  transition: none;
  background-image: var(--img); background-repeat: no-repeat; background-size: var(--w) auto;
  background-position: calc(-196px * var(--k)) calc(-592px * var(--k));
  transform-origin: 100% 100%;
}
body.aperto .coda-viva { animation: scodinzola-x .7s 1s ease-in-out infinite; }
@keyframes scodinzola-x { 0% { transform: rotate(0); } 25% { transform: rotate(13deg); } 75% { transform: rotate(-11deg); } 100% { transform: rotate(0); } }
.goccia-toppa { left: calc((1004 - 750) * 1px * var(--k)); top: calc((343 - 280) * 1px * var(--k)); width: calc(34px * var(--k)); height: calc(41px * var(--k)); }
.sorriso { left: calc((1060 - 750) * 1px * var(--k)); top: calc((404 - 280) * 1px * var(--k)); width: calc(28px * var(--k)); height: calc(20px * var(--k)); }
.lingua { left: calc((858 - 750) * 1px * var(--k)); top: calc((668 - 280) * 1px * var(--k)); width: calc(24px * var(--k)); height: calc(22px * var(--k)); }
.scena-raster .forbici-raster {
  position: absolute; left: calc(var(--taglio) - 24px); top: var(--taglio-y); width: 48px; height: 52px;
  fill: none; stroke: var(--china); stroke-width: 2.4; stroke-linecap: round;
  opacity: 0; transform-origin: 24px 26px;
}
.scena-raster .forbici-raster circle { fill: var(--carta-b); }
body.aperto .scena-raster .forbici-raster { animation: taglia .8s ease forwards; }
.dida-raster { position: absolute; top: var(--dida-y); font-family: "Caveat", cursive; font-size: 21px; font-weight: 600; color: var(--grigio); white-space: nowrap; transition: opacity .3s; }
.dida-raster.prima { left: var(--dida-x1); }
.dida-raster.dopo { left: var(--dida-x2); opacity: 0; }
body.aperto .dida-raster.prima { opacity: 0; }
body.aperto .dida-raster.dopo { opacity: 1; transition-delay: 1s; }
@media (prefers-color-scheme: dark) {
  :root { --carta-b: #1F1F1F; }                                   /* = il bianco della PNG dopo il filtro */
  .scena-raster .tavola { filter: invert(1) contrast(.76); }
}

/* la firma: skull pixel di AI or DIE, piccolo, in basso a destra */
.teschio, .nota a.teschio, .nota-pie a.teschio { display: inline-flex; margin-left: auto; padding-left: 14px; color: var(--china); text-decoration: none; line-height: 0; transition: transform .2s var(--morbido), opacity .2s; }
.teschio:hover, .nota a.teschio:hover, .nota-pie a.teschio:hover { color: var(--china); transform: translateY(-2px); opacity: .75; }
.teschio-svg { width: 22px; height: auto; display: block; }