/**
 * cursor.css
 * SiteCursor — the brand dot as a custom cursor.
 *
 * The root element is positioned by JS (translate3d); this file owns
 * everything else: the dot, its states, and the label.
 *
 * States (classes on .site-cursor, toggled by cursor.js):
 *   --visible   pointer is over the document
 *   --active    pointer is over a [data-cursor-label] target (dot grows)
 *   --pressed   mouse button is down
 *
 * The native cursor is hidden ONLY over labelled targets, and only when
 * JS has enabled the component (html.site-cursor-enabled) — so users
 * never lose their pointer if scripts fail.
 */

.site-cursor {
    /* Sizing tokens — everything scales from these two. */
    --cursor-size: 88px;          /* grown (labelled) diameter          */
    --cursor-scale-idle: 0.14;    /* idle dot ≈ 12px at the default size */

    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;               /* above .site-loader (9999)           */
    pointer-events: none;

    opacity: 0;
    transition: opacity 0.25s ease;
}

.site-cursor--visible {
    opacity: 1;
}

/* ── The dot ──────────────────────────────────────────────────────────
   Rendered at full size and scaled DOWN when idle — scaling down keeps
   the circle edge crisp during the grow transition (no raster blur-up). */
.site-cursor__dot {
    --_scale: var(--cursor-scale-idle);

    position: absolute;
    top: 0;
    left: 0;
    width: var(--cursor-size);
    height: var(--cursor-size);
    border-radius: var(--border-radius);
    background: var(--primary, #252525);

    transform: translate(-50%, -50%) scale(var(--_scale));
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* Pressed while idle — a small acknowledging squeeze. */
.site-cursor--pressed .site-cursor__dot {
    --_scale: calc(var(--cursor-scale-idle) * 0.8);
}

/* Over a labelled target — grow to full size. */
.site-cursor--active .site-cursor__dot {
    --_scale: 1;
}

/* Pressed while active — squeeze from full size. */
.site-cursor--active.site-cursor--pressed .site-cursor__dot {
    --_scale: 0.9;
}

/* ── The label ──────────────────────────────────────────────────────── */
.site-cursor__label {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);

    max-width: calc(var(--cursor-size) * 0.85);
    font-size: calc(var(--cursor-size) * 0.14);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: center;
    line-height: 1.1;
    color: var(--cursor-label-colour, #fff);

    opacity: 0;
    transition: opacity 0.2s ease;
}

.site-cursor--active .site-cursor__label {
    opacity: 1;
    transition-delay: 0.08s;      /* let the dot grow under it first */
}

/* ── Native cursor ────────────────────────────────────────────────────
   Hidden only over labelled targets, and only once JS has enabled the
   component. No JS (or coarse pointer) → native cursor everywhere. */
html.site-cursor-enabled [data-cursor-label],
html.site-cursor-enabled [data-cursor-label] * {
    cursor: none;
}

/* ── Reduced motion ───────────────────────────────────────────────────
   JS snaps position (no lerp trail); CSS snaps the state changes. */
@media (prefers-reduced-motion: reduce) {
    .site-cursor,
    .site-cursor__dot,
    .site-cursor__label {
        transition: none;
    }
}