/* Photo choreography and the existing copy. The 3D actor and its slots are untouched. */
.photo-motion-stage { position: relative; display: block; padding: 0; margin: 0 auto; overflow: visible; }
.photo-motion-stage-hero { background: var(--ink); color: var(--paper); }
.photo-motion-stage-oil { max-width: 1700px; background: var(--paper); }
.photo-motion-stage[data-photo-pin="on"],
.photo-motion-track[data-photo-pin="on"] { height: calc(var(--photo-height) + var(--photo-hold)); }
.photo-motion-stage[data-photo-pin="on"] > .photo-motion-frame { position: sticky; top: var(--photo-top); }
.photo-motion-stage[data-photo-pin="on"] > .hero { min-height: var(--photo-frame-height); }
.photo-motion-stage[data-photo-pin="on"] > .oil { min-height: var(--photo-frame-height); }
.photo-motion-frame.hero .hero-visual { transform: none !important; }
html[data-photo-motion] .photo-motion-frame .hero-image {
  animation: none !important;
  transform: translate3d(0, var(--photo-drift, 0px), 0) scale(var(--photo-scale, 1));
}
.photo-motion-stage[data-photo-near="true"] .hero-image,
#storia[data-photo-near="true"] .photo-motion-roots > img,
.photo-motion-track-roots[data-photo-near="true"] .photo-motion-roots > img { will-change: transform; }
html[data-photo-motion] .oil-background { clip-path: none; }
html[data-photo-motion] .oil-photo .image-tag { opacity: 1; }
.photo-motion-roots { overflow: hidden; }
.photo-motion-roots[data-photo-pin="on"] { top: var(--photo-top); }
html[data-photo-motion] .photo-motion-roots > img { transform: scale(var(--photo-scale, 1)); }
.photo-motion-track { position: relative; min-width: 0; }
.photo-motion-track-oil { background: var(--paper); }
.photo-motion-track-roots { background: var(--ink); order: 2; }
@media (max-width: 760px) {
  .photo-motion-track[data-photo-pin="on"] > .oil-photo,
  .photo-motion-track[data-photo-pin="on"] > .roots-image {
    position: sticky;
    top: var(--photo-top);
    height: var(--photo-frame-height);
    min-height: var(--photo-frame-height);
  }
}
html[data-photo-motion="static"] .photo-motion-frame .hero-image,
html[data-photo-motion="static"] .photo-motion-roots > img { transform: none !important; }
html[data-photo-motion="static"] .oil-background { clip-path: none; }
html[data-photo-motion="static"] .oil-photo .image-tag { opacity: 1; }
@media (prefers-reduced-motion: reduce), (min-width: 761px) and (max-height: 519px) {
  .photo-motion-stage[data-photo-pin="on"],
  .photo-motion-track[data-photo-pin="on"] { height: auto !important; }
  .photo-motion-stage > .photo-motion-frame,
  .photo-motion-track > .oil-photo,
  .photo-motion-track > .roots-image { position: relative !important; top: auto !important; }
  html[data-photo-motion] .photo-motion-frame .hero-image,
  html[data-photo-motion] .photo-motion-roots > img { transform: none !important; will-change: auto; }
  html[data-photo-motion] .oil-background { clip-path: none !important; }
  html[data-photo-motion] .oil-photo .image-tag { opacity: 1 !important; }
}

/* Six early native-scroll entrances, rather than fading the entire copy block. */
html.photo-hero-boot #inizio [data-hero-sequence] { opacity: 0; pointer-events: none; }
html.photo-hero-boot #inizio .hero-visual::after { opacity: 0; }
html[data-photo-motion] #inizio [data-hero-sequence] {
  opacity: var(--hero-sequence-opacity, 1);
  transform: translate3d(0, var(--hero-sequence-lift, 0px), 0);
  pointer-events: var(--hero-sequence-pointer, auto);
}
html[data-photo-motion] .photo-motion-frame.hero .hero-visual::after { opacity: var(--hero-shade-opacity, 1); }
#inizio:focus-within [data-hero-sequence] { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
#inizio:focus-within .hero-visual::after { opacity: 1 !important; }
/* Original Peranzana always underlays the second photograph. */
.oil-photo > .oil-secondary {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  opacity: var(--oil-secondary-visible, 0);
  clip-path: inset(var(--photo-inset, 100%) 0 0 0);
}
html[data-photo-motion="static"] #inizio [data-hero-sequence] { opacity: 1; transform: none; pointer-events: auto; }
html[data-photo-motion="static"] .photo-motion-frame.hero .hero-visual::after { opacity: 1; }
html[data-photo-motion="static"] .oil-photo > .oil-secondary { opacity: 0; }
@media (prefers-reduced-motion: reduce), (min-width: 761px) and (max-height: 519px) {
  html.photo-hero-boot #inizio [data-hero-sequence],
  html[data-photo-motion] #inizio [data-hero-sequence] { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  html.photo-hero-boot #inizio .hero-visual::after,
  html[data-photo-motion] .photo-motion-frame.hero .hero-visual::after { opacity: 1 !important; }
  .oil-photo > .oil-secondary { opacity: 0 !important; }
}

/* The copy follows scroll, so its former time-based entrance must not compound it. */
#inizio .hero-line,
#inizio .hero-description,
#inizio .hero-actions,
#inizio .hero-image { animation: none !important; }

/* Existing three phases: short entrances, progress rule, no extra scroll hold. */
#storia .process-row { position: relative; }
html[data-photo-motion]:not([data-photo-motion="static"]) #storia .process-row {
  opacity: var(--process-opacity, 1);
  transform: translate3d(0, var(--process-lift, 0px), 0);
}
html[data-photo-motion]:not([data-photo-motion="static"]) #storia .process-row::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: var(--process-progress, 0%);
  height: 2px;
  background: var(--lime);
  opacity: .7;
  pointer-events: none;
}
#storia .process-row:focus-within { opacity: 1 !important; transform: none !important; }
.photo-motion-roots > .roots-process-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--process-photo-opacity, 0);
  pointer-events: none;
}
.roots-process-photo[data-process-photo="2"] { z-index: 1; }
.roots-process-photo[data-process-photo="3"] { z-index: 2; }
.photo-motion-roots .roots-caption { z-index: 3; }
html[data-photo-motion="static"] .roots-process-photo { opacity: 0 !important; }
@media (max-width: 760px) {
  .photo-motion-roots > .roots-process-photo { opacity: 0; }
}
@media (prefers-reduced-motion: reduce), (min-width: 761px) and (max-height: 519px) {
  html[data-photo-motion] #storia .process-row { opacity: 1 !important; transform: none !important; }
  html[data-photo-motion] #storia .process-row::before { display: none; }
  .photo-motion-roots > .roots-process-photo { opacity: 0 !important; }
}