/* Navbar + pagine progetto come foglio sopra la home + transizione tra le due.
   View Transitions cross-document: Chrome/Edge/Safari 18.2+, altrove navigazione normale.
   Caricato sulla home e sulle pagine con body.kc-sheet (vedi functions.php). */

:root { --kc-nav-h: 72px; --kc-gap: 20px; }
@media (max-width: 640px) { :root { --kc-nav-h: 56px; } }

/* Navbar fissa: testo a sinistra, logo al centro, testo a destra */
.kc-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1001;
  height: var(--kc-nav-h);
  box-sizing: border-box;
  padding: 0 var(--kc-gap);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  color: #fff;
  font-size: 15px;
  pointer-events: none; /* sulla home il portachiavi sotto resta cliccabile */
}
.kc-nav a { pointer-events: auto; }
.kc-nav__side:last-child { text-align: right; }
.kc-nav__logo img { display: block; height: calc(var(--kc-nav-h) * .5); width: auto; }
@media (max-width: 640px) { .kc-nav { font-size: 12px; } }

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Pagina progetto: backdrop della home attorno, foglio sotto la navbar e a 20px dagli altri bordi.
   Lo stesso foglio serve sia alla pagina aperta direttamente (body.kc-sheet .tm-page)
   sia a quella aperta dalla home senza ricaricare (.kc-panel, creato da hero.js). */
body.kc-sheet {
  background: #d3d3d3 url(textures/background-scena.webp) center / cover fixed;
}
body.kc-sheet .tm-page,
.kc-panel > .kc-panel__page { /* specificità alta: il tema YOOtheme imposta .tm-page { position: relative } */
  position: fixed;
  inset: var(--kc-nav-h) var(--kc-gap) var(--kc-gap);
  overflow: auto;
  overscroll-behavior: contain;
  background: #fff;
  view-transition-name: kc-sheet;
}
.kc-panel > .kc-panel__page { view-transition-name: none; outline: none; }

/* Foglio aperto dalla home: il contenitore a tutto schermo porta foglio e X insieme */
.kc-panel {
  position: fixed;
  inset: 0;
  z-index: 1000; /* sotto la navbar */
  pointer-events: none;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}
.kc-panel > * { pointer-events: auto; }
@starting-style { .kc-panel { transform: translateY(100vh); } }
.kc-panel.is-closing {
  transform: translateY(100vh);
  transition: transform .45s cubic-bezier(.4, 0, .8, .2);
}
@media (prefers-reduced-motion: reduce) {
  .kc-panel, .kc-panel.is-closing { transition-duration: .01s; }
}
.kc-sheet-x {
  position: fixed;
  top: calc(var(--kc-nav-h) + 12px);
  right: calc(var(--kc-gap) + 16px);
  z-index: 1000;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  font-size: 1.75rem;
  line-height: 1;
  color: #111;
  text-decoration: none;
  view-transition-name: kc-sheet-x;
}

/* Le pagine non fanno dissolvenza: sotto il foglio resta la home */
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
/* La pagina progetto senza foglio è solo backdrop: nascosta finché dura la transizione */
:root:has(body.kc-sheet)::view-transition-new(root),
:root:not(:has(body.kc-sheet))::view-transition-old(root) { opacity: 0; }

::view-transition-new(kc-sheet),
::view-transition-new(kc-sheet-x) { animation: kc-sheet-in .55s cubic-bezier(.2, .8, .2, 1) both; }
::view-transition-old(kc-sheet),
::view-transition-old(kc-sheet-x) { animation: kc-sheet-out .45s cubic-bezier(.4, 0, .8, .2) both; }
@keyframes kc-sheet-in { from { transform: translateY(100vh); } }
@keyframes kc-sheet-out { to { transform: translateY(100vh); } }