*{box-sizing:border-box}

html,body{
  margin:0;
  min-width:320px;
  min-height:100%;
  background:#020305;
}

body{
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  overflow-x:hidden;
}

.page{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 8%,rgba(96,22,150,.14),transparent 34%),
    #020305;
}

.artboard{
  position:relative;
  width:min(100vw,calc(100vh * 1.5));
  aspect-ratio:3/2;
  overflow:hidden;
  background:#000;
}

.artwork{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}

.hotspots{
  position:absolute;
  inset:0;
}

.play-hotspot{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:5%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:0;
  padding:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  touch-action:manipulation;
}

.play-hotspot::before,
.play-hotspot::after{
  content:"";
  position:absolute;
  border-radius:50%;
  opacity:0;
  transition:opacity .16s ease,transform .16s ease,box-shadow .16s ease;
}

.play-hotspot::before{
  inset:7%;
}

.play-hotspot:hover::before,
.play-hotspot:focus-visible::before{
  opacity:1;
  transform:scale(1.06);
  box-shadow:
    0 0 0 2px rgba(194,77,255,.82),
    0 0 24px rgba(145,57,255,.72);
}

.play-hotspot:focus-visible{outline:none}

.play-hotspot.is-playing::before{
  opacity:1;
  background:rgba(4,5,10,.55);
  box-shadow:
    0 0 0 2px rgba(194,77,255,.95),
    0 0 27px rgba(145,57,255,.82);
}

.play-hotspot.is-playing::after{
  opacity:1;
  inset:31%;
  border-radius:2px;
  background:
    linear-gradient(90deg,
      #c85cff 0 35%,
      transparent 35% 65%,
      #c85cff 65% 100%);
}

.link-hotspot{
  position:absolute;
  top:85.7%;
  height:7.2%;
  border-radius:8px;
}

.link-hotspot:hover,
.link-hotspot:focus-visible{
  outline:2px solid rgba(182,71,255,.72);
  outline-offset:-2px;
  background:rgba(130,30,230,.06);
}

.link-hotspot.email{left:5.1%;width:27.2%}
.link-hotspot.phone{left:33.2%;width:18.9%}
.link-hotspot.website{left:70.7%;width:25.8%}

.status{
  position:fixed;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  z-index:20;
  max-width:calc(100vw - 24px);
  padding:8px 14px;
  border:1px solid rgba(178,72,255,.36);
  border-radius:999px;
  background:rgba(1,2,4,.86);
  color:#e5e5e8;
  font-size:13px;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.status.visible{opacity:1}

@media (max-width:700px){
  .status{bottom:8px;font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  .play-hotspot::before,
  .play-hotspot::after,
  .status{transition:none}
}