/* Mobile opening: one full-height backdrop and stable film/text layers. */
body.service-website-page #website-hero-design-showcase .website-hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

body.service-website-page #website-hero-design-showcase .website-hero-background > img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 768px) {
  body.service-website-page #website-hero-design-showcase .website-hero-background > img {
    filter: blur(3px);
    transform: scale(1.04);
  }

  body.service-website-page #website-hero-design-showcase.lumen-stack {
    --hero-card-center-y: 41%;
  }

  body.service-website-page #website-hero-design-showcase .website-design-showcase-repeat__stage,
  body.service-website-page #website-hero-design-showcase .website-design-pair__composition {
    height: 100vh;
    height: 100svh;
  }

  body.service-website-page #website-hero-design-showcase .service-hero__opening-copy {
    top: 82%;
    bottom: auto;
    max-width: calc(100% - clamp(52px, 16vw, 76px));
    transform: translate3d(0, -50%, 0);
  }

  /* Avoid keeping clipped, blurred text on a composited scrolling surface. */
  body.service-website-page #website-hero-design-showcase .service-hero__opening-copy-en,
  body.service-website-page #website-hero-design-showcase .service-hero__opening-copy-ja > span {
    opacity: 1;
    visibility: visible;
    clip-path: none;
    -webkit-clip-path: none;
    filter: none;
    transform: none;
    will-change: auto;
    animation: website-hero-mobile-copy-in .9s ease both;
  }

  /* Keep the movie and its foreground type in an explicit stacking order. */
  body.service-website-page #website-hero-design-showcase .website-design-pair__hero-film {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  body.service-website-page #website-hero-design-showcase .website-design-pair__hero-video {
    z-index: 0;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  body.service-website-page #website-hero-design-showcase .website-design-pair__hero-film::after {
    z-index: 1;
    transform: translateZ(1px);
  }

  body.service-website-page #website-hero-design-showcase .website-design-pair__hero-menu,
  body.service-website-page #website-hero-design-showcase .website-design-pair__hero-copy {
    z-index: 2;
    transform: translateZ(2px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

@keyframes website-hero-mobile-copy-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  body.service-website-page #website-hero-design-showcase .service-hero__opening-copy-en,
  body.service-website-page #website-hero-design-showcase .service-hero__opening-copy-ja > span {
    animation: none;
  }
}

/* Mirror only the desktop room image, retaining the foreground layout. */
@media (min-width: 769px) {
  body.service-website-page #website-hero-design-showcase .website-hero-background > img {
    scale: -1 1;
  }
}