/* plikoo.it, pagina d'attesa: solo il logo e «coming soon». Colori e carattere dal marchio
   (presentazione/marchio-plikoo/LEGGIMI.md). Il carattere è ridotto alle lettere di «coming soon». */

@font-face {
  font-family: "Outfit";
  src: url("/fonts/outfit-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --fondo: #F5F8F6;   /* Carta */
  --lettere: #0B2B33; /* Inchiostro */
  --sorriso: #00B38A; /* Fatto */
  --testo: #0B2B33;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0B2B33;
    --lettere: #FFFFFF;
    --testo: #D6F5EC; /* Menta */
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--fondo);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Tutto al centro, un filo sopra la metà dello schermo. */
.scena {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 6vw, 3.5rem);
  padding: 3rem 1rem 4.5rem;
}

.marchio {
  margin: 0;
  line-height: 0;
}

.logo {
  display: block;
  width: clamp(12rem, 56vw, 30rem);
  height: auto;
  overflow: visible;
}

.lettere {
  fill: var(--lettere);
}

.sorriso {
  fill: var(--sorriso);
}

.presto {
  margin: 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.375rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.015em;
}

/* Un solo movimento: all'apertura il sorriso si allarga dal centro, poi compare la scritta. */
@media (prefers-reduced-motion: no-preference) {
  .sorriso {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    animation: sorride 900ms cubic-bezier(0.22, 1, 0.36, 1) 450ms both;
  }

  .presto {
    animation: compare 700ms ease-out 1150ms both;
  }
}

@keyframes sorride {
  from {
    transform: scale(0.18, 0.4);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes compare {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}