/*------------------------------------------------------------------*\
    COMPONENTS - Mouse Follower
    Cuberto Mouse Follower v1.1.2 — https://github.com/Cuberto/mouse-follower
    Replaces the legacy [data-cursor] custom cursor. Data-attribute API:
      data-cursor="-pointer"      → grow over links/buttons
      data-cursor="-hidden"       → hide over a target
      data-cursor-text="View"     → label inside the cursor
      data-cursor-img="url(...)"  → image inside the cursor
      data-cursor-stick="<sel>"   → magnetic stick

    Colour rule (per cliente):
      • Light: #303030 (dark fill on light surfaces)
      • Dark : #D0D0D0 (--neutral-100 — inverse of #303030)
    No green. The cursor uses a token (--mf-color) so dark-mode just
    overrides it; no JS-side updates needed.

    Touch / coarse pointer: hidden via @media + the JS init bails.
\*------------------------------------------------------------------*/

/* Local tokens (scoped to the cursor) */
.mf-cursor {
    /* Binary palette per cliente — only #303030 OR #ffffff are valid.
       Default = #303030 for light theme; dark-theme + section-context
       rules below swap to #ffffff where needed. */
    --mf-color: #303030;
    --mf-size: 10px;                         /* small dot — native cursor stays visible alongside */
    --mf-size-pointer: 20px;                 /* enlarged for links/buttons */
    --mf-size-text: 96px;                    /* circle behind label */
    /* Max signed-int32 — guarantees the cursor sits above every other
       stacking context (sticky headers, Elementor lightboxes, building-map
       tooltip at 9999, etc.). Matches the legacy cursor.css pattern and
       what libs like Blobity use in invert mode. */
    --mf-z: 2147483647;
}

/* Dark theme default → white (matches the binary palette rule). */
[data-theme="dark"] .mf-cursor {
    --mf-color: #ffffff;
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .mf-cursor {
        --mf-color: #ffffff;
    }
}

/* Section context overrides — JS toggles one of these classes based on
   the closest ancestor of the pointer target. These win over the theme
   default at equal specificity by appearing later in source order.
   Light bands include forced-light components like .rb-table-apts and
   .apt-listing (see mouse-follower.js → LIGHT_BAND_SELECTOR), so the
   cursor stays readable when those render light inside dark theme. */
.mf-cursor.mf-cursor--on-dark  { --mf-color: #ffffff; }
.mf-cursor.mf-cursor--on-light { --mf-color: #303030; }

/* Label colour follows the inverse rule of the fill so it stays readable. */
.mf-cursor.mf-cursor--on-dark  .mf-cursor-text { color: #303030; }
.mf-cursor.mf-cursor--on-light .mf-cursor-text { color: #ffffff; }

/* Native cursor stays visible — the follower is a small dot trailing
   alongside the OS cursor, not a replacement. (Earlier rule that hid the
   native cursor under .has-mouse-follower was intentionally removed.) */

/* ── Base cursor element ── */
.mf-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--mf-size);
    height: var(--mf-size);
    margin-left: calc(var(--mf-size) / -2);
    margin-top: calc(var(--mf-size) / -2);

    background-color: var(--mf-color);
    border-radius: 50%;
    pointer-events: none;
    z-index: var(--mf-z);

    /* GSAP drives x/y via transform; this sits at 0,0 then translates. */
    will-change: transform, width, height, opacity;

    /* Smooth shape/size transitions on state changes */
    transition:
        width 0.25s ease,
        height 0.25s ease,
        margin 0.25s ease,
        opacity 0.2s ease,
        background-color 0.2s ease,
        border-radius 0.25s ease;
}

/* Inner wrapper — used by the lib to host text/media nodes. */
.mf-cursor-inner {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: inherit;
    overflow: hidden;
}

/* ── Hidden state ── */
.mf-cursor.-hidden {
    opacity: 0;
}

/* ── Active (mousedown) — gentle squish ── */
.mf-cursor.-active .mf-cursor-inner {
    transform: scale(0.85);
    transition: transform 0.12s ease;
}

/* ── Theme buttons — magnetic stick + small grow (Cuberto-style).
   The cursor stays a SMALL CIRCLE; the JS just anchors its position to
   the button centre via setStick(). Size is a single token shared by
   both states so it's easy to tweak from one place.
     .c-button         → white fill   (paired with dark CTAs)
     .c-secondary-button → #303030 fill (paired with light CTAs) */
.mf-cursor.-c-button,
.mf-cursor.-c-secondary {
    --mf-size-btn: 18px;                     /* 1.6× the default --mf-size (10px) */
    width: var(--mf-size-btn);
    height: var(--mf-size-btn);
    margin-left: calc(var(--mf-size-btn) / -2);
    margin-top: calc(var(--mf-size-btn) / -2);
    opacity: 1;                              /* override the -pointer fade-out */
    mix-blend-mode: normal;
}
.mf-cursor.-c-button    { --mf-color: #ffffff; }
.mf-cursor.-c-secondary { --mf-color: #303030; }

/* ── Elementor nav items (.elementor-item) ──
   Same SIZE + opacity rules as the button states, but the colour is set
   inline by JS (mouse-follower.js → inverseOfTextColor) because a single
   selector covers items with light AND dark text. The JS picks the
   inverse of the item's computed colour and writes it into --mf-color. */
.mf-cursor.mf-cursor--on-menu {
    --mf-size-menu: 18px;                    /* matches --mf-size-btn (1.6× default) */
    width: var(--mf-size-menu);
    height: var(--mf-size-menu);
    margin-left: calc(var(--mf-size-menu) / -2);
    margin-top: calc(var(--mf-size-menu) / -2);
    opacity: 1;                              /* override the -pointer fade-out */
    mix-blend-mode: normal;
}

/* ── Text state (data-cursor-text="View") ── */
.mf-cursor.-text {
    width: var(--mf-size-text);
    height: var(--mf-size-text);
    margin-left: calc(var(--mf-size-text) / -2);
    margin-top: calc(var(--mf-size-text) / -2);
}

/* Label uses the inverse colour so it reads on top of the cursor fill.
   Light theme: fill #303030 → text white. Dark theme: fill #D0D0D0 → text #303030. */
.mf-cursor-text {
    color: #ffffff;
    font-family: var(--font-primary, inherit);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    user-select: none;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.mf-cursor.-text .mf-cursor-text {
    opacity: 1;
}
[data-theme="dark"] .mf-cursor-text {
    color: #303030;
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .mf-cursor-text {
        color: #303030;
    }
}

/* ── Media (data-cursor-img / data-cursor-video) ── */
.mf-cursor-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.mf-cursor.-media {
    width: 180px;
    height: 180px;
    margin-left: -90px;
    margin-top: -90px;
    background-color: transparent;
}
.mf-cursor.-media .mf-cursor-media {
    opacity: 1;
}
.mf-cursor-media-box {
    width: 100%;
    height: 100%;
}
.mf-cursor-media-box img,
.mf-cursor-media-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Icon state (rare; uses external SVG sprite — not wired by default) ── */
.mf-cursor.-icon {
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .mf-cursor {
        transition: none;
    }
}

/* ── Touch / coarse pointers: belt + braces (JS already bails) ── */
@media (pointer: coarse) {
    .mf-cursor { display: none !important; }
}