html {
  overflow-x: clip;
}

body[data-hero-assembly] .hero-live-media {
  opacity: 1;
  filter: none;
  will-change: auto;
  transform: none;
}

body[data-hero-assembly] .hero-composite-canvas {
  opacity: 1;
  transition: none;
}

body[data-hero-assembly] .hero-grain-field {
  display: none;
}

body[data-hero-assembly="fallback"] .hero-composite-canvas:not(.assembly-fallback) {
  visibility: hidden;
}

body[data-hero-assembly="native-fallback"] .hero-poster {
  opacity: 1;
  mix-blend-mode: screen;
}

body[data-hero-assembly="native-fallback"] .hero-composite-canvas {
  visibility: hidden;
}

html:not(.p2k-js) .hero-live-media, html[data-hero-fallback="true"] .hero-live-media {
  opacity: 1;
  filter: none;
  transform: none;
}

html:not(.p2k-js) .hero-poster, html[data-hero-fallback="true"] body:not([data-hero-composite="ready"]) .hero-poster, body[data-hero-assembly="fallback"] .hero-poster, body[data-hero-assembly="recovering"] .hero-poster {
  opacity: 1;
  mix-blend-mode: normal;
}

body[data-hero-assembly="fallback"] .hero-composite-canvas {
  visibility: hidden;
}

.hero-mobile-shadow {
  display: none;
}

@media (max-width: 720px) {
  body[data-protein-shadow] .hero-composite-canvas {
    filter: none;
  }

  .hero-mobile-shadow {
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: scale(1.28);
  }

  .hero-mobile-shadow span {
    height: 56.25vw;
    position: absolute;
    top: calc(41% - 23.0625vw);
    left: 0;
    right: 0;
  }

  .hero-mobile-shadow span:before {
    content: "";
    background: #372b1d;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-mask: url("assets/hero/pim2-still-fallback.png") 50% 41% / contain no-repeat;
    mask: url("assets/hero/pim2-still-fallback.png") 50% 41% / contain no-repeat;
  }

  .hero-mobile-shadow span:first-child {
    filter: blur(24px);
    opacity: var(--protein-shadow-alpha);
    transform: translateY(52px);
  }

  .hero-mobile-shadow span:last-child {
    filter: blur(10px);
    opacity: var(--protein-shadow-soft-alpha);
    transform: translateY(18px);
  }

  .hero-mobile-shadow span:last-child:before {
    background: #2a2219;
  }

  body[data-hero-assembly="building"] .hero-mobile-shadow {
    will-change: opacity;
    animation: 3.8s linear both hero-shadow-reveal;
  }

  body[data-hero-assembly="live"] .hero-mobile-shadow, body[data-hero-assembly="paused-film"] .hero-mobile-shadow, body[data-hero-assembly="fallback"] .hero-mobile-shadow, body[data-hero-assembly="native-fallback"] .hero-mobile-shadow, body[data-hero-assembly="recovering"] .hero-mobile-shadow, html[data-hero-fallback="true"] .hero-mobile-shadow, html:not(.p2k-js) .hero-mobile-shadow {
    opacity: 1;
  }
}

@keyframes hero-shadow-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}