/* The block where you draw on skin (prova.js). Always dark: it is part of the night of the home, whatever the site's light. */
.prova {
  --bg: #0B0810; --ink: #EDE8FF; --muted: #A29EAE; --rule: #5A5468;
  background: var(--bg); color: var(--ink); padding-block: 52px 56px; overflow: hidden;
}
/* On a phone the column at the right holds the inks and stays free for the thumb: from there the page keeps scrolling. */
.prova-in {
  display: grid; gap: 16px 0; margin-inline: auto; max-width: calc(var(--maxw) + 2 * var(--gutter)); padding-left: var(--gutter);
  grid-template-columns: minmax(0, 560px) 68px; justify-content: start;
  grid-template-areas: "testa testa" "foglio inchiostri" "fondo .";
}
.prova-testa { grid-area: testa; display: flex; flex-direction: column; gap: 10px; padding-right: var(--gutter); }
.h-prova { --fs: 96; line-height: .86; }
.prova-invito { font-size: 17px; line-height: 1.4; max-width: 320px; text-wrap: pretty; }

.prova-foglio { grid-area: foglio; position: relative; aspect-ratio: 4 / 5; }
.prova-pelle { position: absolute; inset: 0; background: #2A150B; overflow: hidden; }
.prova-tela {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .3s;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.prova-tela.on { opacity: 1; }
/* The tip itself, the size it is on this skin. It rests where the hand is. */
.prova-punta {
  position: absolute; left: 0; top: 0; width: calc(100% * 8 / 267); aspect-ratio: 2 / 1; border-radius: 1px; pointer-events: none; opacity: 0;
  outline: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 0 0 1px rgba(11, 8, 16, .35);
}
.prova-punta.on { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .prova-tela { cursor: none; } }

.prova-inchiostri { grid-area: inchiostri; display: flex; flex-direction: column; gap: 12px; padding: 0 0 0 18px; }
.prova-inchiostri .sw-btn { width: 30px; height: 44px; }
.prova-fondo { grid-area: fondo; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 8px; }
.prova-fondo .btn-line { color: var(--ink); }

/* The sheet opens with the slant of the nib. Only when the page's motion is on, and once. */
html.m-on .prova-pelle { clip-path: polygon(0 0, 0 0, -56% 100%, -56% 100%); transition: clip-path .7s cubic-bezier(.2, .9, .1, 1); }
html.m-on .prova-foglio.vista .prova-pelle { clip-path: polygon(0 0, 156% 0, 100% 100%, -56% 100%); }
html.m-fermo .prova-pelle { clip-path: none; transition: none; }

@media (prefers-reduced-motion: reduce) { .prova-tela { transition: none; } }

/* Wide screens, and phones held sideways, where the sheet must not fill the screen: text at the left, sheet at the right, always whole on screen. */
@media (min-width: 900px), (min-width: 560px) and (min-aspect-ratio: 1 / 1) {
  .prova { padding-block: clamp(32px, 9vh, 84px); }
  .prova-in {
    padding-inline: var(--gutter); gap: 22px 48px; justify-content: space-between;
    grid-template-columns: minmax(0, 1fr) max(240px, min(600px, 46vw, calc((100vh - 150px) * .8)));
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: ". foglio" "testa foglio" "inchiostri foglio" "fondo foglio" ". foglio";
  }
  .prova-testa { padding-right: 0; gap: 16px; }
  .h-prova { --fs: 150; }
  .prova-invito { font-size: 18px; max-width: 380px; }
  .prova-inchiostri { flex-direction: row; gap: 18px; padding: 10px 0 0 12px; }
  .prova-inchiostri .sw-btn { width: 58px; height: 34px; }
  .prova-fondo { align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 18px; padding-left: 8px; }
}