/* ==========================================================
   Real-estate cursor (cursor-realestate.css) – compact version
   Small gold house + fine surveyor's ring. On links / images the
   ring grows only a little and a small label tag appears beside it.
   ========================================================== */
:root { --re-gold: #c9982a; --re-ink: #16130d; --re-ease: cubic-bezier(.16, 1, .3, 1); }

html.re-on, html.re-on * { cursor: none !important; }
html.re-on input, html.re-on textarea, html.re-on select { cursor: text !important; }

.re-cursor { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; opacity: 0; transition: opacity .3s ease; }
.re-cursor.is-shown { opacity: 1; }
.re-cursor.is-hidden { opacity: 0; }

.re-ring, .re-dot, .re-pulse { position: fixed; left: 0; top: 0; pointer-events: none; will-change: transform; }

/* house pointer (small) */
.re-dot { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
.re-dot svg { width: 100%; height: 100%; display: block; transition: scale .3s var(--re-ease); }
.re-cursor.is-link .re-dot svg, .re-cursor.is-media .re-dot svg { scale: .85; }
.re-cursor.is-down .re-dot svg { scale: .75; }

/* fine crosshair ring (ticks at N, S, W, E) */
.re-body {
  position: absolute; left: 0; top: 0; width: 30px; height: 30px;
  transform: translate(-50%, -50%);
  border: 1.2px solid rgba(201,152,42,.7); border-radius: 50%;
  background:
    linear-gradient(var(--re-gold), var(--re-gold)) 50% 0 / 1.2px 5px no-repeat,
    linear-gradient(var(--re-gold), var(--re-gold)) 50% 100% / 1.2px 5px no-repeat,
    linear-gradient(var(--re-gold), var(--re-gold)) 0 50% / 5px 1.2px no-repeat,
    linear-gradient(var(--re-gold), var(--re-gold)) 100% 50% / 5px 1.2px no-repeat;
  transition: width .4s var(--re-ease), height .4s var(--re-ease), background-color .3s ease,
              border-color .3s ease, scale .25s ease;
}
.re-cursor.is-link .re-body  { width: 40px; height: 40px; background-color: rgba(201,152,42,.16); border-color: var(--re-gold); }
.re-cursor.is-media .re-body { width: 40px; height: 40px; background-color: rgba(22,19,13,.10); border-color: var(--re-ink); }
.re-cursor.is-down .re-body  { scale: .85; }

/* small label tag beside the pointer */
.re-label {
  position: absolute; left: 20px; top: 16px; white-space: nowrap;
  font: 600 11px/1 'Inter', system-ui, sans-serif; letter-spacing: .02em;
  padding: 5px 9px; border-radius: 999px;
  background: var(--re-gold); color: var(--re-ink);
  opacity: 0; scale: .85; transform-origin: 0 0;
  transition: opacity .2s ease, scale .3s var(--re-ease);
}
.re-cursor.is-link .re-label, .re-cursor.is-media .re-label { opacity: 1; scale: 1; }
.re-cursor.is-media .re-label { background: var(--re-ink); color: #fff; }
.re-cursor.is-flip .re-label { left: auto; right: 20px; transform-origin: 100% 0; }

/* click: small plot-marker stamp */
.re-pulse {
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 1.2px solid var(--re-gold);
  animation: re-stamp .8s var(--re-ease) forwards;
}
@keyframes re-stamp {
  from { opacity: .95; transform: translate3d(var(--x), var(--y), 0) scale(.4) rotate(0deg); }
  to   { opacity: 0;   transform: translate3d(var(--x), var(--y), 0) scale(2) rotate(45deg); }
}