/* Reusable branded cursor. It is inactive until JavaScript adds the root class. */
@media (hover: hover) and (pointer: fine) {
    html.has-pencil-cursor,
    html.has-pencil-cursor body,
    html.has-pencil-cursor body * {
        cursor: none !important;
    }

    html.has-pencil-cursor input:not([type]),
    html.has-pencil-cursor input[type="text"],
    html.has-pencil-cursor input[type="email"],
    html.has-pencil-cursor input[type="tel"],
    html.has-pencil-cursor input[type="search"],
    html.has-pencil-cursor input[type="password"],
    html.has-pencil-cursor textarea,
    html.has-pencil-cursor [contenteditable="true"] {
        cursor: text !important;
    }

    .pencil-cursor,
    .pencil-cursor__ring,
    .pencil-cursor__mark {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        pointer-events: none;
        opacity: 0;
    }

    .pencil-cursor,
    .pencil-cursor__ring {
        will-change: transform, opacity;
    }

    .pencil-cursor {
        width: 28px;
        height: 28px;
        transform: translate3d(-105px, -122px, 0);
        transition: opacity var(--motion-fast) ease;
    }

    .pencil-cursor.is-visible,
    .pencil-cursor__ring.is-visible {
        opacity: 1;
    }

    .pencil-cursor svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    .pencil-cursor__ring {
        width: 30px;
        height: 30px;
        border: 1.5px solid var(--exam-primary, var(--brand-red));
        border-right-color: transparent;
        border-radius: 50%;
        transform: translate3d(-115px, -115px, 0);
        transition: opacity var(--motion-fast) ease, scale var(--motion-fast) var(--ease-brand);
    }

    .pencil-cursor__ring.is-visible {
        scale: 1.04;
    }

    .pencil-cursor__ring.is-pressed {
        scale: .86;
    }

    .pencil-cursor__mark {
        width: 14px;
        height: 10px;
        opacity: 0;
        transform: translate3d(-100px, -100px, 0);
        transform-origin: 0 0;
        animation: pencil-mark 460ms ease-out forwards;
    }

    .pencil-cursor__mark path {
        fill: none;
        stroke: var(--brand-red);
        stroke-width: 1.65;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 19;
        stroke-dashoffset: 19;
    }

    @keyframes pencil-mark {
        0% {
            opacity: 1;
        }

        30% {
            opacity: 1;
        }

        55% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes pencil-mark-stroke {
        to {
            stroke-dashoffset: 0;
        }
    }

    .pencil-cursor__mark path {
        animation: pencil-mark-stroke 145ms ease-out forwards;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pencil-cursor,
    .pencil-cursor__ring,
    .pencil-cursor__mark {
        display: none !important;
    }
}