@media (pointer: fine) {
    *, *::before, *::after {
        cursor: none !important;
    }
}

#cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s ease,
                border-color 0.3s ease;
    opacity: 0;
    will-change: transform;
    pointer-events: none;
}

body.cursor-ready.cursor-visible #cursor-ring {
    opacity: 1;
}

body.cursor-ready.cursor-hover #cursor-ring {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.12);
    border-color: hsla(214, 85%, 73%, 0.4);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.3),
                0 0 0 1px hsla(214, 85%, 73%, 0.2);
}

body.cursor-ready.cursor-click #cursor-ring {
    transform: translate(-50%, -50%) scale(0.9);
}

.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.1s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1.1s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1.1s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    filter: blur(8px);
    transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                filter 1.2s ease;
    will-change: opacity, transform, filter;
}

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
    opacity: 1;
    transform: none;
    filter: none;
}

.reveal.exit,
.reveal-left.exit,
.reveal-right.exit,
.reveal-scale.exit {
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 0.6s cubic-bezier(0.2, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.2, 0, 0.2, 1);
}

.reveal-left.exit  { transform: translateX(-50px); }
.reveal-right.exit { transform: translateX(50px);  }
.reveal-scale.exit { transform: scale(0.9);        }

.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }
.reveal[data-delay="6"] { transition-delay: 0.48s; }
.reveal-left[data-delay="1"], .reveal-right[data-delay="1"], .reveal-scale[data-delay="1"] { transition-delay: 0.08s; }
.reveal-left[data-delay="2"], .reveal-right[data-delay="2"], .reveal-scale[data-delay="2"] { transition-delay: 0.16s; }
.reveal-left[data-delay="3"], .reveal-right[data-delay="3"], .reveal-scale[data-delay="3"] { transition-delay: 0.24s; }
.reveal-left[data-delay="4"], .reveal-right[data-delay="4"], .reveal-scale[data-delay="4"] { transition-delay: 0.32s; }
.reveal-left[data-delay="5"], .reveal-right[data-delay="5"], .reveal-scale[data-delay="5"] { transition-delay: 0.40s; }
.reveal-left[data-delay="6"], .reveal-right[data-delay="6"], .reveal-scale[data-delay="6"] { transition-delay: 0.48s; }