/* Warm garden setting for the existing, freely rotatable CSS 3D heat pump. */
.hero {
  background:
    radial-gradient(ellipse at 86% 34%, #9a5a2446 0%, transparent 58%),
    radial-gradient(ellipse at 73% 94%, #52623116 0%, transparent 39%), var(--black);
}

.hero h1 > span {
  color: #b5afa0;
}
.hero .hero-description {
  color: #b5b0a6;
}

.product-scene::before {
  content: none;
}

.product-scene::after {
  left: -2%;
  right: -5%;
  bottom: -36px;
  height: 65px;
  background: radial-gradient(ellipse, #0009 0%, #0004 43%, transparent 73%);
  filter: blur(12px);
}

.product-scene .pump-stage {
  transform: scale(0.9);
}

.scene-turntable {
  position: absolute;
  width: 420px;
  height: 300px;
  left: 50%;
  top: 50%;
  margin-left: -210px;
  margin-top: -150px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.garden-world {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: translateY(170px);
}

.garden-face {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: brightness(var(--surface-light, 1));
}

.garden-lawn {
  width: 550px;
  height: 310px;
  left: -275px;
  top: -155px;
  transform: rotateX(90deg);
  border: 1px solid #a3ac5e;
  border-radius: 14px;
  background:
    url("assets/hero-grass.svg") 0 0 / 115px 115px,
    radial-gradient(ellipse at 84% 12%, #c9c87466, transparent 58%),
    radial-gradient(ellipse at 10% 87%, #243c2b66, transparent 52%),
    linear-gradient(125deg, #667b42, #8a9952 67%, #a0a660);
  box-shadow:
    inset 0 0 24px #23361e55,
    inset -3px 2px 3px #d9cf7c44;
}

.garden-soil-front {
  width: 550px;
  height: 23px;
  left: -275px;
  top: 0;
  transform: translateZ(154px);
  border-radius: 0 0 12px 12px;
  border-top: 5px solid #576d38;
  background:
    radial-gradient(ellipse at 20% 40%, #af94772b 1px, transparent 2px) 0 0 / 17px 9px,
    linear-gradient(#65533b, #3d3326);
  box-shadow: inset 0 -2px 3px #261f1c66;
}

.garden-soil-right {
  width: 308px;
  height: 23px;
  left: -154px;
  top: 0;
  transform: translateX(274px) rotateY(90deg);
  border-top: 5px solid #889751;
  border-radius: 0 0 8px 0;
  background: linear-gradient(#8a7050, #58432f);
}

.garden-soil-back {
  width: 550px;
  height: 23px;
  left: -275px;
  top: 0;
  transform: translateZ(-154px) rotateY(180deg);
  border-top: 5px solid #667b42;
  border-radius: 0 0 12px 12px;
  background: linear-gradient(#756044, #483a2a);
}

.garden-soil-left {
  width: 308px;
  height: 23px;
  left: -154px;
  top: 0;
  transform: translateX(-274px) rotateY(-90deg);
  border-top: 5px solid #576d38;
  border-radius: 0 0 8px 0;
  background: linear-gradient(#65533b, #3d3326);
}

.garden-soil-bottom {
  width: 550px;
  height: 310px;
  left: -275px;
  top: -155px;
  transform: translateY(23px) rotateX(-90deg);
  border-radius: 12px;
  background: radial-gradient(ellipse at 65% 35%, #6a553b, #3d3326 75%);
}

.garden-plinth-top {
  width: 456px;
  height: 178px;
  left: -228px;
  top: -89px;
  transform: translateY(-7px) rotateX(90deg);
  border: 1px solid #c7ba9b;
  border-radius: 5px;
  background:
    radial-gradient(#eee3c547 0.7px, transparent 1px) 0 0 / 7px 9px,
    linear-gradient(110deg, #9b917b, #b9ad91 60%, #cdc0a0);
  box-shadow:
    0 0 9px #25301955,
    inset 0 0 10px #c9bea344;
}

.garden-plinth-front {
  width: 456px;
  height: 7px;
  left: -228px;
  top: -7px;
  transform: translateZ(88px);
  border-radius: 0 0 3px 3px;
  background: linear-gradient(#8a806d, #6c6352);
}

.garden-plinth-right {
  width: 178px;
  height: 7px;
  left: -89px;
  top: -7px;
  transform: translateX(228px) rotateY(90deg);
  background: #aa9b7f;
}

.garden-plinth-back {
  width: 456px;
  height: 7px;
  left: -228px;
  top: -7px;
  transform: translateZ(-88px) rotateY(180deg);
  background: linear-gradient(#aa9b7f, #81755f);
}

.garden-plinth-left {
  width: 178px;
  height: 7px;
  left: -89px;
  top: -7px;
  transform: translateX(-228px) rotateY(-90deg);
  background: #8a806d;
}

.garden-pump-shadow {
  position: absolute;
  width: 448px;
  height: 210px;
  left: -224px;
  top: -105px;
  transform: translateY(-8px) rotateX(90deg);
  border-radius: 50%;
  background: radial-gradient(ellipse, #14181180 8%, #14181138 38%, #14181100 72%);
  backface-visibility: hidden;
}

.garden-pump-shadow::after {
  content: "";
  position: absolute;
  inset: -10px -20px;
  background: radial-gradient(ellipse, #14181185 9%, #14181145 40%, #14181100 73%);
  transform: translate(var(--shadow-x, -40px), var(--shadow-z, -6px));
  opacity: var(--shadow-strength, 0.6);
}

.garden-plant {
  --plant-height: 49px;
  position: absolute;
  left: -16px;
  top: calc(-1 * var(--plant-height));
  width: 32px;
  height: var(--plant-height);
  transform: translate3d(var(--plant-x), 0, var(--plant-z)) rotateY(22deg);
  transform-style: preserve-3d;
}

.garden-plant--back {
  --plant-x: 245px;
  --plant-z: -104px;
  --plant-height: 62px;
}
.garden-plant--left {
  --plant-x: -251px;
  --plant-z: -34px;
  --plant-height: 38px;
}
.garden-plant--right {
  --plant-x: 248px;
  --plant-z: 100px;
  --plant-height: 46px;
}
.garden-plant--front {
  --plant-x: -188px;
  --plant-z: 129px;
  --plant-height: 27px;
}

.garden-plant i {
  position: absolute;
  left: 14px;
  bottom: 0;
  width: 7px;
  height: 92%;
  border-radius: 100% 0 65% 0;
  transform-origin: 50% 100%;
  transform: rotate(-39deg);
  background: linear-gradient(0deg, #3c522c, #859454 68%, #c6bf79);
  box-shadow: inset 1px 0 #c4c47733;
}

.garden-plant i:nth-child(2) {
  height: 78%;
  transform: rotateY(55deg) rotate(-19deg);
  background: linear-gradient(0deg, #405c32, #a2ac69);
}
.garden-plant i:nth-child(3) {
  height: 100%;
  transform: rotate(4deg);
}
.garden-plant i:nth-child(4) {
  height: 85%;
  transform: rotateY(-50deg) rotate(27deg);
  background: linear-gradient(0deg, #4b6534, #b1b975);
}
.garden-plant i:nth-child(5) {
  height: 65%;
  transform: rotateY(70deg) rotate(49deg);
}

.garden-pebble {
  position: absolute;
  width: 22px;
  height: 13px;
  left: -11px;
  top: -7px;
  border-radius: 48% 57% 42% 50%;
  background: linear-gradient(135deg, #d4c5a3, #8a816c);
  box-shadow: 1px 3px 2px #26331966;
}

.garden-pebble--one {
  transform: translate3d(233px, -3px, 115px) rotateX(65deg);
}
.garden-pebble--two {
  width: 14px;
  height: 9px;
  transform: translate3d(217px, -2px, 128px) rotateX(65deg) rotate(30deg);
}
.garden-pebble--three {
  width: 18px;
  transform: translate3d(-240px, -3px, 50px) rotateX(65deg) rotate(-20deg);
}

/* One graphite material. The controller shades every surface from the same
   stationary key light and soft fill light as the whole scene turns. */
.product-scene .pump-float {
  animation: none;
  transform: translateY(-7px);
}

.product-scene .pump-face,
.product-scene .foot-face {
  --panel-color: rgb(69, 68, 67);
  --panel-softlight: rgb(71, 70, 69);
  --panel-shade: rgb(66, 65, 64);
  --panel-edge: rgb(77, 76, 75);
  --panel-detail: rgb(58, 58, 56);
  --panel-detail-light: rgb(62, 61, 60);
  --vent-highlight: rgb(62, 61, 60);
}

.product-scene .pump-face {
  border-color: var(--panel-edge);
  background: linear-gradient(
    125deg,
    var(--panel-softlight),
    var(--panel-color) 52%,
    var(--panel-shade)
  );
  box-shadow:
    inset 0 1px 1px #fff5de12,
    inset 0 -1px 1px #12151180;
}

.product-scene .pump-control,
.product-scene .left-service-panel,
.product-scene .back-service-panel {
  border-color: var(--panel-shade);
  background: linear-gradient(125deg, var(--panel-detail-light), var(--panel-detail));
  box-shadow: inset 1px 0 0 #f2ebd50d;
}

.product-scene .side-vents,
.product-scene .left-vents,
.product-scene .back-vents {
  border-color: #171a19;
  background: repeating-linear-gradient(
    0deg,
    #141718 0,
    #141718 3px,
    var(--vent-highlight) 4px,
    var(--panel-detail) 6px
  );
}

.product-scene .fan-shell {
  background: #141718;
  border-color: var(--panel-detail-light);
  box-shadow:
    0 1px 0 #fff5de0e,
    inset 0 0 10px #000,
    0 3px 7px #0008;
}

.product-scene #fan-blade stop:first-child {
  stop-color: var(--vent-highlight);
}
.product-scene #fan-hub stop:first-child {
  stop-color: var(--panel-softlight);
}
.product-scene .pump-front-inset {
  border-color: var(--panel-shade);
}
.product-scene .top-seam {
  border-color: var(--panel-edge);
  opacity: 0.3;
}
.product-scene .screw {
  background: linear-gradient(45deg, var(--panel-detail), var(--panel-edge));
}
.product-scene .bottom-rib {
  background: linear-gradient(90deg, var(--panel-detail), var(--panel-edge), var(--panel-detail));
}
.product-scene .foot-face {
  border-color: var(--panel-detail-light);
  background: linear-gradient(120deg, var(--panel-detail-light), var(--panel-detail));
}

.pump-stage:focus-visible:not(.pointer-focused) {
  outline-color: #d3b779;
}

@media (max-width: 1200px) {
  .product-scene .pump-stage {
    transform: scale(0.8);
  }
  .product-scene::after {
    bottom: -15px;
  }
}

@media (max-width: 960px) and (min-width: 721px) {
  .product-scene .pump-stage {
    transform: scale(0.62);
    inset: 40px -30px 28px;
  }
}

@media (max-width: 720px) {
  .hero {
    background: radial-gradient(ellipse at 83% 75%, #995b2b42, transparent 52%), var(--black);
  }
  .product-scene {
    margin-top: 27px;
    margin-bottom: 23px;
  }
  .product-scene .pump-stage {
    transform: translateY(-44px) scale(0.8);
  }
  .product-scene::after {
    left: -8%;
    right: -8%;
    bottom: -19px;
    height: 47px;
  }
}

@media (max-width: 600px) {
  .product-scene .pump-stage {
    transform: translateY(-32px) scale(0.74);
  }
}

@media (max-width: 480px) {
  .product-scene .pump-stage {
    transform: translateY(-24px) scale(0.6);
  }
  .product-scene {
    height: 335px;
  }
}

@media (max-width: 380px) {
  .product-scene .pump-stage {
    transform: translateY(-13px) scale(0.51);
  }
  .product-scene {
    margin-top: 24px;
    margin-bottom: 12px;
  }
}