/* =========================================================
   EMPATHIZE COMPONENT
   Comes after the door section. Artwork: assets/empathize/svg/ll.svg
   (its images are in assets/empathize/images). Behaviour: js/empathize/main.js
   ========================================================= */

.empathize-section {
  /* sits above the fixed dots / grid-lines layers */
  position: relative;
  z-index: 1;

  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Hidden until the door's square opening has finished (js/door/main.js) */
.empathize-section.is-waiting {
  visibility: hidden;
}

.empathize-wrap {
  position: relative;
  width: 100%;
  max-width: 1280px;
  aspect-ratio: 1280 / 1000;
}

.empathize-design {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .4s ease;
}

.empathize-design.loaded { opacity: 1; }

/* Transparent layer on top of the artwork that catches hover on the mic */
.empathize-hotspots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;      /* only the polygon below reacts */
}

#empathize-mic-hotspot {
  fill: transparent;
  pointer-events: all;
  cursor: pointer;
}