/* Animated cursor: dot + trailing ring. Disabled for touch & prefers-reduced-motion in JS. */
body.cursor-fx--on {
    cursor: none;
}

body.cursor-fx--on .cursor-fx,
body.cursor-fx--on .cursor-fx * {
    pointer-events: none;
}

.cursor-fx {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    overflow: visible;
    z-index: 10050;
    opacity: 0;
    transition: opacity 0.25s ease;
    will-change: transform, opacity;
}

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

body.cursor-fx--intro .cursor-fx__ring {
    animation: cursor-ring-intro 0.7s cubic-bezier(0.2, 0.95, 0.2, 1) both;
}

body.cursor-fx--intro .cursor-fx__dot {
    animation: cursor-dot-intro 0.6s cubic-bezier(0.2, 0.95, 0.2, 1) both;
}

.cursor-fx__ring {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 2px solid rgba(255, 107, 0, 0.75);
    border-radius: 50%;
    background: rgba(26, 43, 77, 0.06);
    box-shadow: 0 0 0 1px rgba(26, 43, 77, 0.08) inset;
    transition: border-color 0.2s ease, background 0.2s ease, filter 0.2s ease;
    transform-origin: center;
}

body.cursor-fx--link .cursor-fx__ring {
    border-color: #ff6b00;
    background: rgba(255, 107, 0, 0.1);
    filter: drop-shadow(0 0 10px rgba(255, 107, 0, 0.35));
}

.cursor-fx__dot {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: #1a2b4d;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
    transition: background 0.2s ease, box-shadow 0.2s ease;
    transform-origin: center;
}

body.cursor-fx--link .cursor-fx__dot {
    background: #ff6b00;
    box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.2);
}

body.cursor-fx--scrolling .cursor-fx__ring {
    border-color: rgba(255, 107, 0, 0.92);
    background: rgba(255, 107, 0, 0.14);
    filter: drop-shadow(0 0 12px rgba(255, 107, 0, 0.28));
}

body.cursor-fx--scrolling .cursor-fx__dot {
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.16);
}

@keyframes cursor-ring-intro {
    0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(0.35);
    }
    65% {
        opacity: 1;
        transform: translate3d(0, -5px, 0) scale(1.08);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes cursor-dot-intro {
    0% {
        opacity: 0;
        transform: translate3d(-10px, 10px, 0) scale(0.2);
    }
    60% {
        opacity: 1;
        transform: translate3d(4px, -4px, 0) scale(1.15);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.touch-fx-trail {
    position: fixed;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    background: rgba(255, 107, 0, 0.22);
    border: 2px solid rgba(255, 107, 0, 0.7);
    box-shadow: 0 0 0 8px rgba(255, 107, 0, 0.08);
    transform: scale(0.6);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    z-index: 10060;
}

.touch-fx-trail.is-visible {
    opacity: 1;
    transform: scale(1);
}

.touch-fx-pulse {
    position: fixed;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    background: rgba(255, 107, 0, 0.2);
    border: 2px solid rgba(255, 107, 0, 0.62);
    pointer-events: none;
    z-index: 10059;
    animation: touchPulse 0.52s ease-out forwards;
}

@keyframes touchPulse {
    0% {
        transform: scale(0.6);
        opacity: 1;
    }
    100% {
        transform: scale(3.3);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.cursor-fx--on {
        cursor: auto;
    }
    .cursor-fx {
        display: none !important;
    }
    .touch-fx-trail,
    .touch-fx-pulse {
        display: none !important;
    }
}