/* Pearl cursor: a small glowing pearl that follows a real mouse and swells
   open over anything clickable. Only switched on by /assets/js/pearl-cursor.js
   when the device has a fine pointer that can hover (desktop mouse/trackpad);
   phones and tablets never see it and keep their normal behaviour. */

.pearl {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  will-change: transform;
}
.pearl.is-visible { opacity: 1; }
.pearl.is-text { opacity: 0; }

.pearl__orb {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(199, 154, 161, .55);
  background-color: rgba(244, 232, 233, 0);
  box-shadow:
    0 0 8px 1px rgba(199, 154, 161, .55),
    0 0 20px 5px rgba(233, 212, 214, .45);
  transform: translate(-50%, -50%) scale(1);
  transition:
    width .28s cubic-bezier(.2, .8, .2, 1),
    height .28s cubic-bezier(.2, .8, .2, 1),
    background-color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    transform .15s ease;
}

/* The pearl itself: ivory highlight, blush body, rose edge. */
.pearl__orb::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,
    #FFFFFF 0%,
    #FAF8F5 18%,
    #F4E8E9 45%,
    #E9D4D6 68%,
    #C79AA1 100%);
  box-shadow: inset 0 -2px 3px rgba(122, 91, 63, .22);
  transition: opacity .22s ease, transform .28s ease;
}

/* Over a link or button: opens into a translucent ring so the text stays readable. */
.pearl.is-hover .pearl__orb {
  width: 50px;
  height: 50px;
  border: 1.5px solid #C79AA1;
  background-color: rgba(233, 212, 214, .22);
  box-shadow:
    0 0 14px 3px rgba(199, 154, 161, .55),
    0 0 34px 10px rgba(233, 212, 214, .40),
    inset 0 0 12px rgba(199, 154, 161, .25);
}
.pearl.is-hover .pearl__orb::before { opacity: 0; transform: scale(.4); }

/* Press feedback. */
.pearl.is-down .pearl__orb { transform: translate(-50%, -50%) scale(.82); }

@media (hover: hover) and (pointer: fine) {
  html.pearl-cursor,
  html.pearl-cursor * { cursor: none !important; }

  /* Typing stays normal: the regular caret shows in text fields. */
  html.pearl-cursor input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="image"]),
  html.pearl-cursor textarea,
  html.pearl-cursor [contenteditable=""],
  html.pearl-cursor [contenteditable="true"] { cursor: text !important; }
}

/* Reduced motion: the pearl sits exactly on the pointer (no lag) and changes
   state instantly, with no growing or fading animation. */
@media (prefers-reduced-motion: reduce) {
  .pearl,
  .pearl__orb,
  .pearl__orb::before { transition: none !important; }
}

@media print {
  .pearl { display: none !important; }
}