.quill {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
  width: var(--pen-w);
  height: calc(var(--pen-w) * 2);
  opacity: 0;
  pointer-events: none;
  transform-origin: calc(var(--pen-w) * 0.05) calc(var(--pen-w) * 1.95);
  will-change: transform;
}

.quill.is-visible {
  opacity: 1;
}

.quill__body {
  width: 100%;
  height: 100%;
}

.quill__body svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(2px 6px 5px rgba(40, 20, 5, 0.35)) drop-shadow(0 0 6px rgba(255, 214, 130, 0.35));
}

/* En reposo flota un poco, unas cuantas veces, y se queda quieta */
.quill.is-resting .quill__body {
  animation: quill-float 3.2s var(--ease-soft) 0.6s 3 both;
}

@keyframes quill-float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -4px; rotate: -2deg; }
}

.ink-spark {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 31;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7d6 0%, #f5c45c 55%, rgba(245, 196, 92, 0) 72%);
  opacity: 0;
  pointer-events: none;
}