@keyframes ping {
    0% {
        transform: scale(0.6);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes bounceBar {
    0%, 100% {
        transform: scaleY(0.3);
    }
    50% {
        transform: scaleY(1.3);
    }
}

@media (hover: hover) and (pointer: fine) {
    html, body, a, button, [role="button"], input, textarea, select, .hm-acc-header, .sv-acc-header, .accordion-header {
        cursor: none !important;
    }

    .custom-cursor {
        opacity: 0;
        width: 8px;
        height: 8px;
        background-color: #F9A833;
        border-radius: 50%;
        position: fixed;
        left: 0;
        top: 0;
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 999999;
        transition: opacity 0.25s ease, width 0.2s, height 0.2s, background-color 0.2s, border-radius 0.2s;
        will-change: transform;
    }

    .custom-cursor-ring {
        opacity: 0;
        width: 36px;
        height: 36px;
        border: 1.5px solid #F9A833;
        border-radius: 50%;
        position: fixed;
        left: 0;
        top: 0;
        transform: translate(-50%, -50%);
        pointer-events: none;
        z-index: 999998;
        transition: opacity 0.25s ease, width 0.3s cubic-bezier(0.22, 1, 0.36, 1), height 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, background-color 0.3s, border-style 0.3s;
        will-change: transform;
    }

    .custom-cursor.is-active,
    .custom-cursor-ring.is-active {
        opacity: 1;
    }

    .custom-cursor-ring::before {
        content: '';
        position: absolute;
        inset: -4px;
        border: 1px solid rgba(249, 168, 51, 0.4);
        border-radius: 50%;
        animation: ping 1.8s infinite ease-out;
        pointer-events: none;
    }

    .custom-cursor.state-text {
        width: 2px;
        height: 20px;
        border-radius: 0;
        background-color: #F9A833;
    }
    
    .custom-cursor-ring.state-text {
        width: 0;
        height: 0;
        border-color: transparent;
    }

    .custom-cursor-ring.state-text::before {
        display: none;
    }

    .custom-cursor.state-link {
        width: 14px;
        height: 14px;
        border-radius: 0;
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F9A833' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    
    .custom-cursor-ring.state-link {
        width: 52px;
        height: 52px;
        background-color: rgba(249, 168, 51, 0.1);
        border-color: transparent;
    }

    .custom-cursor-ring.state-link::after {
        content: '';
        position: absolute;
        inset: -2px;
        border: 1.5px dashed #F9A833;
        border-radius: 50%;
        animation: spin 8s linear infinite;
    }

    .custom-cursor-ring.state-link::before {
        display: none;
    }

    .custom-cursor.state-image {
        width: 14px;
        height: 14px;
        border-radius: 0;
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F9A833' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M17 3h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M21 17v2a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    
    .custom-cursor-ring.state-image {
        width: 48px;
        height: 48px;
        background-color: rgba(249, 168, 51, 0.05);
        border-color: rgba(249, 168, 51, 0.4);
    }

    .custom-cursor-ring.state-image::before {
        display: none;
    }

    .custom-cursor.state-video {
        width: 0;
        height: 0;
    }
    
    .custom-cursor-ring.state-video {
        width: 72px;
        height: 72px;
        background-color: #F9A833;
        border-color: #F9A833;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .custom-cursor-ring.state-video::before {
        display: none;
    }

    .cursor-ring-inner {
        display: none;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 100%;
        height: 100%;
    }

    .custom-cursor-ring.state-video .cursor-ring-inner {
        display: flex;
    }

    .cursor-ring-inner span {
        width: 3px;
        height: 14px;
        background-color: #000;
        border-radius: 1px;
        display: inline-block;
        transform-origin: bottom;
        animation: bounceBar 0.8s ease-in-out infinite;
    }

    .cursor-ring-inner span:nth-child(1) {
        animation-delay: 0s;
    }
    
    .cursor-ring-inner span:nth-child(2) {
        animation-delay: 0.15s;
    }
    
    .cursor-ring-inner span:nth-child(3) {
        animation-delay: 0.3s;
    }
}

@media (max-width: 1024px), (pointer: coarse) {
    .custom-cursor,
    .custom-cursor-ring {
        display: none !important;
    }
}