* {

    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;
  }
}

/* -------------------------------------------- */

/* IOS presets                                  */

/* -------------------------------------------- */


body[class*=randomize-forms-] .editable-form {

    position: absolute;
    
    transform-origin: center;

}

/* -------------------------------------------- */
/* PRESET 0 — Balanced Layout                   */
/* -------------------------------------------- */

/* HEADER */
body.randomize-forms-0 header .editable-form[data-name="blue-eye-fade-left"]     { top: 5%; left: 8%; transform: rotate(-6deg); }
body.randomize-forms-0 header .editable-form[data-name="blue-eye-fade-right"]    { top: 72%; left: 62%; transform: rotate(7deg); }
body.randomize-forms-0 header .editable-form[data-name="blue-wave"]              { top: -12%; left: 30%; transform: rotate(-14deg); }
body.randomize-forms-0 header .editable-form[data-name="diagonal-green"]         { top: 68%; left: 50%; transform: rotate(8deg); }
/* body.randomize-forms-0 header .editable-form[data-name="vertical-green"]         { top: 15%; left: 48%; transform: rotate(0deg); } */

body.randomize-forms-0 header .editable-form[data-name="l-yellow"]               { top: 12%; left: 5%; transform: rotate(-10deg); }
body.randomize-forms-0 header .editable-form[data-name="m-yellow-left-fade"]     { top: 18%; left: 82%; transform: rotate(5deg); }
body.randomize-forms-0 header .editable-form[data-name="m-yellow-right-fade"]    { top: 85%; left: 25%; transform: rotate(-8deg); }
body.randomize-forms-0 header .editable-form[data-name="pink-mouth"]             { top: 55%; left: -10%; transform: rotate(110deg); }

/* body.randomize-forms-0 header .editable-form[data-name="red-circle"]             { top: 10%; left: 5%;  transform: rotate(3deg); } */
body.randomize-forms-0 header .editable-form[data-name="red-circle-with-hole"]   { top: 100%; left: 90%; transform: rotate(-3deg); }
body.randomize-forms-0 header .editable-form[data-name="red-finger"]             { top: 60%; left: 60%; transform: rotate(82deg); }

/* MAIN */
body.randomize-forms-0 main .editable-form[data-name="blue-eye-fade-left"]       { top: 5%; left: 42%; transform: rotate(-5deg); }
body.randomize-forms-0 main .editable-form[data-name="blue-eye-fade-right"]      { top: 25%; left: 70%; transform: rotate(6deg); }
body.randomize-forms-0 main .editable-form[data-name="blue-wave"]                { top: 50%; left: 45%; transform: rotate(-2deg); }
body.randomize-forms-0 main .editable-form[data-name="diagonal-green"]           { top: 100%; left: 35%; transform: rotate(8deg); }
body.randomize-forms-0 main .editable-form[data-name="vertical-green"]           { top: 30%; left: 50%; transform: rotate(0deg); }

body.randomize-forms-0 main .editable-form[data-name="l-yellow"]                 { top: 55%; left: 15%; transform: rotate(-7deg); }
body.randomize-forms-0 main .editable-form[data-name="m-yellow-left-fade"]       { top: 22%; left: 82%; transform: rotate(5deg); }
body.randomize-forms-0 main .editable-form[data-name="m-yellow-right-fade"]      { top: 95%; left: 15%; transform: rotate(-6deg); }
body.randomize-forms-0 main .editable-form[data-name="pink-mouth"]               { top: 45%; left: 70%; transform: rotate(9deg); }

body.randomize-forms-0 main .editable-form[data-name="red-circle"]               { top: 15%; left: 5%;  transform: rotate(4deg); }
body.randomize-forms-0 main .editable-form[data-name="red-circle-with-hole"]     { top: 75%; left: 90%; transform: rotate(-4deg); }
body.randomize-forms-0 main .editable-form[data-name="red-finger"]               { top: 60%; left: 60%; transform: rotate(14deg); }

/* -------------------------------------------- */
/* PRESET 1 — Organic Scatter                   */
/* -------------------------------------------- */

/* HEADER */
body.randomize-forms-1 header .editable-form[data-name="blue-eye-fade-left"]     { top: 5%; left: 5%; transform: rotate(-15deg); }
body.randomize-forms-1 header .editable-form[data-name="blue-eye-fade-right"]    { top: 80%; left: 80%; transform: rotate(18deg); }
body.randomize-forms-1 header .editable-form[data-name="blue-wave"]              { top: 100%; left: 0%; transform: rotate(125deg); }
body.randomize-forms-1 header .editable-form[data-name="diagonal-green"]         { top: 15%; left: 50%; transform: rotate(155deg); }
/* body.randomize-forms-1 header .editable-form[data-name="vertical-green"]         { top: 80%; left: 10%; transform: rotate(-80deg); } */

body.randomize-forms-1 header .editable-form[data-name="l-yellow"]               { top: 40%; left: 22%; transform: rotate(-12deg); }
body.randomize-forms-1 header .editable-form[data-name="m-yellow-left-fade"]     { top: 35%; left: 78%; transform: rotate(16deg); }
body.randomize-forms-1 header .editable-form[data-name="m-yellow-right-fade"]    { top: 20%; left: 2%; transform: rotate(-10deg); }
body.randomize-forms-1 header .editable-form[data-name="pink-mouth"]             { top: 55%; left: 45%; transform: rotate(0deg); }

/* body.randomize-forms-1 header .editable-form[data-name="red-circle"]             { top: 10%; left: 48%;  transform: rotate(10deg); } */
body.randomize-forms-1 header .editable-form[data-name="red-circle-with-hole"]   { top: 68%;  left: 12%; transform: rotate(-14deg); }
body.randomize-forms-1 header .editable-form[data-name="red-finger"]             { top: 2%; left: 45%; transform: rotate(-38deg); }

/* MAIN */
body.randomize-forms-1 main .editable-form[data-name="blue-eye-fade-left"]       { top: 30%; left: 15%; transform: rotate(-12deg); }
body.randomize-forms-1 main .editable-form[data-name="blue-eye-fade-right"]      { top: 20%; left: 65%; transform: rotate(14deg); }
body.randomize-forms-1 main .editable-form[data-name="blue-wave"]                { top: 55%; left: 50%; transform: rotate(-4deg); }
body.randomize-forms-1 main .editable-form[data-name="diagonal-green"]           { top: 68%; left: 32%; transform: rotate(28deg); }
body.randomize-forms-1 main .editable-form[data-name="vertical-green"]           { top: 30%; left: 48%; transform: rotate(0deg); }

body.randomize-forms-1 main .editable-form[data-name="l-yellow"]                 { top: 52%; left: 10%; transform: rotate(-18deg); }
body.randomize-forms-1 main .editable-form[data-name="m-yellow-left-fade"]       { top: 20%; left: 80%; transform: rotate(12deg); }
body.randomize-forms-1 main .editable-form[data-name="m-yellow-right-fade"]      { top: 78%; left: 60%; transform: rotate(-14deg); }
body.randomize-forms-1 main .editable-form[data-name="pink-mouth"]               { top: 45%; left: 72%; transform: rotate(17deg); }

body.randomize-forms-1 main .editable-form[data-name="red-circle"]               { top: 15%; left: 5%;  transform: rotate(8deg); }
body.randomize-forms-1 main .editable-form[data-name="red-circle-with-hole"]     { top: 82%; left: 90%; transform: rotate(-10deg); }
body.randomize-forms-1 main .editable-form[data-name="red-finger"]               { top: 62%; left: 82%; transform: rotate(20deg); }

/* -------------------------------------------- */
/* PRESET 2 — Structured Layout                 */
/* -------------------------------------------- */

/* HEADER */
body.randomize-forms-2 header .editable-form[data-name="blue-eye-fade-left"]     { top: 28%; left: 30%; transform: rotate(-4deg); }
body.randomize-forms-2 header .editable-form[data-name="blue-eye-fade-right"]    { top: 98%; left: 68%; transform: rotate(4deg); }
body.randomize-forms-2 header .editable-form[data-name="blue-wave"]              { top: 90%; left: 35%; transform: rotate(83deg); }
body.randomize-forms-2 header .editable-form[data-name="diagonal-green"]         { top: 55%; left: 85%; transform: rotate(80deg); }
/* body.randomize-forms-2 header .editable-form[data-name="vertical-green"]         { top: 12%; left: 50%; transform: rotate(0deg); } */

body.randomize-forms-2 header .editable-form[data-name="l-yellow"]               { top: 42%; left: 48%; transform: rotate(60deg); }
body.randomize-forms-2 header .editable-form[data-name="m-yellow-left-fade"]     { top: 0%; left: 68%; transform: rotate(98deg); }
body.randomize-forms-2 header .editable-form[data-name="m-yellow-right-fade"]    { top: 78%; left: 12%; transform: rotate(-4deg); }
body.randomize-forms-2 header .editable-form[data-name="pink-mouth"]             { top: 0%; left: 0%; transform: rotate(75deg); }

/* body.randomize-forms-2 header .editable-form[data-name="red-circle"]             { top: 86%;  left: 68%;  transform: rotate(4deg); } */
body.randomize-forms-2 header .editable-form[data-name="red-circle-with-hole"]   { top: 48%;  left: -10%; transform: rotate(-4deg); }
body.randomize-forms-2 header .editable-form[data-name="red-finger"]             { top: 54%; left: 70%; transform: rotate(78deg); }

/* MAIN */
body.randomize-forms-2 main .editable-form[data-name="blue-eye-fade-left"]       { top: 28%; left: 22%; transform: rotate(-4deg); }
body.randomize-forms-2 main .editable-form[data-name="blue-eye-fade-right"]      { top: 28%; left: 68%; transform: rotate(4deg); }
body.randomize-forms-2 main .editable-form[data-name="blue-wave"]                { top: 50%; left: 45%; transform: rotate(0deg); }
body.randomize-forms-2 main .editable-form[data-name="diagonal-green"]           { top: 65%; left: 32%; transform: rotate(10deg); }
body.randomize-forms-2 main .editable-form[data-name="vertical-green"]           { top: 28%; left: 50%; transform: rotate(0deg); }

body.randomize-forms-2 main .editable-form[data-name="l-yellow"]                 { top: 55%; left: 18%; transform: rotate(-6deg); }
body.randomize-forms-2 main .editable-form[data-name="m-yellow-left-fade"]       { top: 22%; left: 82%; transform: rotate(8deg); }
body.randomize-forms-2 main .editable-form[data-name="m-yellow-right-fade"]      { top: 95%; left: 55%; transform: rotate(-6deg); }
body.randomize-forms-2 main .editable-form[data-name="pink-mouth"]               { top: 45%; left: 72%; transform: rotate(6deg); }

body.randomize-forms-2 main .editable-form[data-name="red-circle"]               { top: 12%; left: 4%;  transform: rotate(4deg); }
body.randomize-forms-2 main .editable-form[data-name="red-circle-with-hole"]     { top: 80%; left: 92%; transform: rotate(-4deg); }
body.randomize-forms-2 main .editable-form[data-name="red-finger"]               { top: 62%; left: 80%; transform: rotate(8deg); }

/* -------------------------------------------- */
/* PRESET 3 — Controlled Chaos                  */
/* -------------------------------------------- */

/* HEADER */
body.randomize-forms-3 header .editable-form[data-name="blue-eye-fade-left"]     { top: 10%; left: 72%; transform: rotate(-38deg); }
body.randomize-forms-3 header .editable-form[data-name="blue-eye-fade-right"]    { top: 88%;  left: 38%; transform: rotate(22deg); }
body.randomize-forms-3 header .editable-form[data-name="blue-wave"]              { top: -5%; left: 48%; transform: rotate(-30deg); }
body.randomize-forms-3 header .editable-form[data-name="diagonal-green"]         { top: 85%; left: 0%; transform: rotate(78deg); }
/* body.randomize-forms-3 header .editable-form[data-name="vertical-green"]         { top: 70%; left: 15%; transform: rotate(-5deg); } */

body.randomize-forms-3 header .editable-form[data-name="l-yellow"]               { top: 0%; left: 15%; transform: rotate(-22deg); }
body.randomize-forms-3 header .editable-form[data-name="m-yellow-left-fade"]     { top: 32%; left: 62%; transform: rotate(118deg); }
body.randomize-forms-3 header .editable-form[data-name="m-yellow-right-fade"]    { top: 48%; left: 32%; transform: rotate(-20deg); }
body.randomize-forms-3 header .editable-form[data-name="pink-mouth"]             { top: 92%; left: 72%; transform: rotate(26deg); }

/* body.randomize-forms-3 header .editable-form[data-name="red-circle"]             { top: 12%; left: 8%;  transform: rotate(15deg); } */
body.randomize-forms-3 header .editable-form[data-name="red-circle-with-hole"]   { top: 58%;  left: 88%; transform: rotate(-18deg); }
body.randomize-forms-3 header .editable-form[data-name="red-finger"]             { top: 52%; left: -1%; transform: rotate(102deg); }

/* MAIN */
body.randomize-forms-3 main .editable-form[data-name="blue-eye-fade-left"]       { top: 28%; left: 18%; transform: rotate(-16deg); }
body.randomize-forms-3 main .editable-form[data-name="blue-eye-fade-right"]      { top: 18%; left: 68%; transform: rotate(20deg); }
body.randomize-forms-3 main .editable-form[data-name="blue-wave"]                { top: 55%; left: 48%; transform: rotate(-8deg); }
body.randomize-forms-3 main .editable-form[data-name="diagonal-green"]           { top: 72%; left: 30%; transform: rotate(26deg); }
body.randomize-forms-3 main .editable-form[data-name="vertical-green"]           { top: 28%; left: 52%; transform: rotate(-4deg); }

body.randomize-forms-3 main .editable-form[data-name="l-yellow"]                 { top: 62%; left: 15%; transform: rotate(-20deg); }
body.randomize-forms-3 main .editable-form[data-name="m-yellow-left-fade"]       { top: 25%; left: 85%; transform: rotate(18deg); }
body.randomize-forms-3 main .editable-form[data-name="m-yellow-right-fade"]      { top: 78%; left: 55%; transform: rotate(-18deg); }
body.randomize-forms-3 main .editable-form[data-name="pink-mouth"]               { top: 42%; left: 75%; transform: rotate(24deg); }

body.randomize-forms-3 main .editable-form[data-name="red-circle"]               { top: 18%; left: 4%;  transform: rotate(16deg); }
body.randomize-forms-3 main .editable-form[data-name="red-circle-with-hole"]     { top: 85%; left: 92%; transform: rotate(-14deg); }
body.randomize-forms-3 main .editable-form[data-name="red-finger"]               { top: 68%; left: 82%; transform: rotate(22deg); }

body[class*=randomize-forms-] .editable-form[data-css-only=true] { opacity: 1 !important }

/* -------------------------------------------- */
/* PRESET global rules                          */
/* -------------------------------------------- */

body[data-reference-page="programme"] main .editable-form { display: none !important }

body:not([class*=randomize-forms-]) .editable-form[data-css-only=true] { display: none !important }
body[class*=randomize-forms-] .editable-form[data-css-only=false] { display: none !important }

body[class*=randomize-forms-] header .editable-form[data-name="red-circle"],
body[class*=randomize-forms-] header .editable-form[data-name="vertical-green"] {

    display: none !important;

}

body[class*=randomize-forms-] .editable-form[data-name="blue-wave"] {

    width: 60vw;

}

body[class*=randomize-forms-] .editable-forms-help-trigger {

    display: none !important;

}