/* ==========================================================================
   twoaxis.css — the bullseye (circular) level.
   ========================================================================== */

.instrument {
    padding: 4px 0 8px;
}

.eye-stage {
    display: grid;
    place-items: center;
    padding: 6px 0 2px;
}

.eye {
    position: relative;
    width: min(300px, 78vw);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background:
        radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--vial-fluid) 70%, #fff) 0%, var(--vial-fluid) 34%, var(--vial-glass) 100%);
    border: 1px solid color-mix(in srgb, var(--outline) 40%, transparent);
    box-shadow:
        inset 0 4px 12px rgba(0, 0, 0, .55),
        inset 0 -3px 10px rgba(0, 0, 0, .4);
}

/* Concentric target rings, mirroring the printed rings on a circular vial. */
.eye-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, #fff 30%, transparent);
    pointer-events: none;
}

.eye-ring.r1 {
    width: 26%;
    height: 26%;
    border-color: color-mix(in srgb, var(--bubble-fill) 55%, transparent);
    background: color-mix(in srgb, var(--bubble-edge) 16%, transparent);
    transition: background-color .3s var(--ease-std);
}

.tool.level .eye-ring.r1 {
    background: color-mix(in srgb, var(--bubble-fill) 30%, transparent);
}

.eye-ring.r2 {
    width: 56%;
    height: 56%;
}

.eye-ring.r3 {
    width: 84%;
    height: 84%;
    border-style: dashed;
    opacity: .55;
}

.eye-cross {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right, transparent calc(50% - .75px), color-mix(in srgb, #fff 26%, transparent) calc(50% - .75px), color-mix(in srgb, #fff 26%, transparent) calc(50% + .75px), transparent calc(50% + .75px)),
        linear-gradient(to bottom, transparent calc(50% - .75px), color-mix(in srgb, #fff 26%, transparent) calc(50% - .75px), color-mix(in srgb, #fff 26%, transparent) calc(50% + .75px), transparent calc(50% + .75px));
}

.eye .bubble {
    width: 22%;
    height: 22%;
    margin: 0;
    top: 39%;
    left: 39%;
    transition: transform .38s var(--ease-spring), box-shadow .3s;
}

.eye .sheen {
    border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
    .eye .bubble {
        transition: none;
    }
}