html,
body {
    cursor: none;
}

.tech-cursor {
    position: fixed;
    top: 0;
    left: 0;

    width: 28px;
    height: 28px;

    pointer-events: none;
    z-index: 999999;

    opacity: 1;

    transform: translate(-50%, -50%);

    transition:
        width 0.2s ease,
        height 0.2s ease,
        opacity 0.2s ease;
}

/* Центральная точка */
.tech-cursor::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 5px;
    height: 5px;

    transform: translate(-50%, -50%);

    background: #00ffcc;
    border-radius: 50%;

    box-shadow:
        0 0 5px #00ffcc,
        0 0 12px rgba(0, 255, 204, 0.8);
}

/* Кольцо */
.tech-cursor::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 22px;
    height: 22px;

    transform: translate(-50%, -50%);

    border: 1px solid #00ffcc;
    border-radius: 50%;

    box-shadow:
        0 0 8px rgba(0, 255, 204, 0.35);

    transition:
        width 0.2s ease,
        height 0.2s ease,
        box-shadow 0.2s ease;
}

/* Четыре засечки */
.tech-cursor__line {
    position: absolute;
    display: block;

    background: #00ffcc;

    box-shadow:
        0 0 5px rgba(0, 255, 204, 0.8);
}

.tech-cursor__line--top,
.tech-cursor__line--bottom {
    left: 50%;

    width: 1px;
    height: 6px;

    transform: translateX(-50%);
}

.tech-cursor__line--top {
    top: -5px;
}

.tech-cursor__line--bottom {
    bottom: -5px;
}

.tech-cursor__line--left,
.tech-cursor__line--right {
    top: 50%;

    width: 6px;
    height: 1px;

    transform: translateY(-50%);
}

.tech-cursor__line--left {
    left: -5px;
}

.tech-cursor__line--right {
    right: -5px;
}

/* Наведение на ссылку / кнопку */
.tech-cursor.is-hovering {
    width: 42px;
    height: 42px;
}

.tech-cursor.is-hovering::before {
    width: 7px;
    height: 7px;
}

.tech-cursor.is-hovering::after {
    width: 34px;
    height: 34px;

    box-shadow:
        0 0 12px rgba(0, 255, 204, 0.55),
        inset 0 0 8px rgba(0, 255, 204, 0.1);
}

/* Клик */
.tech-cursor.is-clicking::after {
    width: 18px;
    height: 18px;
}

/* Мышь за пределами окна */
.tech-cursor.is-hidden {
    opacity: 0;
}

/* Телефон / планшет */
@media (hover: none), (pointer: coarse) {

    html,
    body {
        cursor: auto;
    }

    .tech-cursor {
        display: none;
    }
}