/* Le classi dell'aspetto: colore, ombra, movimento per pezzo.
   ------------------------------------------------------------
   Le superfici non sono qui: .plate, .plate-quiet, .plate-brand,
   .plate-a1 e .plate-a2 stanno gia' nel tema e portano con se' il
   colore del testo giusto. Qui manca solo la carta bianca, che come
   superficie di un pezzo il tema non aveva. */

.su-carta {
  background: var(--paper);
  color: var(--ink);
  /* Chi si dipinge addosso una superficie chiara deve dichiararla,
     altrimenti dentro una fascia a tinta piena eredita i ruoli della
     fascia e scrive bianco su bianco. E' successo. */
  --surface: var(--paper);
  --on-surface: var(--ink);
  --evidenza: var(--evidenza-carta);
}

/* LA SCELTA DELL'UTENTE DEVE VINCERE SUL COMPONENTE.
   ------------------------------------------------------------
   Ogni pezzo ha gia' un fondo suo: `.card-alta` usa --card-superficie,
   `.corso` usa --paper. Quelle regole hanno la stessa specificita' di
   `.plate` e stanno piu' in basso nel foglio, quindi vincevano: si
   sceglieva «colore della divisione» e la carta restava trasparente.

   L'attributo piu' la classe fanno due punti di specificita' contro
   uno, e vale sia in pagina sia nell'editor perche' la classe
   `wp-block-maqer-…` c'e' in tutti e due. */

[class*="wp-block-maqer-"].plate {
  background: var(--surface);
  color: var(--on-surface);
}

/* La velata non passa da --surface: nel tema e' `background: var(--paper-2)`
   scritto diretto. Senza questa riga la regola qui sopra la batteva e la
   carta velata usciva bianca, indistinguibile dalla carta. */
[class*="wp-block-maqer-"].plate-quiet {
  background: var(--paper-2);
  color: var(--ink);
}

[class*="wp-block-maqer-"].su-carta {
  background: var(--paper);
  color: var(--ink);
}

/* SOLO IL COLORE, NON LA FORMA.
   ------------------------------------------------------------
   Qui c'era anche `border-radius: var(--r-5)`. Scegliendo un colore il
   pezzo cambiava anche gli angoli, e chi lo faceva non aveva chiesto
   quello: aveva chiesto un colore. Tolto.

   L'imbottitura resta, perche' non e' una scelta di forma ma una
   conseguenza: senza, il colore tocca le lettere e il testo diventa
   illeggibile contro il bordo. E' l'unica cosa che una superficie
   porta con se', ed e' il minimo che serve. */
[class*="wp-block-maqer-"].su-carta,
[class*="wp-block-maqer-"].plate {
  padding: var(--sp-5);
}

/* ---------- Le ombre ----------
   Due gradini, non dieci: fra --shadow-1 e --shadow-2 la differenza si
   vede, fra i valori intermedi no. */

.ombra-posata { box-shadow: var(--shadow-1); }

.ombra-sollevata {
  box-shadow: var(--shadow-2);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ombra-sollevata:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
}

/* ---------- Il movimento ----------
   `entra-salendo` e `entra-apparendo` fanno la stessa cosa di
   [data-anim], che movimento.js accende quando l'elemento entra nello
   schermo. `senza-movimento` vince su tutto, compreso l'ereditato
   dalla fascia. */

.entra-salendo,
.entra-apparendo,
.entra-scendendo,
.entra-da-sinistra,
.entra-da-destra,
.entra-scala { opacity: 0; }

.entra-salendo     { transform: translateY(22px); }
.entra-scendendo   { transform: translateY(-22px); }
.entra-da-sinistra { transform: translateX(-34px); }
.entra-da-destra   { transform: translateX(34px); }
.entra-scala       { transform: scale(0.92); }

.entra-salendo.is-in,
.entra-apparendo.is-in,
.entra-scendendo.is-in,
.entra-da-sinistra.is-in,
.entra-da-destra.is-in,
.entra-scala.is-in {
  opacity: 1;
  transform: none;
  /* La durata e' una variabile: il menu «Velocità» del pezzo cambia --dur
     e con essa la velocita' di questa entrata. Senza scelta, 640ms. */
  transition: opacity var(--dur, 640ms) cubic-bezier(0.22, 1, 0.36, 1),
              transform var(--dur, 640ms) cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
}

/* La velocita': cambia solo --dur, cioe' la durata dell'entrata di QUESTO
   pezzo. Vale per ogni tipo di entrata e anche per il reveal di default. */
.vel-lenta       { --dur: 1050ms; }
.vel-lentissima  { --dur: 1500ms; }
.vel-veloce      { --dur: 340ms; }
.vel-velocissima { --dur: 180ms; }

/* Fermo vuol dire fermo: batte anche l'entrata che la fascia da' ai
   suoi figli, e per questo ha !important. E' l'unico posto del foglio
   in cui ce n'e' uno. */
.senza-movimento,
.anima-figli > .senza-movimento {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .entra-salendo,
  .entra-apparendo,
  .entra-scendendo,
  .entra-da-sinistra,
  .entra-da-destra,
  .entra-scala {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .ombra-sollevata { transition: none; }
  .ombra-sollevata:hover { transform: none; }
}

/* ---------- Dentro l'editor ----------
   Il movimento in entrata nasconde l'elemento finche' non entra nello
   schermo, e in pagina lo riaccende movimento.js. Nell'editor quel
   file non gira: scegliendo «sale entrando» la carta spariva, e
   sembrava che il comando l'avesse cancellata.

   Qui il movimento si sceglie, si salva, ma non si esegue: quello che
   si monta si deve vedere sempre. */

.editor-styles-wrapper .entra-salendo,
.editor-styles-wrapper .entra-apparendo,
.editor-styles-wrapper .entra-scendendo,
.editor-styles-wrapper .entra-da-sinistra,
.editor-styles-wrapper .entra-da-destra,
.editor-styles-wrapper .entra-scala,
.editor-styles-wrapper .anima-figli > *,
.editor-styles-wrapper [data-anim] {
  opacity: 1;
  transform: none;
  transition: none;
}


/* Il quarto colore: il giallo delle segnalazioni.
   Il tema ha gia' `.plate-flag`, che porta il testo nero perche' il
   giallo e' chiaro. Serve la stessa precedenza delle altre superfici,
   altrimenti il fondo del componente vince sulla scelta. */
[class*="wp-block-maqer-"].plate-flag {
  background: var(--accent-flag);
  color: var(--ink);
}