/* La pagina di un tipo di lavoro */
.lavori-testa {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 140px;
}
/* il testo accanto al titolo sta sul colore del tipo di lavoro: più grande e più scuro che nelle altre pagine (Leo) */
.lavori-testa .intro-side {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
}
.lavori-indietro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  background: var(--bianco-60);
  box-shadow: 0 0 0 1px var(--bianco-70);
}
.lavori-titolo {
  display: flex;
  align-items: center;
  gap: 18px;
}
.lavori-titolo .riq-ico {
  width: 64px;
  height: 64px;
}
.lavori-titolo .riq-ico svg {
  width: 30px;
  height: 30px;
}
.lavori-esempi {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.lavori-esempi .largo {
  grid-column: 1 / -1;
}
.lavori-altri {
  position: relative;
  z-index: 2;
  margin-top: 80px;
}
.lavori-altri h2 {
  font-size: 30px;
  letter-spacing: -0.02em;
}
.riq-griglia.piccoli {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 20px;
}
.piccoli .riq {
  padding: 20px 20px 0;
  border-radius: 26px;
}
.piccoli .riq h3 {
  margin-top: 12px;
  font-size: 22px;
}
.piccoli .riq p {
  display: none;
}
.piccoli .riq-vai {
  right: 14px;
  bottom: 14px;
  padding: 7px 12px;
  font-size: 12px;
}
.lavori-altri ~ .invito {
  z-index: 2;
  margin-top: 70px;
}

/* La transizione «il riquadro diventa la pagina»: fra «Cosa faccio» e la pagina di un tipo di lavoro il browser
   allarga il riquadro cliccato fino a tutta la pagina. Le scritte del riquadro sfumano subito, così non si
   ingrandiscono; quello che cresce è un velo dello stesso colore, che poi sfuma e lascia salire il titolo e i tre
   esempi. Al ritorno il velo si richiude nel riquadro. Chi chiede meno movimento vede solo il cambio di pagina. */
.lavori-fondo {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: 0.6;
  background: linear-gradient(160deg, var(--riq-alto) 0%, var(--riq-basso) 100%);
  pointer-events: none;
}
.lavori-velo {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .lavori-velo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    background: linear-gradient(160deg, var(--riq-alto) 0%, var(--riq-basso) 100%);
    animation: velo-via 0.35s var(--ease) 0.2s both;
  }
  .lavori-velo.pieno {
    animation: none;
    opacity: 1;
  }
  .riquadri .riq,
  .lavori-velo {
    view-transition-class: riquadro;
  }
  .riquadri .riq-siti,
  .lavori-velo.riq-siti {
    view-transition-name: riq-siti;
  }
  .riquadri .riq-negozi,
  .lavori-velo.riq-negozi {
    view-transition-name: riq-negozi;
  }
  .riquadri .riq-piattaforme,
  .lavori-velo.riq-piattaforme {
    view-transition-name: riq-piattaforme;
  }
  .riquadri .riq-gestionali,
  .lavori-velo.riq-gestionali {
    view-transition-name: riq-gestionali;
  }
  .riquadri .riq-app,
  .lavori-velo.riq-app {
    view-transition-name: riq-app;
  }
  ::view-transition-group(*) {
    animation-duration: 0.5s;
    animation-timing-function: var(--ease);
  }
  /* arrivando qui la pagina di fondo sfuma più in fretta (0,4 s invece di 0,6 di stili/transizioni.css): il passaggio
     lo guida il riquadro che si allarga */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.4s;
  }
  ::view-transition-old(*.riquadro),
  ::view-transition-new(*.riquadro) {
    height: 100%;
    object-fit: cover;
    object-position: top left;
  }
  :root:has(.lavori-velo)::view-transition-old(*.riquadro) {
    animation: velo-via 0.2s var(--ease) both;
  }
  :root:has(.lavori-velo)::view-transition-new(*.riquadro) {
    animation: none;
  }
  :root:has(.riquadri)::view-transition-old(*.riquadro) {
    animation: velo-via 0.5s var(--ease) both;
    animation-timing-function: cubic-bezier(0.8, 0, 0.9, 0.4);
  }
  :root:has(.riquadri)::view-transition-new(*.riquadro) {
    animation: riquadro-torna 0.5s var(--ease) both;
  }
  .lavori-testa {
    animation: lavori-sale 0.5s var(--ease) 0.18s both;
  }
  /* Gli esempi entrano quando arrivano sullo schermo: quelli già in vista all'apertura a scaletta, dopo il velo
     (lo script della pagina li segna «subito»), gli altri mentre si scorre. Li nasconde la classe che lo script mette
     in testa alla pagina: senza di lui si vedono. */
  .esempi-in-arrivo .lavori-esempi > .idea:not(.in-vista) {
    opacity: 0;
  }
  .lavori-esempi > .idea {
    --parte: 0.05s;
    --dopo: 0s;
  }
  .lavori-esempi > .idea.subito {
    --parte: 0.22s;
  }
  .lavori-esempi > .idea.subito + .idea.subito {
    --dopo: 0.12s;
  }
  .lavori-esempi > .idea.subito + .idea.subito + .idea.subito {
    --dopo: 0.24s;
  }
  /* «Ogni pezzo al suo posto»: sale l'esempio, poi lo schermo arriva da sinistra e i nodi da destra, uno alla volta. */
  .entrata-pezzi > .idea.in-vista {
    animation: lavori-sale 0.6s var(--ease) calc(var(--parte) + var(--dopo)) both;
  }
  .entrata-pezzi .in-vista .palco > .monitor,
  .entrata-pezzi .in-vista .palco > .laptop,
  .entrata-pezzi .in-vista .palco > .tel {
    animation: pezzo-da-sinistra 0.6s var(--ease) calc(var(--parte) + 0.06s + var(--dopo)) both;
  }
  .entrata-pezzi .in-vista .palco > .tel {
    animation-delay: calc(var(--parte) + 0.14s + var(--dopo));
  }
  .entrata-pezzi .in-vista .passo {
    animation: pezzo-da-destra 0.55s var(--ease) calc(var(--parte) + 0.1s + var(--dopo)) both;
  }
  .entrata-pezzi .in-vista .passo[class$='-2'] {
    animation-delay: calc(var(--parte) + 0.15s + var(--dopo));
  }
  .entrata-pezzi .in-vista .passo[class$='-3'] {
    animation-delay: calc(var(--parte) + 0.2s + var(--dopo));
  }
  .entrata-pezzi .in-vista .passo[class$='-4'] {
    animation-delay: calc(var(--parte) + 0.25s + var(--dopo));
  }
  .entrata-pezzi .in-vista .schema,
  .entrata-pezzi .in-vista .palco > .ruolo {
    animation: lavori-compare 0.45s var(--ease) calc(var(--parte) + 0.32s + var(--dopo)) both;
  }
}
@keyframes pezzo-da-sinistra {
  from {
    opacity: 0;
    transform: translateX(-90px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pezzo-da-destra {
  from {
    opacity: 0;
    transform: translateX(70px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes lavori-compare {
  from {
    opacity: 0;
  }
}
@keyframes velo-via {
  to {
    opacity: 0;
  }
}
@keyframes riquadro-torna {
  0%,
  45% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lavori-sale {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}