@font-face {
  font-family: "Archivo";
  src: url("./fonts/archivo-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Bold"), local("Arial");
  font-style: normal;
  font-weight: 700;
  size-adjust: 105.04%;
  ascent-override: 88%;
  descent-override: 21%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("./fonts/roboto-mono-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono Fallback";
  src: local("SFMono-Regular"), local("Consolas"), local("Courier New");
  font-style: normal;
  font-weight: 300;
  size-adjust: 99.68%;
  ascent-override: 105%;
  descent-override: 27%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;
  --ink: #050505;
  --paper: #f2f2f0;
  --technical: #a5a5a1;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--ink);
  color: var(--paper);
  font-family: "Archivo", "Archivo Fallback", Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--ink);
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
}

umanoid-stage {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(1.25rem, 4.1vw, 4rem) clamp(1.25rem, 5vw, 5rem)
    clamp(1.5rem, 4vw, 3.25rem);
}

.stage__main {
  display: grid;
  place-items: center;
  min-width: 0;
}

.wordmark {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  max-width: 100%;
  margin: 0;
  color: var(--paper);
  font-size: clamp(3.85rem, 15.35vw, 15.5rem);
  font-weight: 740;
  line-height: 0.86;
  white-space: nowrap;
  letter-spacing: -0.085em;
  user-select: text;
}

.wordmark__uman {
  font-family: "Archivo", "Archivo Fallback", Arial, Helvetica, sans-serif;
  font-weight: var(--uman-weight, 740);
  transition: font-weight 4s cubic-bezier(0.2, 0.65, 0.25, 1);
}

.wordmark__oid {
  margin-left: -0.012em;
  font-family: "Roboto Mono", "Roboto Mono Fallback", "SFMono-Regular", Consolas, monospace;
  font-weight: var(--oid-weight, 300);
  letter-spacing: -0.09em;
  transition: font-weight 4s cubic-bezier(0.2, 0.65, 0.25, 1);
}

.wordmark__domain {
  position: absolute;
  top: 0.04em;
  right: -0.45em;
  font-family: "Roboto Mono", "Roboto Mono Fallback", "SFMono-Regular", Consolas, monospace;
  font-size: 0.115em;
  font-weight: 300;
  letter-spacing: 0;
}

.stage__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  color: var(--technical);
  font-family: "Roboto Mono", "Roboto Mono Fallback", "SFMono-Regular", Consolas, monospace;
  font-size: clamp(0.65rem, 0.82vw, 0.76rem);
  font-weight: 300;
  letter-spacing: 0.025em;
}

.payoff {
  margin: 0;
  color: var(--paper);
}

.contact {
  position: relative;
  color: var(--paper);
  text-decoration: none;
  text-underline-offset: 0.28em;
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.contact::after {
  position: absolute;
  right: 0;
  bottom: -0.3em;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

.contact:hover::after,
.contact:focus-visible::after {
  transform: scaleX(1);
}

.contact:focus-visible {
  border-radius: 1px;
  outline: 2px solid var(--paper);
  outline-offset: 5px;
}

/* Ingresso "scan": ogni elemento viene svelato da una maschera clip che
   attraversa la larghezza da sinistra a destra, frena un istante a metà
   e poi ri-accelera fino in fondo. Gli inset negativi lasciano headroom
   per underline, outline e sbordature dei glifi. */
umanoid-stage .wordmark__uman,
umanoid-stage .wordmark__oid,
umanoid-stage .wordmark__domain,
umanoid-stage .payoff,
umanoid-stage .contact {
  animation: 780ms cubic-bezier(0.19, 1, 0.22, 1) umanoid-clip-sweep both;
}

umanoid-stage .wordmark__uman {
  animation-delay: 40ms;
}

umanoid-stage .wordmark__oid {
  animation-delay: 360ms;
}

umanoid-stage .wordmark__domain {
  animation-delay: 660ms;
  animation-duration: 640ms;
}

umanoid-stage .payoff {
  animation-delay: 840ms;
  animation-duration: 640ms;
}

umanoid-stage .contact {
  animation-delay: 960ms;
  animation-duration: 640ms;
}

@keyframes umanoid-clip-sweep {
  0% {
    clip-path: inset(-1em 102% -1em -1em);
    /* Attacco immediato, arrivo morbido in vista della pausa. */
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  }

  38% {
    clip-path: inset(-1em 54% -1em -1em);
    /* Frenata: la maschera rallenta quasi fino a fermarsi a metà. */
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }

  50% {
    clip-path: inset(-1em 50.5% -1em -1em);
    /* Ri-accelerazione: sprint finale con atterraggio morbido. */
    animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
  }

  100% {
    clip-path: inset(-1em -1em -1em -1em);
  }
}

@media (max-width: 520px) {
  umanoid-stage {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }

  .wordmark {
    font-size: clamp(3.72rem, 15.35vw, 5.45rem);
  }

  .stage__footer {
    gap: 0.6rem;
    font-size: clamp(0.58rem, 2.55vw, 0.68rem);
    letter-spacing: 0;
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  umanoid-stage {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .wordmark {
    font-size: min(15.35vw, 38vh);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* Niente ingresso a clip: i contenuti restano subito visibili. */
  umanoid-stage .wordmark__uman,
  umanoid-stage .wordmark__oid,
  umanoid-stage .wordmark__domain,
  umanoid-stage .payoff,
  umanoid-stage .contact {
    animation: none;
  }
}

/* Footnote-style reference rendered outside the visible measure. */
.fn-note {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  color: transparent;
  user-select: none;
  pointer-events: none;
}