/* ==========================================================================
   LOGO imDumb. — uguale su home, social, case study UI/UX e portfolio online
   "im" solo contorno, "Dumb" pieno, punto finale. Tutto bianco.
   Il font ha un nome suo, così non si scontra con quelli delle pagine.
   ========================================================================== */
@font-face{font-family:'Logo Pirata';font-weight:400;font-display:block;src:url(../fonts/pirata-one-400-latin.woff2) format('woff2')}

a.logo-dumb{
  display:inline-block;gap:0;
  font-family:'Logo Pirata','Pirata One',serif;font-weight:400;
  font-size:32px;line-height:1;letter-spacing:.01em;
  color:#fff;text-decoration:none;white-space:nowrap;
  border:0;
}
a.logo-dumb:hover,a.logo-dumb:focus{color:#fff;text-decoration:none;border:0}

/* hover "colata": il colore sale da sotto come un liquido, con l'onda in superficie.
   "im" si riempie di bianco, "Dumb." di rosso come la favicon.
   --liv è il livello del liquido (0 vuoto, 1 pieno); l'onda scorre animando la posizione. */
@property --liv{syntax:'<number>';inherits:true;initial-value:0}

a.logo-dumb .logo-dumb__im,
a.logo-dumb .logo-dumb__dumb{
  display:inline-block;
  /* riquadro più alto del glifo: gli svolazzi di Pirata escono dalla riga */
  padding:.2em 0;margin:-.2em 0;
  color:transparent;
  -webkit-background-clip:text;background-clip:text;
  background-repeat:repeat-x,no-repeat;
  background-size:.7em .16em,100% 100%;
  background-position:0 calc((1 - var(--liv,0)) * 1.25em - .02em),0 0;
  transition:--liv .42s cubic-bezier(.5,0,.2,1.2);
}
a.logo-dumb .logo-dumb__im{
  -webkit-text-stroke:1.1px #fff;
  margin-right:.04em;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8V4c5-4 10-4 15 0s10 4 15 0 7-3 10-1v5z' fill='%23ffffff'/%3E%3C/svg%3E"),
    linear-gradient(to top,#fff calc(var(--liv,0) * 100%),transparent calc(var(--liv,0) * 100%));
}
a.logo-dumb .logo-dumb__dumb{
  transition-delay:.05s;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8V4c5-4 10-4 15 0s10 4 15 0 7-3 10-1v5z' fill='%23ff0000'/%3E%3C/svg%3E"),
    linear-gradient(to top,#ff0000 calc(var(--liv,0) * 100%),#fff calc(var(--liv,0) * 100%));
}
a.logo-dumb:hover .logo-dumb__im,a.logo-dumb:focus-visible .logo-dumb__im,
a.logo-dumb:hover .logo-dumb__dumb,a.logo-dumb:focus-visible .logo-dumb__dumb{
  --liv:1;animation:logo-onda .7s linear infinite;
}
@keyframes logo-onda{
  from{background-position:0 calc((1 - var(--liv,0)) * 1.25em - .02em),0 0}
  to{background-position:.7em calc((1 - var(--liv,0)) * 1.25em - .02em),0 0}
}

@media (prefers-reduced-motion:reduce){
  a.logo-dumb .logo-dumb__im,a.logo-dumb .logo-dumb__dumb{transition-duration:.01ms;animation:none}
}

/* in alto a sinistra, sopra il contenuto (ma sotto la colata d'apertura della home) */
a.logo-dumb--fisso{position:fixed;top:22px;left:clamp(16px,4vw,48px);z-index:1000}

@media (max-width:580px){
  a.logo-dumb{font-size:28px}
  a.logo-dumb--fisso{top:16px}
}