.cima {
  position: fixed;
  z-index: calc(var(--z-velo) - 1);
  inset-block-end: var(--passo-3);
  inset-inline-end: var(--passo-3);

  display: inline-flex;
  align-items: center;
  gap: var(--passo);

  margin: 0;
  padding: var(--passo) var(--passo-2);

  border: 1px solid var(--linea-viva);
  border-radius: var(--raggio-pill);
  background-color: var(--pannello-2);
  backdrop-filter: blur(10px);
  box-shadow: var(--ombra);

  color: var(--testo);
  font-family: var(--font-titolo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: var(--spazio-etichetta);
  text-transform: uppercase;
  white-space: nowrap;

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--passo-2));
  transition:
    opacity    var(--durata) ease,
    transform  var(--durata) ease,
    visibility 0s linear var(--durata),
    border-color var(--durata) ease,
    background-color var(--durata) ease;
}

.cima.is-visibile {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s, 0s, 0s, 0s, 0s;
}

.cima:hover,
.cima:focus-visible {
  border-color: var(--ciano);
  background-color: var(--pannello);
  color: var(--testo);
}

.cima:active {
  transform: translateY(1px);
  transition-duration: var(--durata-lampo);
}

.cima__freccia {
  flex: none;
  width: 0.7em;
  height: 0.7em;
  border-top: 2px solid var(--ciano);
  border-right: 2px solid var(--ciano);
  transform: rotate(-45deg);
  margin-block-start: 0.18em;
}

@media (max-width: 1099.98px) {
  .cima {
    inset-block-end: calc(var(--dock-h) + var(--passo-3) + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 480px) {
  .cima {
    inset-block-end: calc(var(--dock-h) + var(--passo-2) + env(safe-area-inset-bottom, 0px));
    inset-inline-end: var(--passo-2);
    padding: var(--passo-2);
    border-radius: 50%;
  }

  .cima__testo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .cima__freccia {
    width: 0.85em;
    height: 0.85em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cima { transform: none; transition: opacity var(--durata-lampo) linear,
                visibility 0s linear var(--durata-lampo); }
  .cima.is-visibile { transform: none; }
  .cima:active { transform: none; }
}