/* ================================================
   CURSOR.CSS — Gota / Lágrima Delicada
   Wrapper segue o mouse via JS (translate3d).
   Filhos são absolute centrados em translate(-50%,-50%).
   ================================================ */

@media (hover: hover) and (pointer: fine) {
  *, *::before, *::after { cursor: none !important; }
}

#cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  /* transform aplicado via JS */
}

/* ---- Aura — anel difuso ao redor ---- */
.cur-aura {
  position: absolute;
  top: 0; left: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(140, 45, 59, 0.28);
  background: rgba(140, 45, 59, 0.05);
  transform: translate(-50%, -50%);
  transition:
    width         480ms var(--ease-spring),
    height        480ms var(--ease-spring),
    border-radius 480ms var(--ease-spring),
    border-color  300ms ease,
    background    300ms ease,
    opacity       250ms ease;
  will-change: width, height;
}

/* ---- Corpo da gota ---- */
.cur-drop {
  position: absolute;
  top: 0; left: 0;
  width: 12px; height: 16px;
  /* border-radius e transform sobrepostos via JS no tick() */
  transform: translate(-50%, -50%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--rose);
  opacity: 0.85;
  transition:
    width         380ms var(--ease-spring),
    height        380ms var(--ease-spring),
    background    280ms ease,
    opacity       220ms ease;
  /* border-radius e transform animados via JS, não via CSS transition */
  will-change: transform, border-radius;
}

/* Reflexo interno — toque de translucidez */
.cur-drop::after {
  content: '';
  position: absolute;
  top: 16%; left: 20%;
  width: 30%; height: 22%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  pointer-events: none;
}

/* ---- Label (aparece no estado CTA) ---- */
.cur-label {
  position: absolute;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: white;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  user-select: none;
}

/* ================================================
   ESTADOS
   ================================================ */

/* Hover: gota menor, aura respira */
#cursor.state-hover .cur-drop {
  width: 8px; height: 11px;
  opacity: 0.6;
}
#cursor.state-hover .cur-aura {
  width: 50px; height: 50px;
  border-color: rgba(140, 45, 59, 0.18);
}

/* CTA / agendar: gota some, aura vira pill com label */
#cursor.state-cta .cur-drop {
  width: 0; height: 0;
  opacity: 0;
}
#cursor.state-cta .cur-aura {
  width: 84px; height: 32px;
  border-radius: 999px;
  background: var(--rose);
  border-color: var(--rose);
  opacity: 0.92;
}
#cursor.state-cta .cur-label {
  opacity: 1;
}

/* Clique: gota "estoura" achatando */
#cursor.state-click .cur-drop {
  width: 18px; height: 9px;
  border-radius: 50% !important;
  opacity: 0.95;
}
#cursor.state-click .cur-aura {
  width: 46px; height: 46px;
  opacity: 0.4;
}