/* Backwards fill releases opacity after four short automatic entrances, so
   native scroll controls the exit without competing retained keyframes. */
#inizio .hero-copy-v22 [data-hero-sequence] {
  opacity: var(--hero-sequence-opacity, 1);
  transform: translate3d(0, var(--hero-sequence-lift, 0px), 0) scale(var(--hero-sequence-scale, 1)) !important;
  transform-origin: left center;
  pointer-events: var(--hero-sequence-pointer, auto) !important;
  visibility: var(--hero-sequence-visible, visible);
}
#inizio:not([data-hero-entry="complete"]) .hero-copy-v22 [data-hero-sequence]:not([data-hero-sequence="0"]) {
  animation: hero-v22-enter 420ms cubic-bezier(.2,.7,.2,1) backwards !important;
}
#inizio .hero-copy-v22 [data-hero-sequence="0"] { animation: none !important; }
#inizio .hero-copy-v22 [data-hero-sequence="1"] { animation-delay: 120ms !important; }
#inizio .hero-copy-v22 [data-hero-sequence="2"] { animation-delay: 240ms !important; }
#inizio .hero-copy-v22 [data-hero-sequence="3"] { animation-delay: 340ms !important; }
#inizio[data-hero-entry="complete"] .hero-copy-v22 [data-hero-sequence] { animation: none !important; }
@keyframes hero-v22-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Pointer focus must not freeze the hero. Keyboard focus preserves readable
   links until focus leaves, including after the native-scroll exit. */
html[data-photo-motion] #inizio .hero-visual::after { opacity: var(--hero-shade-opacity, 1) !important; }
html[data-photo-motion] #inizio:focus-within .hero-copy-v22 [data-hero-sequence] {
  opacity: var(--hero-sequence-opacity, 1) !important;
}
html[data-photo-motion] #inizio[data-hero-keyboard-focus="true"] .hero-copy-v22 [data-hero-sequence] {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  visibility: visible !important;
}
html[data-photo-motion] #inizio[data-hero-keyboard-focus="true"] .hero-visual::after { opacity: 1 !important; }
html[data-photo-motion="static"] #inizio .hero-copy-v22 [data-hero-sequence] {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  visibility: visible !important;
  animation: none !important;
}
@media (max-width: 760px) {
  /* The photo pin reserves the measured header height. Keep its real navigation
     in that space only during this hero, instead of leaving an empty strip.
     Transform-only override; the original auto-hide resumes after the hero. */
  html[data-photo-motion="mobile"]:has(#inizio[data-photo-pin="on"][data-photo-near="true"]) .header {
    transform: translateY(0);
    pointer-events: auto;
  }
  #inizio .hero-image {
    object-position: var(--hero-mobile-focal-x, 13%) center;
    transform-origin: center center;
  }
}
@media (prefers-reduced-motion: reduce), (min-width: 761px) and (max-height: 519px) {
  #inizio .hero-copy-v22 [data-hero-sequence] {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    visibility: visible !important;
    animation: none !important;
  }
  html[data-photo-motion] #inizio .hero-visual::after { opacity: 1 !important; }
}