* {

    user-select: none;

}

/** Editable forms **/

/* ============================================================
   Editable Forms — Interactive Motion & Hover Feedback
   ============================================================ */

/* - Base placement / transition */
.editable-form {

    position: absolute;
    top: var(--top, 50%);
    left: var(--left, 50%);

    width: 40vw;

    opacity: 0;

    transform: translate(var(--tx, 0), var(--ty, 0))
               rotate(var(--rot, 0deg))
               scale(var(--scale, 1));
    transform-origin: center center;

    transition:
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        left 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        top 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s,
        filter 0.3s ease-out;

    will-change: transform, filter;

    user-select: none;

}

.editable-form[data-name=vertical-green] {

    width: 7vw;

}

.editable-form[data-name=m-yellow-left-fade],
.editable-form[data-name=m-yellow-right-fade] {

    width: 10vw;

}

.editable-form[data-name=l-yellow],
.editable-form[data-name=red-circle],
.editable-form[data-name=red-circle-with-hole] {

    width: 13vw;

}

.editable-form[data-name=diagonal-green] {

    width: 15vw;

}

.editable-form[data-name=red-finger],
.editable-form[data-name=blue-eye-fade-left],
.editable-form[data-name=blue-eye-fade-right] {

    width: 20vw;

}

/* - Appears once positioned */
.editable-form.is-randomize {

    opacity: 1;

}

/* ============================================================
   Hover "Bzzz" Effect — Continuous hover feedback
   ============================================================ */

.editable-form.is-randomize.is-hover {

    transform: translate(var(--tx, 0), var(--ty, 0))
               rotate(calc(var(--rot, 0deg) + 8deg))
               scale(calc(var(--scale, 1) * 1.05));

    /* filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25)); */

}

.editable-form.is-randomize.is-hover {

    animation: ef-bzzz-electric 0.25s linear infinite;

    cursor: all-scroll;

}

body.is-interacting .editable-form {
    transition: none !important;
    will-change: transform;
}

body[data-interaction-type="rotate"] *:not(.is-rotating),
body[data-interaction-type="drag"] *:not(.is-dragging) {

    pointer-events: none;

}

body[data-interaction-type="drag"] .editable-form.is-dragging {

    cursor: grabbing !important;

}

body[data-interaction-type="rotate"] .editable-form.is-rotating {

    cursor: crosshair !important;

}

/* body.is-dragging-editable-form .editable-form:not(.is-dragging) {
    animation: none !important;
    filter: none !important;
    pointer-events: none;
} */

/* ============================================================
   Bzzz Impulse — Short playful vibration (optional)
   ============================================================ */
@keyframes ef-bzzz-electric {

    0% {
        transform: translate(calc(var(--tx) - 1px), calc(var(--ty) + 1px))
                   rotate(calc(var(--rot) - 0.3deg))
                   scale(var(--scale, 1));
    }
    25% {
        transform: translate(calc(var(--tx) + 1px), calc(var(--ty) - 1px))
                   rotate(calc(var(--rot) + 0.3deg))
                   scale(var(--scale, 1));
    }
    50% {
        transform: translate(calc(var(--tx) - 1px), calc(var(--ty) - 1px))
                   rotate(calc(var(--rot) - 0.2deg))
                   scale(var(--scale, 1));
    }
    75% {
        transform: translate(calc(var(--tx) + 1px), calc(var(--ty) + 1px))
                   rotate(calc(var(--rot) + 0.2deg))
                   scale(var(--scale, 1));
    }
    100% {
        transform: translate(calc(var(--tx) - 1px), calc(var(--ty) + 1px))
                   rotate(calc(var(--rot) - 0.3deg))
                   scale(var(--scale, 1));
    }
    
}

.editable-form.is-dragging {

    cursor: grabbing;
    /* z-index: 15; */
    transition: none;
    /* filter: drop-shadow(0 0 10px rgba(255,255,255,0.4)); */
    
}

.editable-form.is-bumped {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    transition: outline 0.2s ease;
}

/** Debug overlay **/
.editable-debug-layer {

    position: absolute;
    inset: 0;
    z-index: 9999;
    pointer-events: none;

}

.editable-debug-cell {

    border: 3px dashed rgba(255, 0, 0, 0.25);
    background-color: rgba(255, 255, 255, 0.02);

}

.editable-debug-point {

    position: absolute;
    width: 6px;
    height: 6px;
    background: #ff3b3b;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    
}

/** Pointer */

body {

    pointer-events: none;

}

.lift,
.editable-forms-help[data-state=open],
.lightbox,
.artists--day-grid .slide,
body:not(.loading) .editable-form,
body:not(.loading) button,
body:not(.loading) a {

    pointer-events: all;

}

.editable-forms-help[data-state=close] button,
body .loader a {

    pointer-events: none;

}

/** Visual helper */

body[data-reference-page=home] .editable-forms-help-trigger {

    top: 99svh;
    bottom: unset !important;

}

.editable-forms-help-trigger {

    position: absolute;
    bottom: -6.6rem !important;
    right: 4rem;

    transform: translateY(-100%);

    z-index: 100;

}

.editable-forms-help {

    position: fixed;
    top: 50%;
    left: 50%;

    display: flex;
    flex-direction: column;
    gap: 1em;

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

    padding: 2rem;

    width: 90vw;

    z-index: 2000;

    opacity: 0;

    background-color: var(--white-color);
    color: var(--text-color);

    border-radius: 25px;

    transition: .1s ease;

}

@media screen and (max-width: 992px) {

    .editable-form[data-name=red-finger],
    .editable-form[data-name=blue-eye-fade-left],
    .editable-form[data-name=blue-eye-fade-right],
    .editable-form[data-name=m-yellow-right-fade],
    .editable-form[data-name=m-yellow-left-fade],
    .editable-form[data-name=blue-wave],
    .editable-form[data-name=diagonal-green],
    .editable-form[data-name=vertical-green] {

        width: 30vw;

    }

    .editable-form[data-name=l-yellow],
    .editable-form[data-name=red-circle],
    .editable-form[data-name=red-circle-with-hole] {

        width: 20vw;

    }

    .editable-form[data-name=pink-mouth] {

        width: 60vw;

    }

}

@media screen and (max-width: 1250px) {

    .editable-forms-help h2 {

        text-align: start;
    
    }

}

@media screen and (min-width: 1251px) {

    .editable-forms-help {

        width: 60vw;
    
    }

}

.editable-forms-help ul {

    list-style: disc;
    list-style-position: inside;

}

.editable-forms-help ul > li:not(:first-child) {

    margin-top: .5rem;

}

.editable-forms-help kbd {

    background-color: var(--text-color);
    color: var(--white-color);
    padding: 0 0.3em;

}

.editable-forms-help[data-state=open] {

    opacity: 1;

    transition: .3s ease;

}

.editable-forms-help .--close {

    position: absolute;
    top: .5rem;
    right: .5rem;

}


@keyframes pulse {

    0% {
        transform: translateY(-100%) scale(1);
    }
    25% {
        transform: translateY(-100%) scale(1.2);
    }
    75% {
        transform: translateY(-100%) scale(0.8);
    }
    100% {
        transform: translateY(-100%) scale(1);
    }

}

.editable-forms-help-trigger.is-pulsing {

    animation: pulse 1.2s ease-out 3;

}

@keyframes explosion-scale {
  0% {
    transform: scale(0);
    opacity: 0.8;
  }
  10% {
    transform: scale(10);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 1;
  }
}