/* Gear */
#cursor-gear {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 9999;
    padding: .5rem .65rem; border: 1px transparent; border-radius: 999px;
    background: rgba(28, 28, 28, 0.3); backdrop-filter: blur(6px); cursor: pointer;
    transition: 250ms;
}
#cursor-gear:hover { background: rgba(81, 81, 81, 0.8); transition: 500ms; }

/* Fullscreen modal */
/* Fullscreen modal */
#cursor-setup {
    position: fixed; inset: 0; z-index: 9998;
    display: grid; place-items: center;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);

    /* animation state */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 250ms ease, visibility 0s linear 250ms; /* delay hiding visibility */
}

/* final off state when using the hidden attribute */
#cursor-setup[hidden] { display: none !important; } /* no transition here */

/* open state */
#cursor-setup.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 250ms ease; /* visibility flips instantly when opening */
}

#cursor-setup .setup-inner {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    width: min(780px, 92vw); min-height: 60vh; max-height: 86vh; overflow: auto;
    background: #141414; color: #eee; border: 1px solid #444; border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5); padding: 1rem 1.2rem 1.2rem;
    justify-items: center; align-items: center;

    /* animate in separately for a nicer feel */
    transform: translateY(10px) scale(0.98);
    opacity: 0;
    transition: transform 250ms ease, opacity 250ms ease;
}

#cursor-setup.is-open .setup-inner {
    transform: none;
    opacity: 1;
}

/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    #cursor-setup, #cursor-setup .setup-inner { transition: none !important; }
}

.setup-sub { opacity: .8; margin: .25rem 0 1rem; }

.fixture-grid {
    display: flex;
    gap: .75rem;
}
.fixture {
    display: grid; gap: .5rem; padding: .6rem; border: 1px solid #444; border-radius: 12px;
    min-width: 220px;
    justify-content: center;
    background: #1f1f1f;
}
.fixture:hover { border-color: #666; background: #222; }
input[name="light-pick"]:checked + label.fixture { border-color: #999; background: #333; }

.fixture .img { max-width: 150px; }
.fixture .label { font-size: .95rem; }
.fixture .radio-button { max-height: fit-content; }

.gobo-grid { display: flex; gap: .75rem; }
.gobo {
    display: flex; gap: .5rem; padding: .6rem; border: 1px solid #444; border-radius: 12px;
    justify-content: center; align-items: center;
    background: #1f1f1f;
}
.gobo:hover { border-color: #666; background: #222; }
.gobo .label { font-size: .95rem; }
.gobo .radio-button { max-height: fit-content; }

.gobo-image {
    width: 80px; height: 80px;
    background-blend-mode: normal, multiply;
    background-repeat: no-repeat, repeat;     /* beam, gobo */
    background-position: center center, center center;
    background-size: 100px 100px, contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

input[name="gobo-pick"]:checked + label.gobo { border-color: #999; background: #333; }

.frost-grid {
    display: flex;
    gap: .75rem;
}
.frost {
    display: flex; gap: .5rem; padding: .6rem; border: 1px solid #444; border-radius: 12px;
    justify-content: center; align-items: center;
    background: #1f1f1f;
}
.frost:hover { border-color: #666; background: #222; }
.frost .label { font-size: .95rem; }

.setup-inner .swatch {
    display: flex;
    height: 120px;
    width: 120px;
    position: relative;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}



.cursor-circle {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 190, 120, 0.7) 0%, rgba(255, 183, 76,0.15) 60%, rgba(255, 183, 76, 0) 75%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.05s ease;
    transform: translate(-50%, -50%);
    z-index: 1;
    mix-blend-mode: screen;
}

.cursor-circle{
    /*position: relative;*/
    width: var(--beam-size, 80px);
    height: var(--beam-size, 80px);
    border-radius: var(--beam-radius, 50%);
    mix-blend-mode: var(--beam-blend, screen);

    /* bottom: beam, top: gobo */
    background-image:
            radial-gradient(
                    ellipse var(--beam-rx, 100%) var(--beam-ry, 100%) at 50% 50%,
                    rgba(var(--beam-r,255), var(--beam-g,183), var(--beam-b,76), var(--beam-core,0.7)) 0%,
                    rgba(var(--beam-r,255), var(--beam-g,183), var(--beam-b,76), var(--beam-mid,0.15)) var(--beam-midstop,60%),
                    rgba(var(--beam-r,255), var(--beam-g,183), var(--beam-b,76), 0) var(--beam-endstop,75%)
            ),
            var(--gobo-image, none); /* e.g. url(/gobos/breakup1.svg) or 'none' */

    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: center center, center center;
    background-size: auto, var(--gobo-size, 48px 48px);
    -webkit-mask-image: var(--gobo-image, none);
    mask-image: var(--gobo-image, none);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: var(--gobo-size, 80px);
    mask-size: var(--gobo-size, 80px);
    filter: blur(var(--frost, 0px));
}

div[id='light'].cursor-circle { opacity: 1; transform: translate(0%, 0%); }

.setup-actions { display:flex; gap:.5rem; margin-top: 1rem; }
.ghost { background:transparent; border:1px solid #666; color:#ddd; padding:.5rem .8rem; border-radius:10px; cursor:pointer; }
.danger { background:transparent; border:1px solid #8b0000; color:#ffb3b3; padding:.5rem .8rem; border-radius:10px; cursor:pointer; }