/**
 * Cursor-reactive ambience — spotlight, ring, parallax, magnetic hovers.
 * Desktop pointer only; disabled when reduced motion is preferred.
 */

:root {
    --pointer-x: 0;
    --pointer-y: 0;
}

.has-cursor-fx:not(.using-keyboard) {
    cursor: none;
}

.has-cursor-fx:not(.using-keyboard) a,
.has-cursor-fx:not(.using-keyboard) button {
    cursor: none;
}

.has-cursor-fx a:focus-visible,
.has-cursor-fx button:focus-visible {
    cursor: pointer;
}

.has-cursor-fx.using-keyboard {
    cursor: auto;
}

.has-cursor-fx.using-keyboard a,
.has-cursor-fx.using-keyboard button {
    cursor: pointer;
}

.has-cursor-fx.using-keyboard .cursor-fx {
    opacity: 0;
    visibility: hidden;
}

.cursor-fx {
    position: fixed;
    inset: 0;
    z-index: 150;
    pointer-events: none;
    overflow: hidden;
    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}

.cursor-fx.is-idle {
    opacity: 0;
}

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

.cursor-glow {
    width: 28rem;
    height: 28rem;
    margin: -14rem 0 0 -14rem;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-accent) 22%, transparent) 0%,
        color-mix(in srgb, var(--color-accent) 8%, transparent) 34%,
        transparent 68%
    );
    opacity: 0.85;
    filter: blur(2px);
}

.cursor-ring {
    width: 2.5rem;
    height: 2.5rem;
    margin: -1.25rem 0 0 -1.25rem;
    border: 1.5px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
    border-radius: 50%;
    transition:
        width 0.12s var(--ease-spring),
        height 0.12s var(--ease-spring),
        margin 0.12s var(--ease-spring),
        border-color 0.1s ease,
        opacity 0.1s ease;
}

.cursor-ring.is-hovering {
    width: 3.5rem;
    height: 3.5rem;
    margin: -1.75rem 0 0 -1.75rem;
    border-color: var(--color-accent);
    opacity: 0.95;
}

.cursor-ring.is-pressed {
    width: 1.75rem;
    height: 1.75rem;
    margin: -0.875rem 0 0 -0.875rem;
}

.cursor-dot {
    width: 0.375rem;
    height: 0.375rem;
    margin: -0.1875rem 0 0 -0.1875rem;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 80%, transparent);
    transition: transform 0.08s var(--ease-spring);
}

.cursor-dot.is-pressed {
    transform: scale(0.55);
}

/* Pointer parallax */

.has-cursor-fx [data-reveal="hero"] .hero-name {
    transform: translate(calc(var(--pointer-x) * 18px), calc(var(--pointer-y) * 12px));
    transition: transform 0.18s var(--ease-out);
}

.has-cursor-fx [data-reveal="hero"] .hero-tagline {
    transform: translate(calc(var(--pointer-x) * -12px), calc(var(--pointer-y) * 8px));
    transition: transform 0.22s var(--ease-out);
}

.has-cursor-fx [data-reveal="hero"] .social-links {
    transform: translate(calc(var(--pointer-x) * 8px), calc(var(--pointer-y) * 10px));
    transition: transform 0.2s var(--ease-out);
}

.has-cursor-fx .page-main {
    transform: translate(calc(var(--pointer-x) * -6px), calc(var(--pointer-y) * -4px));
    transition: transform 0.25s var(--ease-out);
}

/* Magnetic elements */

[data-magnetic] {
    --mx: 0px;
    --my: 0px;
    transform: translate(var(--mx), var(--my));
    transition: transform 0.12s var(--ease-spring);
}

html:not([data-theme="sketch"]) .has-cursor-fx .social-link {
    transform: translate(var(--mx, 0px), var(--my, 0px));
}

html:not([data-theme="sketch"]) .has-cursor-fx .social-link:hover {
    transform: translate(var(--mx, 0px), var(--my, 0px)) translateY(-3px) scale(1.04) rotate(-1deg);
}

html:not([data-theme="sketch"]) .has-cursor-fx .theme-btn {
    transform: translate(var(--mx, 0px), var(--my, 0px));
}

html:not([data-theme="sketch"]) .has-cursor-fx .skill-tag:hover,
html:not([data-theme="sketch"]) .has-cursor-fx [data-stagger="skills"] > *:hover {
    transform: translate(var(--mx, 0px), var(--my, 0px)) translateY(-4px) rotate(2deg) scale(1.05);
}

.has-cursor-fx .github-dashboard-link:hover {
    transform: translateY(-1px);
}

html:not([data-theme="sketch"]) .has-cursor-fx .github-stat:hover {
    transform: translate(var(--mx, 0px), var(--my, 0px)) translateY(-4px) skewX(-2deg);
}

html:not([data-theme="sketch"]) .has-cursor-fx .hero-contact {
    transform: translate(var(--mx, 0px), var(--my, 0px));
}

html:not([data-theme="sketch"]) .has-cursor-fx .hero-contact:hover {
    transform: translate(var(--mx, 0px), var(--my, 0px)) translateY(-2px) scale(1.02);
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
    .has-cursor-fx {
        cursor: auto;
    }

    .has-cursor-fx a,
    .has-cursor-fx button {
        cursor: pointer;
    }

    .cursor-fx {
        display: none;
    }

    .has-cursor-fx .page-main,
    .has-cursor-fx [data-reveal="hero"] .hero-name,
    .has-cursor-fx [data-reveal="hero"] .hero-tagline,
    .has-cursor-fx [data-reveal="hero"] .social-links {
        transform: none;
    }
}