/* Logo Avellissimo: lettere separate in stile "retro lucido" (grasse, lucide, con spessore a
   strati). Ogni lettera può gonfiarsi e diventare "gomma" o "nuvola", o colorare lo spessore a
   fasce (anni '70). Solo testo e CSS: le animazioni muovono transform, colori e ombre. */

/* font nel progetto (Google Fonts, licenza SIL OFL), solo caratteri latini: niente internet */
@font-face { font-family: 'Bagel Fat One'; font-display: block; src: url('/fonts/BagelFatOne-latin.woff2') format('woff2'); }
@font-face { font-family: 'Modak'; font-display: block; src: url('/fonts/Modak-latin.woff2') format('woff2'); }
.avellissimo {
  display: flex; align-items: center; justify-content: center; line-height: 1;
  font-family: 'Bagel Fat One', system-ui, sans-serif; letter-spacing: -.03em;
  user-select: none; -webkit-user-select: none; cursor: pointer;
  transform: scale(var(--k, 1)); transition: transform .3s ease-out;
}

/* lettera base: colore --c, contorno --o, spessore a tre fasce --a --b --d (di norma = contorno) */
.avellissimo .l {
  --c: #ffa51e; --o: #0f2236;
  display: inline-block; position: relative; font-size: calc(1em * var(--s, 1)); transform-origin: 50% 70%;
  color: var(--c); -webkit-text-stroke: .04em var(--o); paint-order: stroke fill;
  text-shadow: .02em .025em 0 var(--a, var(--o)), .04em .05em 0 var(--a, var(--o)), .06em .075em 0 var(--b, var(--o)),
    .08em .1em 0 var(--b, var(--o)), .1em .125em 0 var(--d, var(--o)), .115em .145em 0 var(--o);
  transition: color .45s, text-shadow .55s;
}
/* riflesso lucido: la stessa lettera, bianca sfumata, solo nella parte alta */
.avellissimo .l::after {
  content: attr(data-c); position: absolute; inset: 0; -webkit-text-stroke: 0; text-shadow: none; color: transparent;
  background: linear-gradient(180deg, #fffa 0 26%, #fff0 44%); -webkit-background-clip: text; background-clip: text;
}

/* gonfia: gomma (contorno scuro e spessore sotto) e nuvola (doppio contorno bianco e scuro).
   Stesso numero di ombre della base, così il passaggio è una transizione */
.avellissimo .l.gomma, .avellissimo .l.nuvola { font-family: 'Modak', system-ui, sans-serif; font-size: calc(1.27em * var(--s, 1)); margin: 0 -.025em; }
.avellissimo .l.gomma {
  color: var(--cg, #ff2d87); -webkit-text-stroke: .07em var(--o);
  text-shadow: 0 .03em 0 var(--o), 0 .06em 0 var(--o), 0 .09em 0 var(--o), 0 .12em 0 var(--o), 0 .12em 0 var(--o), 0 .12em 0 var(--o);
}
.avellissimo .l.nuvola {
  color: var(--cn, #c8f51e); -webkit-text-stroke: .12em #fff;
  text-shadow: .035em 0 0 var(--o), -.035em 0 0 var(--o), 0 -.035em 0 var(--o), .025em .045em 0 var(--o), -.025em .045em 0 var(--o), 0 .1em 0 var(--o);
}

/* movimenti */
.avellissimo .l.su { animation: avl-su .22s ease-in forwards; }
@keyframes avl-su { to { transform: scale(1.3, 1.22); } }
.avellissimo .l.assesta { animation: avl-assesta .55s ease-out; }
@keyframes avl-assesta { 0% { transform: scale(1.3, 1.22); } 45% { transform: scale(.9, .94); } 75% { transform: scale(1.05, 1.03); } 100% { transform: none; } }
.avellissimo.ola .l { animation: avl-gelatina .7s calc(var(--i) * 55ms) both; }
@keyframes avl-gelatina { 0%, 100% { transform: none; } 30% { transform: translateY(-.18em) scale(.9, 1.15); } 55% { transform: scale(1.15, .85); } 75% { transform: scale(.96, 1.04); } }
.avellissimo .l.scoppia { animation: avl-scoppia .75s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes avl-scoppia { 0% { transform: none; } 20% { transform: scale(1.35) rotate(6deg); } 35%, 60% { transform: scale(0); } 100% { transform: none; } }
.avellissimo .goccia { position: absolute; left: 50%; top: 50%; width: .14em; height: .14em; border-radius: 50%; pointer-events: none; animation: avl-goccia .6s ease-out forwards; }
@keyframes avl-goccia { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.avellissimo .l.nuova { animation: avl-entra .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.avellissimo .l.esce { animation: avl-entra .2s ease-in reverse both; }
@keyframes avl-entra { from { max-width: 0; transform: scale(0); } to { max-width: 1.4em; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .avellissimo .l, .avellissimo .l * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}