/* Three separate windows, captured at different angles just after landing. */
.hero-scene {
  --main-width: min(44vw, 560px);
  --brand-size: clamp(120px, 14.5vw, 190px);
  --window-height: calc(var(--main-width) * .82);
  --main-top: calc(var(--brand-size) * .82 - 17px);
  --stores-top: calc(var(--brand-size) * .88 - 15px);
  --reception-top: calc(var(--brand-size) * .86 - 4px);
  height: calc(var(--window-height) + var(--reception-top) + 48px);
  margin-top: 34px;
  perspective: 2000px;
}
.hero-scene .brand-sculpture {
  top: -16px;
  font-size: var(--brand-size);
  line-height: 1.05;
  letter-spacing: 6px;
}
.hero-scene .light-floor {
  height: 150px;
  bottom: 13px;
  left: 9%;
  right: 8%;
  background: radial-gradient(ellipse, #9bb9e926, transparent 69%);
  filter: blur(20px);
}
.hero-piece {
  position: absolute;
  transform-style: preserve-3d;
  z-index: 3;
}
.hero-piece .hero-face {
  position: relative;
  width: 100%;
  height: auto;
  transform-origin: 50% 70%;
}
.hero-stores {
  width: calc(var(--main-width) * .2167);
  left: 13%;
  top: var(--stores-top);
  z-index: 2;
}
.hero-stores .hero-face {
  transform: rotateX(15deg) rotateY(20deg) rotateZ(-17deg);
  box-shadow: 2px 3px 0 #8ca1c1, 5px 6px 0 #768bad, 15px 28px 32px -19px #1e325757;
}
.hero-main {
  width: var(--main-width);
  left: 28%;
  top: var(--main-top);
}
.hero-main .hero-face {
  transform: rotateX(calc(25deg + var(--py))) rotateY(calc(-12deg + var(--px))) rotateZ(8deg);
  box-shadow: 2px 3px 0 #8496b3, 5px 7px 0 #6f84a6, 9px 10px 0 #6980a0, 10px 31px 35px -22px #19345359;
  transition: transform .25s ease-out;
}
.hero-reception {
  width: calc(var(--main-width) * .2833);
  left: 77%;
  top: var(--reception-top);
  z-index: 4;
}
.hero-reception .hero-face {
  transform: rotateX(10deg) rotateY(-22deg) rotateZ(16deg);
  box-shadow: 3px 3px 0 #8ca1c1, 6px 6px 0 #718bad, -4px 27px 31px -17px #253b605c;
}
.landing-shadows { position: absolute; inset: 0; pointer-events: none; }
.landing-shadows span {
  position: absolute;
  height: 27px;
  border-radius: 50%;
  background: #263f6338;
  filter: blur(13px);
}
.shadow-stores { left: 14%; width: 13%; top: calc(var(--stores-top) + var(--window-height) - 16px); transform: rotate(-12deg); }
.shadow-main { left: 30%; width: 40%; top: calc(var(--main-top) + var(--window-height) + 2px); transform: rotate(6deg); }
.shadow-reception { left: 77%; width: 14%; top: calc(var(--reception-top) + var(--window-height) - 9px); transform: rotate(15deg); }
.hero-scene .scene-label { bottom: 5px; font-size: 13px; }
.hero-scene.is-dropping .hero-piece {
  animation: window-land .92s both;
  animation-timing-function: cubic-bezier(.32, .03, .67, .65);
}
.hero-scene.is-dropping .hero-main { animation-delay: 60ms; }
.hero-scene.is-dropping .hero-reception { animation-delay: 150ms; }
.hero-scene.is-dropping .landing-shadows span { animation: landing-shadow 1.1s both; }
@keyframes window-land {
  0% { transform: translate3d(0, -175px, 35px) rotateZ(-8deg); }
  68% { transform: translate3d(0, 14px, 0) rotateZ(2deg); }
  84% { transform: translate3d(0, -8px, 0) rotateZ(-1deg); }
  100% { transform: translate3d(0, 0, 0) rotateZ(0); }
}
@keyframes landing-shadow {
  0% { opacity: .15; scale: .72; }
  66% { opacity: 1; scale: 1.07; }
  100% { opacity: 1; scale: 1; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .hero-scene {
    --brand-size: clamp(108px, 16vw, 165px);
    --main-top: calc(var(--brand-size) * .8 - 8px);
    --stores-top: calc(var(--brand-size) * .84);
    --reception-top: calc(var(--brand-size) * .9);
    height: calc(var(--window-height) + var(--reception-top) + 44px);
  }
  .hero-scene .brand-sculpture { top: -5px; letter-spacing: 3px; }
  .hero-main { left: 28%; }
}
@media (max-width: 760px) {
  .hero-scene {
    --main-width: 51vw;
    --brand-size: 19vw;
    --main-top: calc(14vw - 3px);
    --stores-top: calc(15vw - 1px);
    --reception-top: calc(16vw - 2px);
    height: calc(var(--window-height) + var(--reception-top) + 40px);
    min-height: 220px;
    margin-top: 38px;
    perspective: 1250px;
  }
  .hero-scene .brand-sculpture { top: -6px; font-size: 19vw; line-height: 1.06; letter-spacing: 1px; }
  .hero-main { left: 23%; }
  .hero-stores { left: 4.5%; }
  .hero-reception { left: 80%; }
  .hero-stores .hero-face { transform: rotateX(12deg) rotateY(14deg) rotateZ(-13deg); }
  .hero-main .hero-face { transform: rotateX(20deg) rotateY(-8deg) rotateZ(7deg); }
  .hero-reception .hero-face { transform: rotateX(8deg) rotateY(-16deg) rotateZ(10deg); }
  .hero-piece .hero-face { padding: 2px; border-radius: 6px; }
  .hero-piece img { border-radius: 4px; }
  .shadow-stores { left: 9%; width: 10%; top: calc(var(--stores-top) + var(--window-height) - 8px); }
  .shadow-main { left: 25%; width: 48%; top: calc(var(--main-top) + var(--window-height) + 1px); }
  .shadow-reception { left: 80%; width: 13%; top: calc(var(--reception-top) + var(--window-height) - 4px); }
  .landing-shadows span { height: 14px; filter: blur(7px); }
  .hero-scene .light-floor { bottom: 18px; height: 70px; filter: blur(10px); }
  .hero-scene .scene-label { display: none; }
  .hero-scene.is-dropping .hero-piece { animation-duration: .8s; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene.is-dropping .hero-piece, .hero-scene.is-dropping .landing-shadows span { animation: none; }
  .hero-main .hero-face { transition: none; }
}