/* ================================================================
   CURSOR — Magnetic Dot + Ring Follower with "VIEW" morph
   ================================================================ */

/* Legacy IDs (#cursor / #cursor-follower) retained by existing HTML.
   Fresh behaviour driven via .cursor-dot + .cursor-ring classes. */

.cursor,
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: #f1ece5;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(-100px, -100px, 0);
  mix-blend-mode: difference;
  will-change: transform;
  transition: width 0.3s var(--ease-out),
              height 0.3s var(--ease-out),
              background-color 0.3s;
}

.cursor-follower,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 1px solid rgba(241, 236, 229, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.45s var(--ease-out),
              height 0.45s var(--ease-out),
              margin 0.45s var(--ease-out),
              border-color 0.3s,
              mix-blend-mode 0.3s,
              background-color 0.3s,
              opacity 0.3s;
}

.cursor-ring__label {
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s var(--ease-out),
              transform 0.3s var(--ease-out);
  pointer-events: none;
}

/* Hover state on <a>, <button>, [data-magnetic] */
.cursor-dot.is-hover,
.cursor.is-active {
  width: 6px;
  height: 6px;
  background: var(--gold);
}
.cursor-ring.is-hover,
.cursor-follower.is-active {
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border-color: rgba(241, 236, 229, 0.9);
  mix-blend-mode: difference;
}

/* Hover state on images — "VIEW" morph */
.cursor-dot.is-image,
.cursor.is-image {
  opacity: 0;
}
.cursor-ring.is-image {
  width: 110px;
  height: 110px;
  margin: -55px 0 0 -55px;
  border-color: transparent;
  background: var(--gold);
  mix-blend-mode: normal;
}
.cursor-ring.is-image .cursor-ring__label {
  opacity: 1;
  transform: scale(1);
  color: var(--dark);
}

/* Hide on touch / reduced motion */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .cursor, .cursor-follower, .cursor-dot, .cursor-ring { display: none; }
  html, body, a, button { cursor: auto; }
}