* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #000;
}

body {
  overflow-x: hidden;
}

.landing {
  position: relative;
  width: min(100%, 1024px);
  margin: 0 auto;
  line-height: 0;
}

/* Desktop: subtle side fade into the black page background. */
@media (min-width: 601px) {
  .landing::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to right,
      #000 0%,
      rgba(0, 0, 0, 0.55) 2%,
      transparent 6%,
      transparent 94%,
      rgba(0, 0, 0, 0.55) 98%,
      #000 100%
    );
  }
}

.reference-image {
  display: block;
  width: 100%;
  height: auto;
}

.hotspot,
.social-hit {
  position: absolute;
  display: block;
  z-index: 2;
  cursor: pointer;
  outline: none;
}

.hotspot:focus-visible,
.social-hit:focus-visible {
  box-shadow: 0 0 0 3px #fff, 0 0 20px #ff2b12;
}

/* Desktop: hit areas match the store button and seven social icons. */
.store-link {
  left: 66.2%;
  top: 44.5%;
  width: 28.2%;
  height: 9.2%;
}

.social-links {
  position: absolute;
  inset: 0;
}

.social-hit {
  top: 64.5%;
  width: 10.5%;
  height: 11.5%;
}

.social-hit:nth-child(1) { left: 7%; }
.social-hit:nth-child(2) { left: 20.5%; }
.social-hit:nth-child(3) { left: 33.9%; }
.social-hit:nth-child(4) { left: 47.4%; }
.social-hit:nth-child(5) { left: 60.8%; }
.social-hit:nth-child(6) { left: 74.1%; }
.social-hit:nth-child(7) { left: 87.5%; }

.social-hit:hover {
  transform: scale(1.04);
  filter: brightness(1.25);
}

/* Mobile: four social icons on the first row, three on the second. */
@media (max-width: 600px) {
  .store-link {
    left: 10.5%;
    top: 45.5%;
    width: 79%;
    height: 7.2%;
  }

  .social-hit {
    width: 19.8%;
    height: 9.3%;
    top: 61.1%;
  }

  .social-hit:nth-child(1) { left: 4.7%; }
  .social-hit:nth-child(2) { left: 24.9%; }
  .social-hit:nth-child(3) { left: 45.2%; }
  .social-hit:nth-child(4) { left: 65.9%; }

  .social-hit:nth-child(5) {
    left: 17.2%;
    top: 72.5%;
  }

  .social-hit:nth-child(6) {
    left: 36.9%;
    top: 72.5%;
  }

  .social-hit:nth-child(7) {
    left: 56.2%;
    top: 72.5%;
  }
}