/* ============================================
   PROPERUS LUXURY CURSOR
   Subtiler Roségold-Punkt mit Trail.
   Wird zur Linie über Text, vergrößert
   sich über Buttons. Magnetic-Pull auf CTAs.
   ============================================ */

/* Hide native cursor only when our cursor is active */
html.has-luxury-cursor,
html.has-luxury-cursor * {
  cursor: none !important;
}

/* Force back native cursor on inputs/textareas (typing UX) */
html.has-luxury-cursor input,
html.has-luxury-cursor textarea,
html.has-luxury-cursor [contenteditable="true"] {
  cursor: text !important;
}

/* The cursor itself — two layers */
.lux-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D4976F;
  pointer-events: none;
  z-index: 99999;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition:
    width 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.25s ease;
  will-change: transform;
  opacity: 0;
}

.lux-cursor.is-ready { opacity: 1; }

/* Outer ring — follows with delay */
.lux-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(212, 151, 111, 0.55);
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition:
    width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    border-width 0.3s ease,
    opacity 0.25s ease;
  will-change: transform;
  opacity: 0;
}

.lux-cursor-ring.is-ready { opacity: 1; }

/* Hover state: button — both elements grow & glow */
.lux-cursor.is-hover-button {
  width: 4px;
  height: 4px;
  background: #E8C9A8;
}
.lux-cursor-ring.is-hover-button {
  width: 64px;
  height: 64px;
  border-color: rgba(212, 151, 111, 0.9);
  border-width: 1.5px;
  background: rgba(212, 151, 111, 0.06);
}

/* Hover state: text — cursor becomes a vertical bar */
.lux-cursor.is-hover-text {
  width: 2px;
  height: 24px;
  border-radius: 1px;
  background: #D4976F;
}
.lux-cursor-ring.is-hover-text {
  opacity: 0;
}

/* Hover state: link — slightly bigger ring */
.lux-cursor.is-hover-link {
  width: 6px;
  height: 6px;
}
.lux-cursor-ring.is-hover-link {
  width: 48px;
  height: 48px;
  border-color: rgba(212, 151, 111, 0.7);
}

/* Click pulse */
.lux-cursor.is-click {
  width: 12px;
  height: 12px;
  background: #E8C9A8;
}
.lux-cursor-ring.is-click {
  width: 28px;
  height: 28px;
  border-width: 2px;
}

/* Hide on touch devices and small screens */
@media (hover: none), (pointer: coarse), (max-width: 980px) {
  .lux-cursor,
  .lux-cursor-ring {
    display: none !important;
  }
  html.has-luxury-cursor,
  html.has-luxury-cursor * {
    cursor: auto !important;
  }
}

/* Reduced motion: hide custom cursor entirely */
@media (prefers-reduced-motion: reduce) {
  .lux-cursor,
  .lux-cursor-ring {
    display: none !important;
  }
  html.has-luxury-cursor,
  html.has-luxury-cursor * {
    cursor: auto !important;
  }
}

/* ============================================
   MAGNETIC PULL — buttons hint a magnetic field
   ============================================ */
.lux-magnetic {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}