.custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  z-index: 1000;
  pointer-events: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  filter: none;
  transform-origin: center;
  rotate: none;
  scale: none;
  background: transparent;
  transition: none;
}

@media(pointer:fine) {
  body {
    cursor: default;
  }

  body * {
    cursor: default;
  }

  body.custom-cursor-ready {
    cursor: none;
  }

  body.custom-cursor-ready * {
    cursor: none;
  }

  .hero .collage-sticker {
    cursor: url('assets/tweezers-open.svg') 11 33,grab;
  }

  .hero .collage-sticker.is-dragging {
    cursor: url('assets/tweezers-closed.svg') 11 33,grabbing;
  }

  .hero .collage-sticker:active {
    cursor: url('assets/tweezers-closed.svg') 11 33,grabbing;
  }
}

@media(pointer:fine) {
  html {
    cursor: default;
  }
}

.custom-cursor .cursor-droplet {
  display: block;
  position: absolute;
  left: -16px;
  top: -16px;
  width: 40px;
  height: 40px;
  overflow: visible;
  fill: #293f39;
  transform-origin: 50% 50%;
  transition: opacity .28s ease,transform .35s ease;
}

.custom-cursor.is-tweezers .cursor-droplet {
  display: none;
}

.custom-cursor.is-bulb .cursor-droplet {
  opacity: 0;
  animation: dot-to-bulb .35s ease-out both;
}

.custom-cursor .cursor-bulb {
  position: absolute;
  display: block;
  left: -10px;
  top: -10px;
  width: 28px;
  height: 33.6px;
  overflow: visible;
  opacity: 0;
  transform: rotate(14deg) scale(.45,.65);
  transform-origin: 50% 42%;
  transition: opacity .28s ease,transform .35s cubic-bezier(.2,.75,.25,1);
  color: var(--ink);
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.custom-cursor.is-bulb .cursor-bulb {
  opacity: 1;
  transform: rotate(14deg) scale(1);
  animation: bulb-unfold .35s ease-out both;
}

.custom-cursor.is-tweezers .cursor-bulb {
  display: none;
}

.cursor-bulb .bulb-glass {
  fill: var(--pink);
  fill-opacity: 0;
  stroke: none;
  transition: fill-opacity .12s ease,filter .2s ease;
}

.cursor-bulb .bulb-rays {
  stroke: var(--pink);
  stroke-width: 2.1;
  opacity: 0;
  transition: opacity .18s ease;
}

.custom-cursor.is-lit .bulb-glass {
  fill-opacity: .22;
  filter: drop-shadow(0 0 5px var(--pink));
}

.custom-cursor.is-lit .bulb-rays {
  opacity: 1;
}

@media(prefers-reduced-motion:reduce) {
  .custom-cursor .cursor-bulb {
    transition: none;
  }

  .custom-cursor .cursor-droplet {
    transition: none;
  }

  .cursor-bulb .bulb-glass {
    transition: none;
  }

  .cursor-bulb .bulb-rays {
    transition: none;
  }
}

@keyframes dot-to-bulb {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  45% {
    opacity: .45;
    transform: rotate(14deg) scale(.8,1.45);
  }

  100% {
    opacity: 0;
    transform: rotate(14deg) scale(.5,1.7);
  }
}

@keyframes bulb-unfold {
  0% {
    opacity: 0;
    transform: rotate(14deg) scale(.45,.65);
  }

  40% {
    opacity: .5;
    transform: rotate(14deg) scale(.8,1.05);
  }

  100% {
    opacity: 1;
    transform: rotate(14deg) scale(1);
  }
}

@media(prefers-reduced-motion:reduce) {
  .custom-cursor.is-bulb .cursor-droplet {
    animation: none;
  }

  .custom-cursor.is-bulb .cursor-bulb {
    animation: none;
  }
}


:root{--pink:#e3b4a3}
