/* =========================================
   UPTOME — MOBILE HERO STABILITY FIX
========================================= */

@media (max-width: 850px) {
  .hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    isolation: isolate;
  }

  @supports (height: 100svh) {
    .hero {
      height: 100svh;
      min-height: 100svh;
      max-height: 100svh;
    }
  }

  .hero__media,
  .hero__shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .hero__media--home {
    background-image: url("../images/uptome-hero-mobile.webp");
    background-position: 58% center;
    background-size: cover;
    background-repeat: no-repeat;

    transform: translateZ(0) scale(1.05);
    transform-origin: center center;
    animation: hero-slow-zoom-mobile 7s
      cubic-bezier(.22, 1, .36, 1) forwards;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .hero__copy {
    right: 24px;
    bottom: max(
      64px,
      calc(env(safe-area-inset-bottom) + 48px)
    );
    left: 24px;
  }
}

@keyframes hero-slow-zoom-mobile {
  from {
    transform: translateZ(0) scale(1.05);
  }

  to {
    transform: translateZ(0) scale(1);
  }
}