/* Geometry and animation timings derived from theisticessentialism.com.
   Source preserved separately. Changes: original art, repaired hfm keyframes,
   reachable form, intentional mobile keyframes, reduced-motion/static mode.
   Entrances use offscreen boxes at every width; backwards fill prevents delay flashes. */
*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;min-height:100vh;min-height:100dvh;max-width:100vw;overflow-x:hidden;background:#090608;color:#ffe2cc;font-family:Arial,sans-serif}
.stage{position:relative;max-width:100%;height:100vh;height:100dvh;overflow:hidden;background:url("assets/club-crowd-closer-desktop.png") center/cover no-repeat}
.art{position:absolute;background-repeat:no-repeat;background-size:100% 100%;pointer-events:none;will-change:left,right,opacity}
#blm{top:0;right:max(2100px,calc(100% + 32px));width:552px;height:1025px;background-image:url("assets/km-one.png");animation:blm 12s ease-in-out 4s infinite backwards}
#owm{top:0;right:-657px;width:625px;height:910px;background-image:url("assets/dancer-km.png");animation:owm 12s ease-in-out .1s infinite backwards}
#whm{top:15px;left:max(2100px,calc(100% + 32px));width:465px;height:891px;background-image:url("assets/km-three.png");animation:whm 12s ease-in-out 5s infinite backwards}
#afm{top:0;left:-450px;width:auto;height:min(788px,calc(100dvh - 64px));aspect-ratio:429/788;background-image:url("assets/km-four.png");animation:afm 11s ease-in-out 1s infinite backwards}
#hfm{top:0;right:calc(100% + 32px);width:625px;height:910px;background-image:url("assets/km-five.png");background-size:512px 890px;animation:hfm 8s ease-in-out 12s infinite backwards}
@keyframes blm{0%{right:max(2100px,calc(100% + 32px));opacity:1}75%{opacity:.8}100%{right:-250px;opacity:0}}
@keyframes owm{0%{right:-657px;opacity:1}75%{opacity:.8}100%{right:0;opacity:0}}
@keyframes whm{0%{left:max(2100px,calc(100% + 32px));opacity:1}75%{opacity:.8}100%{left:-250px;opacity:0}}
@keyframes afm{0%{left:-450px;opacity:1}75%{opacity:.8}80%{opacity:.1}100%{left:1600px;opacity:0}}
@keyframes hfm{0%{right:calc(100% + 32px);opacity:1}75%{opacity:.8}100%{right:0;opacity:0}}
#construct{width:70%;position:absolute;left:20vw;top:0;margin:0;pointer-events:none}#construct img{display:block;width:100%;height:auto}
.stage-controls{position:absolute;bottom:20px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;gap:12px}
button,a{touch-action:manipulation}button{cursor:pointer}
.stage-controls button,.stage-controls a{font:12px Arial,sans-serif;letter-spacing:.1em;color:#ffe2cc;background:#120b0dde;border:1px solid #db9f84;padding:12px 16px;text-decoration:none}
button:hover,.stage-controls a:hover{background:#482b32}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ffaebc;outline-offset:4px}
.mail{position:relative;width:min(100%,472px);margin:5vh 0 0 auto;padding:5px 24px 32px;text-align:center;scroll-margin-top:20px}
.brand{font-size:11px;letter-spacing:.35em;margin:18px 0}.mail h2{font-weight:700;font-size:3.5rem;margin:0 0 18px;color:#ffd3b2}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:6px}label{display:block;text-align:left}label span{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
input,textarea{display:block;width:100%;font:16px Arial,sans-serif;border:1px solid #875b66;border-radius:4px;background:#170f14;color:#ffe2cc;padding:10px 12px;margin:0 0 6px}textarea{resize:vertical;min-height:130px}input::placeholder,textarea::placeholder{color:#d2aebb}
.send{font-weight:bold;letter-spacing:.13em;padding:16px 26px;color:#ffe2cc;border:1px solid #da968c;background:#301720}.preview-note,#form-status{font-size:12px;line-height:1.6;color:#caaeb5}#form-status:empty{display:none}.back{font-size:12px;color:#ffd3b2}
body.paused .art{animation-play-state:paused!important}
@media(min-width:750px) and (max-width:1050px){#blm,#owm,#whm,#hfm{top:600px}#afm{top:0}}
@media(max-width:900px){.stage{background-image:url("assets/club-crowd-closer-tablet.png");background-position:left}.fields{grid-template-columns:1fr}}
@media(max-width:450px){.stage{background-image:url("assets/club-crowd-closer-mobile.png");background-position:center}#owm,#hfm{top:10px}#whm,#blm{top:20px}#whm{animation-name:whm-mobile}#blm{animation-name:blm-mobile}#owm{animation-name:owm-mobile}#afm{top:20px;animation-name:afm-mobile}.stage-controls{bottom:16px;left:12px;right:12px}.stage-controls button,.stage-controls a{padding:12px;font-size:11px}.mail{padding:5px 20px 28px}.mail h2{font-size:3rem}}
@keyframes whm-mobile{0%{left:calc(100% + 32px);opacity:1}75%{opacity:.8}100%{left:0;opacity:0}}
@keyframes blm-mobile{0%{right:max(2100px,calc(100% + 32px));opacity:1}75%{opacity:.8}100%{right:-100px;opacity:0}}
@keyframes owm-mobile{0%{right:-657px;opacity:1}75%{opacity:.8}100%{right:0;opacity:0}}
@keyframes afm-mobile{0%{left:-450px;opacity:0}50%{opacity:.2}75%{opacity:0}100%{left:100px;opacity:0}}
/* A stable ensemble replaces all movement for OS reduced motion and manual still mode. */
body.still .art{animation:none!important;will-change:auto;opacity:1!important;top:auto!important;bottom:40px;right:auto!important;width:32vw!important;max-width:552px;height:78vh!important;background-size:contain!important;background-position:center bottom}
body.still #blm{left:-6vw}body.still #owm{left:14vw}body.still #whm{left:34vw}body.still #afm{left:54vw}body.still #hfm{left:74vw}
@media(prefers-reduced-motion:reduce){.art{animation:none!important;will-change:auto;opacity:1!important;top:auto!important;bottom:40px;right:auto!important;width:32vw!important;max-width:552px;height:78vh!important;background-size:contain!important;background-position:center bottom}#blm{left:-6vw!important}#owm{left:14vw!important}#whm{left:34vw!important}#afm{left:54vw!important}#hfm{left:74vw!important}}
@media(max-width:450px){body.still .art{width:72vw!important;height:70vh!important}body.still #blm{left:-33vw}body.still #owm{left:-5vw}body.still #whm{left:23vw}body.still #afm{left:51vw}body.still #hfm{left:79vw}}
@media(max-width:450px) and (prefers-reduced-motion:reduce){.art{width:72vw!important;height:70vh!important}#blm{left:-33vw!important}#owm{left:-5vw!important}#whm{left:23vw!important}#afm{left:51vw!important}#hfm{left:79vw!important}}

/* Supporting reference figure is static, distant, and half in shadow. */
.support-figure{position:absolute;left:63%;bottom:18%;width:9vw;height:30vh;background:url("assets/dancer-second.png") center bottom/contain no-repeat;opacity:.34;filter:brightness(.32) saturate(.5);mask-image:linear-gradient(90deg,transparent 18%,#000 70%);pointer-events:none}
@media(max-width:450px){.support-figure{left:63%;bottom:19%;width:20vw;height:24vh}}

.support-two{left:24%;bottom:19%;width:8vw;height:28vh;background-image:url("assets/background-two.png");opacity:.36;filter:brightness(.4) saturate(.55);mask-image:linear-gradient(270deg,transparent 5%,#000 68%)}
@media(max-width:450px){.support-two{left:17%;bottom:20%;width:17vw;height:22vh}}

/* Centered, accessible contact disclosure requested after artwork review. */
.contact-center{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 32px));text-align:center;max-height:calc(100dvh - 32px);overflow-y:auto;scrollbar-width:thin}
.contact-toggle{display:block;margin:0 auto;padding:14px 24px;min-height:48px;color:#ffe2cc;border:1px solid #e8a484;border-radius:3px;background:#1b0d14ed;box-shadow:0 5px 25px #0006;font:600 13px Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.contact-toggle span{display:inline-block;margin-left:14px;font-size:19px;font-weight:400;line-height:12px}
.contact-toggle[aria-expanded="true"]{border-bottom-color:transparent;border-radius:3px 3px 0 0}
.contact-panel{padding:16px 24px 20px;border:1px solid #c87b70;background:linear-gradient(145deg,#28131ff5,#100b12fa);border-radius:5px;box-shadow:0 14px 55px #000a;text-align:left;backdrop-filter:blur(12px)}
.contact-panel[hidden]{display:none}.contact-panel .brand{margin:0 0 8px;text-align:center;font-size:10px;color:#e6a88f}.contact-panel h2{margin:0 0 18px;text-align:center;color:#ffd4b7;font:400 28px Georgia,serif}.contact-panel label{font-size:12px;line-height:1.5;color:#e8b6ad}.contact-panel input,.contact-panel textarea{margin-top:5px;margin-bottom:12px;border-color:#875361;background:#150d16;font-size:16px}.contact-panel textarea{min-height:105px;max-height:28vh}.contact-panel .fields{gap:10px}.contact-panel .send{display:block;width:100%;min-height:48px;border-radius:3px;background:#542237}.contact-panel .preview-note,.contact-panel #form-status{text-align:center;margin:10px 0 0;font-size:11px;line-height:1.45}.stage-brand{margin:0;align-self:center;color:#ffe2cc;font:10px Arial,sans-serif;letter-spacing:.3em;text-shadow:0 1px 8px #000}
@media(max-width:450px){.contact-center{width:calc(100% - 28px)}.contact-panel{padding:14px 18px 16px}.contact-panel h2{font-size:26px;margin-bottom:12px}.contact-panel input,.contact-panel textarea{padding:8px 10px;margin-bottom:9px}.contact-panel .fields{gap:0}.contact-panel textarea{min-height:88px}.contact-toggle{padding:12px 20px}}