/* ==========================================================================
   AURELLE — Custom Cursor
   A small rotating facet (rhombus), not a generic dot-and-ring. It spins
   slowly at rest, stretches into a fine line while the page scrolls fast,
   and expands into a soft disc with a text label over interactive
   elements. Hidden entirely on touch devices.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

  body { cursor: none; }
  a, button, [role="button"] { cursor: none; }

  .cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    pointer-events: none;
    z-index: var(--z-cursor);
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--c-black);
    transition: width var(--dur-fast) var(--ease-out-soft),
                height var(--dur-fast) var(--ease-out-soft),
                background-color var(--dur-fast) var(--ease-out-soft),
                border-radius var(--dur-fast) var(--ease-out-soft);
    will-change: transform;
  }

  [data-theme="dark"] .cursor { background: var(--c-gold-light); }

  .cursor__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-45deg);
    font-family: var(--font-body);
    font-size: 0.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    color: var(--c-ivory);
    white-space: nowrap;
    transition: opacity var(--dur-fast) ease;
  }

  .cursor.is-hover {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--c-black);
  }
  [data-theme="dark"] .cursor.is-hover { background: var(--c-gold); }
  .cursor.is-hover .cursor__label { opacity: 1; }

  .cursor.is-media {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(14, 13, 12, 0.85);
  }

  .cursor.is-down { width: 6px; height: 6px; }

  .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border: 1px solid var(--c-gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: calc(var(--z-cursor) - 1);
    transform: translate(-50%, -50%);
    opacity: 0.5;
    will-change: transform;
  }

  .cursor.is-hover ~ .cursor-ring,
  .cursor.is-media ~ .cursor-ring { opacity: 0; }
}

@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor, .cursor-ring { display: none; }
  body, a, button { cursor: auto; }
}