.kc-hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
  container-type: size;
  background: #d3d3d3 url(textures/background-scena.webp) center / cover no-repeat;
}
/* Il poster (portachiavi su trasparente, frame 1920x1080) decide il fit: hero.js allinea la camera
   alla sua larghezza, così poster e 3D coincidono sempre. Il frame riempie l'altezza, ma si riduce
   se il portachiavi (1120px del frame: ingombro 1018 + 10% per le spinte dell'hover) non sta in --kc-fw. */
.kc-hero__poster {
  --kc-fw: .7; /* quota massima di larghezza per il portachiavi */
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(100cqh * 16 / 9, 100cqw * var(--kc-fw) * 1920 / 1120);
  max-width: none;
  height: auto;
  pointer-events: none;
}
@container (orientation: portrait) { .kc-hero__poster { --kc-fw: .9; } }
.kc-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  touch-action: manipulation;
}
.kc-hero__poster,
.kc-hero__canvas { transition: opacity .3s; }
.kc-hero.is-live .kc-hero__canvas { opacity: 1; }
.kc-hero.is-live .kc-hero__poster { opacity: 0; transition-delay: .3s; }

/* link reali per tastiera e screen reader; il focus accende il charm sul canvas */
.kc-hero__links {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Bio: quadrato in basso a destra, a 20px dai bordi, che sale dal basso */
.kc-bio {
  --kc-bio-size: min(50svh, calc(100vw - 40px));
  --kc-gap: 20px;
  width: var(--kc-bio-size);
  height: var(--kc-bio-size);
  max-width: none;
  max-height: none;
  margin: auto var(--kc-gap) var(--kc-gap) auto;
  padding: 0;
  border: 0;
  background: #fff;
  color: #111;
  transform: translateY(calc(100% + var(--kc-gap)));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), overlay .45s allow-discrete, display .45s allow-discrete;
}
.kc-bio[open] { transform: none; }
@starting-style { .kc-bio[open] { transform: translateY(calc(100% + var(--kc-gap))); } }
.kc-bio::backdrop {
  background: rgb(0 0 0 / 0);
  transition: background .45s, overlay .45s allow-discrete, display .45s allow-discrete;
}
.kc-bio[open]::backdrop { background: rgb(0 0 0 / .3); }
@starting-style { .kc-bio[open]::backdrop { background: rgb(0 0 0 / 0); } }
.kc-bio__body {
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
  padding: 2.5rem 2rem 2rem;
}
.kc-bio__close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  background: none;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .kc-bio, .kc-bio::backdrop { transition: none; }
}