/* Typed angles interpolate smoothly without replacing the scroll/entry turn. */
@property --website-hero-sway-x {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --website-hero-sway-y {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

body.service-website-page.service-movie-normal-scroll .service-hero__sticky {
  grid-template-rows: auto 100svh auto;
}

body.service-website-page #website-hero-design-showcase.lumen-stack {
  --hero-card-width: min(30vw, 45svh, 460px);
  --hero-card-center-x: 50%;
  --hero-card-center-y: 50%;
  --hero-artwork-left: 0%;
  /* A negative Y turn places the left edge farther from the viewer. */
  --hero-opening-y: -28deg;
  --hero-float-rise: clamp(22px, 4svh, 40px);
  --hero-card-blue: #102d50 linear-gradient(145deg, #1c385a 0%, #102d50 58%, #0e2948 100%);
  --hero-float-play-state: paused;
  position: relative;
  top: auto;
  z-index: 4;
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  height: 100svh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  clip-path: none;
  opacity: 1;
  will-change: auto;
}

body.service-website-page #website-hero-design-showcase.is-reference-float-active {
  --hero-float-play-state: running;
}

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 {
  display: block;
  height: 100svh;
  min-height: 0;
  transform: none;
}

/* Inherit the original hero copy's position, sizes and spacing. */
body.service-website-page #website-hero-design-showcase .service-hero__opening-copy {
  z-index: 3;
  opacity: 1;
  transform: translateY(-50%);
  will-change: auto;
}

body.service-website-page #website-hero-design-showcase .website-design-showcase-repeat__artwork {
  --hero-page-center-x: calc(var(--hero-card-center-x) + (50% - var(--hero-card-center-x)) * var(--hero-film-focus, 0));
  --hero-page-center-y: calc(var(--hero-card-center-y) + (50% - var(--hero-card-center-y)) * var(--hero-film-focus, 0));
  position: absolute;
  inset: 0 0 0 calc(var(--hero-artwork-left) * (1 - var(--hero-film-focus, 0)));
  width: auto;
  height: 100%;
  margin: 0;
  overflow: visible;
  /* Move the complete sheet and its floor shadow around the paper's center.
     Focus removes this drift before the embedded film fills the viewport. */
  transform-origin: var(--hero-page-center-x) var(--hero-page-center-y);
  animation: website-hero-reference-depth 8s ease-in-out infinite;
  animation-play-state: var(--hero-float-play-state);
}

/* Keep the floor projection centered beneath the front-facing sheet. */
body.service-website-page #website-hero-design-showcase .website-design-showcase-repeat__artwork::before {
  position: absolute;
  top: calc(var(--hero-page-center-y) + var(--hero-card-width) * .8);
  left: var(--hero-page-center-x);
  width: calc(var(--hero-card-width) * (.96 + .04 * var(--hero-film-focus, 0)));
  height: calc(var(--hero-card-width) * .14);
  border-radius: 4px;
  background: linear-gradient(100deg, rgb(105 151 214 / 0%) 0%, rgb(105 151 214 / 21%) 28%, rgb(105 151 214 / 18%) 66%, rgb(105 151 214 / 0%) 100%);
  filter: blur(clamp(8px, 1vw, 14px));
  transform: translate(-50%, -50%);
  animation:
    website-hero-floor-shadow 6s ease-in-out infinite,
    website-hero-shadow-in 1.8s cubic-bezier(.45, 0, .2, 1) .2s 1 both;
  animation-play-state: var(--hero-float-play-state), running;
  pointer-events: none;
  content: "";
}

/* A shallow sway shares the same centered sheet as the one-turn animations. */
body.service-website-page #website-hero-design-showcase .website-design-pair__page {
  position: absolute;
  top: var(--hero-page-center-y);
  left: var(--hero-page-center-x);
  width: var(--hero-card-width);
  max-width: none;
  margin: 0;
  opacity: 1;
  visibility: visible;
  /* Keep the edge readable even when the parent shrinks into the distance. */
  box-shadow: 0 0 calc(.75px / var(--hero-film-scale, 1)) rgb(45 65 85 / 18%), 0 calc(2px / var(--hero-film-scale, 1)) calc(8px / var(--hero-film-scale, 1)) rgb(45 65 85 / 10%);
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) perspective(calc(var(--hero-card-width) * var(--hero-detail-perspective, 5.54))) rotateX(calc(var(--website-hero-sway-x) * (1 - var(--hero-film-focus, 0)) + var(--hero-detail-x, 0deg))) rotateY(calc((var(--hero-opening-y, 0deg) + var(--website-hero-sway-y)) * (1 - var(--hero-film-focus, 0)) + var(--hero-detail-y, 0deg))) rotateZ(var(--hero-detail-z, 0deg)) rotateY(var(--hero-film-scroll-turn, 0deg));
  translate: 0 0;
  animation:
    website-hero-reference-float 6s ease-in-out infinite,
    website-hero-reference-sway 9s ease-in-out infinite,
    website-hero-entry-turn 1.8s cubic-bezier(.45, 0, .2, 1) .2s 1 both;
  animation-play-state: var(--hero-float-play-state), var(--hero-float-play-state), running;
  will-change: auto;
}

/* Keep the two faces in one 3D sheet. The front owns its type-size container. */
body.service-website-page #website-hero-design-showcase .website-design-pair__page--film {
  container-type: normal;
  /* The camera measures this small, stable shell, independently of the
     high-resolution face laid out inside it. */
  aspect-ratio: 1047 / 1503;
  transform-style: preserve-3d;
  background: transparent;
}

/* The floating overview uses the original native-size text layout. */
body.service-website-page #website-hero-design-showcase .website-hero-card-front {
  position: relative;
  width: 100%;
  container-type: inline-size;
  aspect-ratio: 1047 / 1503;
  background: #fbfdff;
  transform: translateZ(.2px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Only an enlarged camera view needs the high-resolution face. Its outer
   sheet stays the same size, so switching never moves the camera or photo. */
body.service-website-page #website-hero-design-showcase.is-hero-type-enlarged .website-hero-card-front {
  position: absolute;
  inset: 0 auto auto 0;
  width: calc(100% * var(--hero-render-density, 1));
  transform-origin: 0 0;
  transform: translateZ(.2px) scale(calc(1 / var(--hero-render-density, 1)));
}

body.service-website-page #website-hero-design-showcase .website-hero-card-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--hero-card-blue);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%);
  transform: rotateY(180deg) translateZ(.2px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: none;
}

body.service-website-page #website-hero-design-showcase .website-hero-card-back__logo {
  display: inline-flex;
  align-items: flex-start;
  color: #fff;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  font-size: calc(var(--hero-card-width) * .11);
  font-weight: 200;
  line-height: .85;
  letter-spacing: .17em;
  text-shadow: none;
}

body.service-website-page #website-hero-design-showcase .website-hero-card-back__logo > span {
  margin: -.08em 0 0 .08em;
  font-size: .62em;
  letter-spacing: 0;
}

/* A white veil with 80% transparency softens only the hero film. */
body.service-website-page #website-hero-design-showcase .website-design-pair__hero-film::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgb(255 255 255 / 20%);
  pointer-events: none;
}

/* Descend from above the viewport with one turn around the vertical center.
   The scroll-controlled rotation stays live throughout the entrance. */
@keyframes website-hero-entry-turn {
  from {
    transform: translate(-50%, calc(-50% - 100svh)) perspective(calc(var(--hero-card-width) * var(--hero-detail-perspective, 5.54))) rotateX(calc(var(--website-hero-sway-x) * (1 - var(--hero-film-focus, 0)) + var(--hero-detail-x, 0deg))) rotateY(calc((var(--hero-opening-y, 0deg) + var(--website-hero-sway-y)) * (1 - var(--hero-film-focus, 0)) + var(--hero-detail-y, 0deg))) rotateZ(var(--hero-detail-z, 0deg)) rotateY(var(--hero-film-scroll-turn, 0deg)) rotateY(-360deg);
  }
  to {
    transform: translate(-50%, -50%) perspective(calc(var(--hero-card-width) * var(--hero-detail-perspective, 5.54))) rotateX(calc(var(--website-hero-sway-x) * (1 - var(--hero-film-focus, 0)) + var(--hero-detail-x, 0deg))) rotateY(calc((var(--hero-opening-y, 0deg) + var(--website-hero-sway-y)) * (1 - var(--hero-film-focus, 0)) + var(--hero-detail-y, 0deg))) rotateZ(var(--hero-detail-z, 0deg)) rotateY(var(--hero-film-scroll-turn, 0deg)) rotateY(0deg);
  }
}

/* No floor shadow before the sheet arrives; reveal it as it settles. */
@keyframes website-hero-shadow-in {
  0%, 35% { filter: blur(clamp(8px, 1vw, 14px)) opacity(0); }
  100% { filter: blur(clamp(8px, 1vw, 14px)) opacity(var(--hero-film-shadow, 1)); }
}

@keyframes website-hero-reference-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 calc(var(--hero-float-rise) * -1 * (1 - var(--hero-film-focus, 0))); }
}

@keyframes website-hero-reference-depth {
  0%, 100% { scale: calc(1 - .10 * (1 - var(--hero-film-focus, 0))); }
  50% { scale: calc(1 + .10 * (1 - var(--hero-film-focus, 0))); }
}

@keyframes website-hero-reference-sway {
  0%, 100% {
    --website-hero-sway-x: -1.5deg;
    --website-hero-sway-y: 2.5deg;
  }
  50% {
    --website-hero-sway-x: 1.5deg;
    --website-hero-sway-y: -2.5deg;
  }
}

/* Match the six-second rise: near the floor, denser and tighter; higher up,
   lighter and wider. The existing entry fade and film fade still own visibility. */
@keyframes website-hero-floor-shadow {
  0%, 100% {
    opacity: 1;
    scale: calc(1 - .05 * (1 - var(--hero-film-focus, 0)));
  }
  50% {
    opacity: calc(1 - .55 * (1 - var(--hero-film-focus, 0)));
    scale: calc(1 + .24 * (1 - var(--hero-film-focus, 0)));
  }
}

@media (max-width: 900px) {
  body.service-website-page #website-hero-design-showcase.lumen-stack {
    --hero-card-width: min(52vw, 38svh, 360px);
    --hero-card-center-x: 62%;
    --hero-card-center-y: 42%;
    --hero-artwork-left: 0%;
  }
  body.service-website-page #website-hero-design-showcase .website-design-showcase-repeat__artwork {
    inset: 0;
    width: 100%;
  }
}

@media (max-width: 600px) {
  body.service-website-page #website-hero-design-showcase.lumen-stack {
    --hero-card-width: min(58vw, 37svh);
    --hero-card-center-x: 52%;
    --hero-card-center-y: 43%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.service-website-page #website-hero-design-showcase .website-design-showcase-repeat__artwork,
  body.service-website-page #website-hero-design-showcase .website-design-pair__page,
  body.service-website-page #website-hero-design-showcase .website-design-showcase-repeat__artwork::before {
    animation: none;
    translate: none;
    scale: none;
  }
}

/* Approach the embedded movie, hold its playback invitation, then return. */
body.service-website-page #website-hero-design-showcase.is-hero-film-active {
  height: 680svh;
  overflow: visible;
  overflow-anchor: none;
}
body.service-website-page #website-hero-design-showcase.is-hero-film-active .website-design-showcase-repeat__stage {
  transform: translate3d(0, var(--hero-film-stage-y, 0px), 0);
}
@media (max-width: 900px) {
  body.service-website-page #website-hero-design-showcase.is-hero-film-active {
    height: 240svh;
  }
  /* Freeze the current float phase; focus then brings its amplitude to zero. */
  body.service-website-page #website-hero-design-showcase.is-hero-film-zooming {
    --hero-float-play-state: paused;
  }
  body.service-website-page #website-hero-design-showcase.is-hero-film-zooming .website-hero-depth {
    will-change: transform;
  }
  body.service-website-page #website-hero-design-showcase.is-hero-film-native-pin .website-design-showcase-repeat__stage {
    position: sticky;
    top: 0;
    transform: none;
  }
}
@supports (overflow: clip) and (position: sticky) {
  @media (max-width: 900px) {
    /* Avoid a body scroll container that traps the native sticky surface. */
    body.service-website-page.service-movie-normal-scroll {
      overflow-x: clip;
    }
  }
}
body.service-website-page #website-hero-design-showcase .website-hero-depth {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: 0 0;
}
body.service-website-page #website-hero-design-showcase .website-design-showcase-repeat__artwork::before {
  filter: blur(clamp(8px, 1vw, 14px)) opacity(var(--hero-film-shadow, 1));
}
body.service-website-page #website-hero-design-showcase .service-hero__opening-copy {
  opacity: var(--hero-film-copy, 1);
}
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 {
  opacity: var(--hero-film-type, 1);
}
body.service-website-page #website-hero-design-showcase .website-design-showcase-repeat__stage::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
body.service-website-page #website-hero-design-showcase.is-hero-film-ready .website-design-showcase-repeat__stage::after {
  opacity: .5;
}
body.service-website-page #website-hero-design-showcase .website-design-pair__film-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 12px));
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
}
body.service-website-page #website-hero-design-showcase.is-hero-film-ready .website-design-pair__film-play {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: reduce) {
  body.service-website-page #website-hero-design-showcase .website-design-showcase-repeat__stage::after {
    content: none;
  }
  body.service-website-page #website-hero-design-showcase .website-design-pair__film-play {
    top: 34%;
    width: min(320px, calc(100% - 48px));
    background: rgb(36 58 70 / 82%);
    transition: none;
  }
  body.service-website-page #website-hero-design-showcase .website-design-pair__digest-button {
    padding: 20px;
  }
}