/* The Global Dance Party — identity polish.
 *
 * An amplification, not a redesign (room decision G-01). Standing direction
 * G-02: the identity is the thing that moves - bigger, and more deliberate
 * rather than faster. Everything here sits on the marquee logo over the club
 * door and nothing else, so the rest of the page is exactly as people know it.
 *
 * Lusion techniques (system/motion-prompts/lusion-study), all transform and
 * opacity, values driven by second-order springs in gdp-polish.js:
 *   1. float  - the sign hangs: an eight-beat drift at 96 BPM (5000ms)
 *   2. sheen  - a holographic band of light crosses the lettering only,
 *               masked to the logo's own alpha, once every sixteen beats
 *   3. depth  - three planes: the sign near, the door frame fixed, the club
 *               interior through the door far. A spring-driven focus point
 *               (fine pointers) and the hero's scroll progress move them by
 *               different amounts.
 *   4. kick   - each real beat the room detects (html[data-gdp-pulse]) is
 *               an impulse into a stiff spring, so the sign snaps and settles.
 *
 * Calm visuals, reduced motion and forced colours get the still sign.
 * Rollback: ?gdpPolish=off, or remove the two includes from index.html.
 */
:root {
    --gdp-beat: 625ms;
    --gdp-half: 312ms;
    --gdp-quarter: 156ms;
}

/* Headroom-aware size: gdp-polish.js measures the air between the nav and
 * the door and writes --gdp-mq-scale (1 to 1.28). Origin at the bottom so the
 * sign grows up into that air and never onto the neon lintel.
 * No CSS transition: gdp-polish.js moves these values through springs every
 * frame, and a transition on top would smear the spring into lag. */
html[data-gdp-polish="1"] #gdp-scene-floor .marquee {
    transform-origin: 50% 100%;
    transform: translate3d(var(--gdp-mq-x, 0px), var(--gdp-mq-y, 0px), 0)
        scale(calc(var(--gdp-mq-scale, 1) * var(--gdp-mq-k, 1)));
}

/* The far plane: the club seen through the open door. Oversized inside the
 * doorway's own clip so its edges never show while it drifts. */
html[data-gdp-polish="1"] #gdp-scene-floor .peek .wall {
    transform: translate3d(var(--gdp-wall-x, 0px), var(--gdp-wall-y, 0px), 0) scale(1.1);
}

/* The float lives on the image, the size and parallax on its frame, so the
 * three motions compose instead of fighting over one transform. */
html[data-gdp-polish="1"] #gdp-scene-floor .marquee img {
    animation: gdpSignFloat calc(var(--gdp-beat) * 8) cubic-bezier(0.45, 0, 0.55, 1)
        infinite alternate;
}
@keyframes gdpSignFloat {
    from { transform: translateY(0) rotate(-0.6deg); }
    to { transform: translateY(-6px) rotate(0.6deg); }
}

/* The sheen: a mask the shape of the logo, a band of light that crosses it. */
#gdp-scene-floor .marquee .gdp-mq-sheen {
    position: absolute;
    inset: 0;
    overflow: clip;
    pointer-events: none;
    -webkit-mask: url("/assets/images/gdp-logo-glow.webp") center / contain no-repeat;
    mask: url("/assets/images/gdp-logo-glow.webp") center / contain no-repeat;
    mix-blend-mode: screen;
    display: none;
}
html[data-gdp-polish="1"] #gdp-scene-floor .marquee .gdp-mq-sheen {
    display: block;
    animation: gdpSignFloat calc(var(--gdp-beat) * 8) cubic-bezier(0.45, 0, 0.55, 1)
        infinite alternate;
}
#gdp-scene-floor .marquee .gdp-mq-sheen i {
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: 0;
    width: 45%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(56, 212, 255, 0.22) 35%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(237, 47, 212, 0.22) 65%,
        transparent 100%
    );
    transform: translateX(-120%) skewX(-12deg);
    animation: gdpSignSheen calc(var(--gdp-beat) * 16) cubic-bezier(0.22, 1, 0.36, 1)
        infinite;
}
/* The pass takes two beats; the other fourteen the sign just glows. */
@keyframes gdpSignSheen {
    0% { transform: translateX(-120%) skewX(-12deg); }
    12.5%, 100% { transform: translateX(340%) skewX(-12deg); }
}

/* Live: the sheen warms to the on-air red the sign already carries. */
html[data-gdp-onair="1"] #gdp-scene-floor .marquee .gdp-mq-sheen i {
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 77, 94, 0.25) 35%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(237, 47, 212, 0.22) 65%,
        transparent 100%
    );
}

/* Still sign for anyone who asked for less. */
html[data-gdp-calm="1"] #gdp-scene-floor .marquee img,
html[data-gdp-calm="1"] #gdp-scene-floor .marquee .gdp-mq-sheen,
html[data-gdp-calm="1"] #gdp-scene-floor .marquee .gdp-mq-sheen i {
    animation: none;
}
html[data-gdp-calm="1"] #gdp-scene-floor .marquee .gdp-mq-sheen {
    display: none;
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
    html[data-gdp-polish="1"] #gdp-scene-floor .marquee,
    html[data-gdp-polish="1"] #gdp-scene-floor .marquee img {
        animation: none;
        transition: none;
        scale: none;
    }
    html[data-gdp-polish="1"] #gdp-scene-floor .marquee .gdp-mq-sheen {
        display: none;
    }
    html[data-gdp-polish="1"] #gdp-scene-floor .peek .wall {
        transform: none;
    }
}