.hero-std__media--3d model-viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  --poster-color: transparent;
  --progress-bar-height: 0px;
  opacity: 0;
  transition: opacity .6s var(--ease);
  cursor: grab;
}
.hero-std__media--3d model-viewer:active { cursor: grabbing; }
.hero-std__media--3d.solo-tocco model-viewer,
.hero-std__media--3d.solo-tocco model-viewer:active { cursor: pointer; }
.hero-std.is-esploso .hero-std__media--3d.solo-tocco model-viewer { cursor: grab; }
.hero-std.is-esploso .hero-std__media--3d.solo-tocco model-viewer:active { cursor: grabbing; }
.hero-std__media--3d.is-3d model-viewer { opacity: 1; }

.hero-std__media--3d .hero-std__riserva {
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  filter: none;
  animation: none;
  transform: none;
  transition: opacity .2s linear .45s;
  pointer-events: none;
}
.hero-std__media--3d.is-3d .hero-std__riserva { opacity: 0; }

.hero-std__hint {
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  text-align: center;
  font-size: 13px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .78);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 3;
}
.hero-std__media--3d.is-3d .hero-std__hint { opacity: 1; }
.hero-std__media--3d.is-toccato:not(.ha-esploso) .hero-std__hint { opacity: 0; }

@media (min-width: 1100px) {
  .hero-std__media--3d {
    aspect-ratio: 1 / 1;
    width: min(100%, calc(100vh - 304px));
    justify-self: center;
  }
}
@media (max-width: 900px) {
  .hero-std__media--3d { width: min(600px, 100%); }
}

@media (min-width: 1100px) {
  .hero-std--pareti .hero-std__media--3d .hero-std__riserva,
  .hero-std--pareti .hero-std__media--3d model-viewer {
    margin-left: calc(-1 * clamp(24px, 5vw, 72px));
    width: calc(100% + clamp(24px, 5vw, 72px) + clamp(24px, 8.3vw, 120px));
  }
}

@media (min-width: 1100px) {
  .hero-std__inner > div:first-child {
    transition: opacity .55s var(--ease);
  }
  .hero-std.is-esploso .hero-std__inner > div:first-child {
    opacity: .14;
    pointer-events: none;
  }
  .hero-std.is-esploso .hero-std__media--3d { z-index: 2; }
  .hero-std.is-esploso .hero-std__media--3d model-viewer {
    left: calc(-100% - clamp(32px, 5vw, 72px));
    right: 0;
    width: auto;
  }
}
.hero-std__media--3d model-viewer {
  transition: opacity .6s var(--ease), left .55s var(--ease), right .55s var(--ease);
}

.visore-manina {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 44px;
  height: 52px;
  margin-left: -10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s var(--ease);
  z-index: 4;
}
.hero-std__media--3d.is-3d .visore-manina { opacity: .92; }
.hero-std__media--3d.is-toccato .visore-manina { opacity: 0; }

.visore-manina svg {
  position: relative;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(4, 10, 22, .45));
  animation: visoreTocca 2.4s ease-in-out infinite;
}
@keyframes visoreTocca {
  0%, 62%, 100% { transform: translateY(0) scale(1); }
  70%           { transform: translateY(7px) scale(.94); }
  82%           { transform: translateY(0) scale(1); }
}

.visore-manina__onda {
  position: absolute;
  left: 4px; top: 24px;
  width: 22px; height: 22px;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  opacity: 0;
  animation: visoreOnda 2.4s ease-out infinite;
}
@keyframes visoreOnda {
  0%, 66%  { transform: scale(.3); opacity: 0; }
  72%      { opacity: .8; }
  100%     { transform: scale(2.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .visore-manina svg,
  .visore-manina__onda { animation: none; }
  .visore-manina__onda { opacity: .5; transform: scale(1.2); }
}

.hero-std--fu-one.is-esploso .hero-std__media--3d model-viewer {
  margin-top: max(-27%, -190px);
  height: min(140%, calc(100% + 290px));
}
@media (max-width: 900px) {
  .hero-std--fu-one.is-esploso .hero-std__media--3d { aspect-ratio: 16 / 14; }
  .hero-std--fu-one.is-esploso .hero-std__media--3d model-viewer { margin-top: 0; height: 100%; }
}

.hero-std--emulsionatore.is-esploso .hero-std__media--3d model-viewer {
  margin-top: max(-24%, -190px);
  height: min(138%, calc(100% + 290px));
}
@media (max-width: 900px) {
  .hero-std--emulsionatore.is-esploso .hero-std__media--3d { aspect-ratio: 16 / 13.8; }
  .hero-std--emulsionatore.is-esploso .hero-std__media--3d model-viewer { margin-top: 0; height: 100%; }
}