.laptop-map {
  --map-progress: 0;
  position: fixed;
  inset: 0;
  z-index: 220;
  opacity: var(--map-progress);
  pointer-events: none;
}

.laptop-map.is-interactive {
  pointer-events: auto;
}

.laptop-map__fit {
  position: absolute;
  left: 50%;
  top: 42%;
  width: max(100vw, 177.778vh);
  height: max(100vh, 56.25vw);
  transform: translate(-50%, -42%);
}

.laptop-map__screen {
  position: absolute;
  left: 22%;
  top: 17%;
  width: 56%;
  height: 64.5%;
  overflow: hidden;
  clip-path: polygon(0.6% 0, 99.4% 0, 100% 100%, 0 100%);
  background: #6f5439;
  isolation: isolate;
}

.laptop-map__background,
.laptop-map__edge,
.laptop-map__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.laptop-map__background {
  object-fit: cover;
  filter: saturate(0.86) contrast(0.94) brightness(0.82);
}

.laptop-map__route {
  z-index: 2;
  fill: none;
  stroke: rgba(69, 39, 20, 0.72);
  stroke-width: 0.75;
  stroke-linecap: round;
  stroke-dasharray: 1.2 2.1;
  filter: blur(0.15px);
}

.laptop-map__edge {
  z-index: 20;
  pointer-events: none;
  box-shadow: inset 0 0 28px 12px rgba(28, 17, 10, 0.48);
  mix-blend-mode: multiply;
}

.map-island {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 25%;
  aspect-ratio: 1.23;
  color: rgba(255, 239, 204, 0.92);
  text-decoration: none;
  outline: none;
  cursor: default;
  transform: translate(-50%, -50%);
}

.map-island--course { left: 51%; top: 51%; width: 34%; }
.map-island--github { left: 20%; top: 31%; }
.map-island--socials { left: 80%; top: 29%; }
.map-island--about { left: 25%; top: 76%; }
.map-island--github { cursor: pointer; }

.map-island img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(0.86) contrast(0.94) blur(0.2px);
}

.map-island__label,
.map-choices {
  position: absolute;
  left: 50%;
  z-index: 8;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 160ms ease, transform 160ms ease;
  white-space: nowrap;
}

.map-island__label {
  bottom: -2%;
  padding: 4px 8px;
  border: 1px solid rgba(255, 211, 144, 0.22);
  border-radius: 999px;
  background: rgba(17, 14, 11, 0.72);
  font: 600 clamp(8px, 0.7vw, 11px)/1.1 ui-monospace, Menlo, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.map-island:is(:hover, :focus) .map-island__label,
.map-island--socials:is(:hover, :focus) .map-choices {
  opacity: 1;
  transform: translate(-50%, 0);
}

.map-island:focus-visible::after {
  content: "";
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(255, 218, 164, 0.72);
  border-radius: 50%;
}

.map-island--socials .map-island__label {
  bottom: 10%;
}

.map-choices {
  top: 93%;
  display: flex;
  gap: 4px;
}

.map-choices span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(17, 14, 11, 0.72);
  color: rgba(255, 239, 204, 0.7);
  font: 600 clamp(7px, 0.6vw, 10px)/1 ui-monospace, Menlo, monospace;
}

@media (max-width: 700px) and (orientation: portrait) {
  .map-island--github { left: 28%; }
  .map-island--socials { left: 72%; }
  .map-island--about { left: 30%; }
}

@media (prefers-reduced-motion: reduce) {
  .map-island__label,
  .map-choices {
    transition: none;
  }
}