/* Homepage furniture hover: remove the soft glow and use larger colored trio sparkles instead. */
#home .furniture-glow,
#home .furniture-glow.active{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* Keep the actual furniture hotspots invisible, clickable, and able to show sparkles outside their bounds. */
#home .hot:not(.hot-card){
  position:absolute !important;
  overflow:visible !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  outline:none !important;
  transform:none !important;
}
#home .hot:not(.hot-card):hover,
#home .hot:not(.hot-card):focus-visible{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  outline:none !important;
  transform:none !important;
}

#home .object-sparkles{
  position:absolute;
  left:50%;
  top:-24px;
  width:86px;
  height:48px;
  transform:translateX(-50%) translateY(5px) scale(.88);
  opacity:0;
  pointer-events:none;
  z-index:96;
  transition:opacity .16s ease, transform .2s cubic-bezier(.2,.9,.25,1.35);
  filter:drop-shadow(0 2px 3px rgba(72,52,28,.14));
}

#home .object-sparkle{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-family:Georgia,serif;
  font-weight:700;
  text-shadow:
    0 0 6px rgba(255,255,248,.98),
    0 0 14px currentColor,
    0 1px 1px rgba(104,72,34,.14);
}

#home .object-sparkle.s1{left:30px;top:0;font-size:34px;color:#F8D76F;transform:rotate(-8deg);}
#home .object-sparkle.s2{left:4px;top:19px;font-size:25px;color:#F3A7B8;transform:rotate(9deg);}
#home .object-sparkle.s3{right:4px;top:17px;font-size:27px;color:#9ED8C3;transform:rotate(-3deg);}

#home .hot:not(.hot-card):hover .object-sparkles,
#home .hot:not(.hot-card):focus-visible .object-sparkles{
  opacity:1;
  transform:translateX(-50%) translateY(0) scale(1);
}

#home .hot:not(.hot-card):hover .object-sparkle.s1,
#home .hot:not(.hot-card):focus-visible .object-sparkle.s1{animation:tomoniObjectSparklePopA .58s ease both;}
#home .hot:not(.hot-card):hover .object-sparkle.s2,
#home .hot:not(.hot-card):focus-visible .object-sparkle.s2{animation:tomoniObjectSparklePopB .58s .06s ease both;}
#home .hot:not(.hot-card):hover .object-sparkle.s3,
#home .hot:not(.hot-card):focus-visible .object-sparkle.s3{animation:tomoniObjectSparklePopC .58s .12s ease both;}

/* Float each trio above the visual center of the furniture/object. */
#home .hot:not(.hot-card)[data-go="feelings"] .object-sparkles{top:-8px;left:49%;}
#home .hot:not(.hot-card)[data-go="build"] .object-sparkles{top:-16px;left:52%;}
#home .hot:not(.hot-card)[data-go="toolkit"] .object-sparkles{top:-22px;left:50%;}
#home .hot:not(.hot-card)[data-go="think"] .object-sparkles{top:-34px;left:50%;}
#home .hot:not(.hot-card)[data-therapist] .object-sparkles{top:-30px;left:50%;}

@keyframes tomoniObjectSparklePopA{
  0%{transform:scale(.55) rotate(-12deg);opacity:0}
  45%{transform:scale(1.24) rotate(7deg);opacity:1}
  100%{transform:scale(1) rotate(-8deg);opacity:1}
}
@keyframes tomoniObjectSparklePopB{
  0%{transform:scale(.55) rotate(4deg);opacity:0}
  45%{transform:scale(1.2) rotate(-9deg);opacity:1}
  100%{transform:scale(1) rotate(9deg);opacity:1}
}
@keyframes tomoniObjectSparklePopC{
  0%{transform:scale(.55) rotate(7deg);opacity:0}
  45%{transform:scale(1.2) rotate(9deg);opacity:1}
  100%{transform:scale(1) rotate(-3deg);opacity:1}
}

@media(prefers-reduced-motion:reduce){
  #home .object-sparkle{animation:none !important;}
  #home .object-sparkles{transition:none !important;}
}