/* Custom Cursor — Optimized (P1 + P3)
   ✅ P1: Cursor dùng transform thay vì left/top
      → top: 0; left: 0; là origin point
      → JS set: transform: translate(mouseX, mouseY)
      → Không còn gây reflow
*/

/* Ẩn cursor hệ thống */
body {
    cursor: none;
}

a,
button,
.btn-ripple {
    cursor: none !important;
}

/* Cursor Dot — Chấm nhỏ theo chuột ngay lập tức */
.cursor-dot {
    width: 8px;
    height: 8px;
    background: #D9FF00;
    border-radius: 50%;
    position: fixed;
    /* ✅ Origin tại (0,0) — JS sẽ set transform: translate(x, y) */
    top: -4px;  /* Offset nửa size để căn giữa với con trỏ */
    left: -4px;
    pointer-events: none;
    z-index: 9999;
    /* ✅ will-change: transform → hint GPU tạo sẵn composite layer */
    will-change: transform;
    transition: opacity 0.15s;
    /* ✅ P2: Bỏ mix-blend-mode:difference → giải phóng GPU blending operation */
    /* mix-blend-mode: difference; */
}

/* Dot thay đổi khi hover — JS xử lý class toggle, CSS transition tự chạy */
.cursor-dot.hover {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.8);
}

/* Cursor Ring — Vòng tròn theo sau với độ trễ */
.cursor-ring {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(217, 255, 0, 0.4);
    border-radius: 50%;
    position: fixed;
    /* ✅ Origin tại (-20px, -20px) để căn giữa với con trỏ (half of 40px) */
    top: -20px;
    left: -20px;
    pointer-events: none;
    z-index: 9998;
    /* ✅ will-change → GPU ready */
    will-change: transform;
    transition: width 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                border-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                opacity 0.2s;
    /* NOTE: Không transition transform — JS xử lý bằng lerp */
}

/* Ring phóng to khi hover */
.cursor-ring.hover {
    width: 60px;
    height: 60px;
    /* ✅ Giữ đúng offset khi hover: half of 60px = 30px */
    top: -30px;
    left: -30px;
    border-color: rgba(255, 255, 255, 0.6);
}

/* Cursor Trail — bỏ nếu không dùng, giảm DOM elements */
.cursor-trail {
    width: 4px;
    height: 4px;
    background: #D9FF00;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9997;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Ẩn custom cursor trên mobile / touch device */
@media (max-width: 768px),
(hover: none) {
    body {
        cursor: auto;
    }

    a,
    button,
    .btn-ripple {
        cursor: pointer !important;
    }

    .cursor-dot,
    .cursor-ring,
    .cursor-trail {
        display: none;
    }
}