/* Smooth UI - Premium Interface Smoothness */

/* =========================================
   1. CORE ANIMATION VARIABLES
   ========================================= */
:root {
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --accent-color: #FF4500;
    /* Safety Orange */
}

/* =========================================
   2. CUSTOM CURSOR
   ========================================= */
body {
    cursor: none;
    /* Hide default cursor */
}

/* Ensure links and buttons don't show default cursor */
a,
button,
input,
textarea,
select,
.service-card,
.btn {
    cursor: none !important;
}

.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-color);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    will-change: transform;
}

.cursor-outline {
    width: 40px;
    height: 40px;
    border: 1px solid var(--accent-color);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    transition: width 0.3s var(--ease-out-quart),
        height 0.3s var(--ease-out-quart),
        background-color 0.3s var(--ease-out-quart);
    mix-blend-mode: difference;
    will-change: transform;
}

/* Cursor Hover State */
body.hovering .cursor-outline {
    width: 80px;
    height: 80px;
    background-color: rgba(255, 69, 0, 0.1);
    border-color: transparent;
}

/* Hide on Mobile */
@media (max-width: 1024px) {

    .cursor-dot,
    .cursor-outline {
        display: none !important;
    }

    body,
    a,
    button,
    input,
    textarea,
    select {
        cursor: auto !important;
    }
}




/* Reveal classes handled by GSAP now, keeping checks for safety */
.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* =========================================
   4. UI UTILITIES
   ========================================= */
.ui-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

.ui-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

body.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100%;
}