/* PaperParty — design system "Scarabocchio" (direzione 1a).
   Fonte di verità: WHODIS v1 - Flusso Completo.pdf + mock HTML.
   Carta + inchiostro fanno il 90% del lavoro. Il pomodoro è sacro:
   esce solo al reveal e sulla CTA più importante. */

/* ---- font (estratti dal mock, self-hosted: niente rete richiesta) ---- */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/shared/fonts/fredoka-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/shared/fonts/fredoka-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/shared/fonts/caveat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/shared/fonts/caveat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- palette + costanti ---- */
:root {
  --carta: #f6efdd;
  --carta-scura: #e3d8c1;
  --desk: #ece2cd;
  --inchiostro: #26211b;
  --tenue: #6b6153;
  --pomodoro: #ff5a4d;
  --pomodoro-scuro: #e0483c;
  --sole: #ffbe2e;
  --uva: #8a63f0;
  --menta: #1fae7a;
  --menta-carta: #eafff6;
  --menta-scura: #0f7a53;
  --rosa: #ff8fab;
  --cielo: #7fd1e8;
  --sabbia: #b7a888;
  --testo-2: #4a4238;

  --pop: cubic-bezier(.34, 1.56, .64, 1);   /* stamp-in */
  --swift: cubic-bezier(.7, 0, .3, 1);      /* cambi schermo */
  --t-tap: 120ms;
  --t-pop: 250ms;
  --t-screen: 400ms;

  --f-display: 'Fredoka', system-ui, sans-serif;
  --f-mano: 'Caveat', cursive;

  /* ombra "bolla di carta": base inchiostro, un solo alpha */
  --ombra-carta: 3px 3px 0 rgba(38, 33, 27, .2);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background-color: var(--carta);
  background-image: radial-gradient(rgba(38, 33, 27, .08) 1.4px, transparent 1.4px);
  background-size: 20px 20px;
  font-family: var(--f-display);
  color: var(--inchiostro);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--sole); color: var(--inchiostro); }

button {
  font-family: var(--f-display);
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
input, textarea {
  font-family: var(--f-display);
  color: var(--inchiostro);
}

/* ---- componenti ---- */

/* CTA principale: inchiostro, testo sole, ombra sabbia (il pomodoro resta al clou) */
.btn-cta {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--inchiostro);
  color: var(--sole);
  border-radius: 18px;
  padding: 18px 16px;
  font: 700 20px var(--f-display);
  box-shadow: 4px 4px 0 var(--sabbia);
  transition: transform var(--t-tap) var(--pop), box-shadow var(--t-tap) var(--pop);
}
.btn-cta:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--sabbia); }
.btn-cta:disabled,
.btn-clou:disabled,
.btn-ok:disabled {
  opacity: 1;
  background: var(--sabbia);
  color: var(--carta);
  box-shadow: 4px 4px 0 var(--carta-scura);
  cursor: default;
}
.btn-cta:disabled:active,
.btn-clou:disabled:active,
.btn-ok:disabled:active { transform: none; box-shadow: 4px 4px 0 var(--carta-scura); }

/* CTA "clou" (pomodoro pieno: solo per il momento più importante) */
.btn-clou {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--pomodoro);
  color: #fff;
  border: 3px solid var(--inchiostro);
  border-radius: 18px;
  padding: 15px;
  font: 700 20px var(--f-display);
  box-shadow: 4px 4px 0 var(--inchiostro);
  transition: transform var(--t-tap) var(--pop), box-shadow var(--t-tap) var(--pop);
}
.btn-clou:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--inchiostro); }

.btn-ok {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--menta);
  color: #fff;
  border: 3px solid var(--inchiostro);
  border-radius: 18px;
  padding: 15px;
  font: 700 20px var(--f-display);
  box-shadow: 4px 4px 0 var(--inchiostro);
}
.btn-ok:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--inchiostro); }

/* card bianca bordo marker */
.card {
  background: #fff;
  border: 2.5px solid var(--inchiostro);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--inchiostro);
}

.pill {
  display: inline-block;
  background: #fff;
  border: 2.5px solid var(--inchiostro);
  border-radius: 30px;
  padding: 2px 10px;
  font: 600 13px var(--f-display);
}
.pill-sole { background: var(--sole); }

.mano { font-family: var(--f-mano); color: var(--tenue); }

/* nota-spec tratteggiata */
.dashed { border: 1.5px dashed var(--sabbia); border-radius: 7px; }

/* ---- motion: tutto timbra come un adesivo ---- */

@keyframes stampIn {
  0% { transform: scale(1.08) rotate(var(--stamp-rot, 2deg)); opacity: 0; }
  100% { transform: scale(1) rotate(var(--rot, 0deg)); opacity: 1; }
}
.stamp-in { animation: stampIn var(--t-pop) var(--pop) both; }
.no-anim { animation: none !important; }

@keyframes stampInBig {
  0% { transform: scale(1.3) rotate(-3deg); opacity: 0; }
  100% { transform: scale(1) rotate(-3deg); opacity: 1; }
}

@keyframes whobob {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-7px) rotate(var(--rot, 0deg)); }
}
@keyframes whoshake {
  0%, 100% { transform: translateX(0) rotate(-1deg); }
  25% { transform: translateX(-3px) rotate(-2.5deg); }
  75% { transform: translateX(3px) rotate(.5deg); }
}
@keyframes boing {
  0% { transform: scale(.2) rotate(var(--rot, -3deg)); }
  55% { transform: scale(1.18) rotate(var(--rot, -3deg)); }
  75% { transform: scale(.94) rotate(var(--rot, -3deg)); }
  100% { transform: scale(1) rotate(var(--rot, -3deg)); }
}
@keyframes flashWhite {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes coinFly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(var(--fly-x, 200px), var(--fly-y, -160px)) scale(.5); opacity: 0; }
}
@keyframes sweepIn {
  0% { transform: translateX(-105%) skewX(-8deg); }
  100% { transform: translateX(-30%) skewX(-8deg); }
}
@keyframes fadeUp {
  0% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.bob { animation: whobob 1.8s ease-in-out infinite; }

/* screenchange: la vista entra con un mini-stamp */
.screen { animation: fadeUp var(--t-screen) var(--swift) both; }

@media (prefers-reduced-motion: reduce) {
  /* shake → cross-fade, coin-fly → comparsa netta; i tempi restano */
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .keep-motion, .keep-motion * { animation-duration: revert !important; animation-iteration-count: revert !important; }
  /* ma i trigger vestibolari veri restano spenti anche nel reveal */
  .keep-motion .shaking { animation: none !important; }
  .keep-motion .rv-flash.go { animation: none !important; opacity: 0 !important; }
  .keep-motion .rv-coin { display: none !important; }
}

/* ---- utility ---- */
.hidden { display: none !important; }
.center { text-align: center; }