.xhalf { display: none; }

@media (max-width: 700px) {
  .brand {
    width: 2.75rem;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-18px, 0, 0);
    transition:
      opacity 200ms var(--out),
      transform 260ms var(--out);
  }
  .brand .xm {
    width: 1.75rem;
    transition: transform 140ms var(--out);
  }
  .brand:active .xm { transform: scale(0.94); }

  .top__in { justify-content: flex-end; }

  .nav {
    transform: translate3d(calc(50% - 50vw + var(--pad)), 0, 0);
    transition: transform 320ms var(--inout);
  }

  :root[data-giu] .brand {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }
  :root[data-giu] .nav { transform: translate3d(0, 0, 0); }

  .brand:focus-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .xhalf {
    display: block;
    width: var(--parole, 100%);
    max-width: 100%;
    margin-inline: auto;
    aspect-ratio: 2 / 1;
    background-image: var(--l-mark);
    background-repeat: no-repeat;
    background-size: 100% auto;
  }
  .xhalf--t {
    background-position: center top;
    margin-bottom: clamp(0.4rem, 2.2vw, 1rem);
  }
  .xhalf--b {
    background-position: center bottom;
    margin-top: clamp(0.4rem, 2.2vw, 1rem);
  }

  .xhalf {
    transform: translate3d(0, var(--y, 0), 0);
    transition:
      clip-path 640ms var(--out) var(--d, 0ms),
      transform 760ms var(--inout);
  }
  .xhalf--t {
    clip-path: inset(100% 0 0 0);
    --y: var(--chiuso, 26%);
    --d: 240ms;
  }
  .xhalf--b {
    clip-path: inset(0 0 100% 0);
    --y: calc(-1 * var(--chiuso, 26%));
    --d: 320ms;
  }
  :root.apre .xhalf { clip-path: inset(0 0 0 0); }
  :root.svela .xhalf { transform: translate3d(0, 0, 0); }

  .hero__line {
    visibility: hidden;
    transition: visibility 0s linear var(--sbarra, 0ms);
  }
  :root.svela .hero__line { visibility: visible; }
  .hero__line b {
    transition-delay: calc(var(--sbarra, 0ms) + var(--d, 0ms));
  }

  .hero__meta { transition-delay: calc(var(--sbarra, 0ms) + 640ms); }

  .hero__scroll { display: none; }
  .hero__meta { justify-content: center; }
  .hero__who { text-align: center; }
}

@media (max-width: 700px) and (max-height: 560px) {
  .xhalf { display: none; }
  .brand {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
  }
  .nav { transform: translate3d(0, 0, 0); }
}

@media (min-width: 701px) {
  .nav__a { font-size: 0.85rem; }
  .hero__scroll { font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .view > * { animation: fade 200ms ease both; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  html { scroll-behavior: auto; }
  .hsay .w { opacity: 1; transform: none; filter: none; }
}