:root{color-scheme:light;--ink:#282824}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#eeede8}body{overflow:hidden;color:var(--ink);font-family:Arial,sans-serif}.scene{position:relative;width:100%;height:100%;min-height:420px;isolation:isolate;overflow:hidden}.walls,.wall,.light,.shadow{position:absolute;inset:0;width:100%;height:100%}.wall{object-fit:cover;object-position:center}.wall.next{opacity:0;transition:opacity 1.2s ease}.wall.next.reveal{opacity:1}.light{background:linear-gradient(118deg,#fff5df18,transparent 52%,#635a4010);pointer-events:none}.paint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:5vh 5vw 9vh;mix-blend-mode:multiply;transform:rotate(-.5deg)}.wordmark{display:block;width:min(88vw,1200px);height:auto;max-height:48vh;object-fit:contain;filter:blur(1.5px);opacity:.88;animation:breath 17s ease-in-out infinite}.silhouette{position:relative;flex:none;width:clamp(250px,30vw,390px);height:clamp(205px,29vh,270px);margin-top:10px;isolation:isolate}.shadow{background:url('assets/palm-shadow.png') center/cover no-repeat;mix-blend-mode:multiply;opacity:.16;filter:brightness(.35) blur(12px);transform-origin:110% 5%;transform:scale(1.3) rotate(-7deg);animation:sway 38s ease-in-out infinite alternate;pointer-events:none} .demo-controls{position:fixed;top:max(17px,env(safe-area-inset-top));right:max(19px,env(safe-area-inset-right));z-index:5}.demo-controls button{width:58px;height:54px;border:0;outline:none;box-shadow:none;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;padding:6px;background:transparent;color:#333630;cursor:pointer;display:grid;place-items:center}.demo-controls svg{filter:blur(.65px);opacity:.46;transition:opacity 1.3s ease}.demo-controls button[aria-pressed=true] svg{opacity:.84}.demo-controls button:hover svg{opacity:1}.demo-controls button:focus-visible{outline:none;box-shadow:none}.demo-controls button:focus-visible svg{opacity:1;filter:blur(.4px) drop-shadow(0 0 3px #33363055)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes breath{0%,100%{filter:blur(1.5px);opacity:.88}50%{filter:blur(2.9px);opacity:.83}}@keyframes sway{0%{transform:scale(1.3) translate(1%,0) rotate(-7deg);opacity:.12}45%{transform:scale(1.3) translate(-1.3%,1.5%) rotate(-4deg);opacity:.17}100%{transform:scale(1.3) translate(-2%,.5%) rotate(-1deg);opacity:.14}}@media(max-width:600px){.paint{padding:7vh 3vw 12vh}.wordmark{width:96vw;max-height:37vh}.silhouette{width:255px;height:225px;margin-top:14px}.shadow{background-size:auto 100%;background-position:58% center}}@media(max-height:600px) and (min-width:601px){.paint{padding:3vh 5vw 12vh}.wordmark{max-height:46vh;width:72vw}.silhouette{height:125px;width:200px;margin-top:0}}@media(prefers-reduced-motion:reduce){.wall.next{transition:none}}

.silhouette canvas{display:block;height:100%;width:auto;aspect-ratio:1;margin:0 auto;filter:blur(2.8px);animation:form-drift 19s ease-in-out infinite alternate;transform-origin:50% 50%}@keyframes form-drift{0%{transform:translate(-3px,3px) rotate(-4deg) scale(.97);filter:blur(2.8px)}50%{transform:translate(3px,-3px) rotate(1deg) scale(1.02);filter:blur(3.6px)}100%{transform:translate(-1px,1px) rotate(4deg) scale(.99);filter:blur(2.8px)}}




/* The visitor starts both sound and the reveal with one deliberate gesture. */
.awaiting-entry .paint,.opening .paint{opacity:0}
.paint{transition:opacity .85s ease}
#entrance-ink{position:absolute;inset:0;width:100%;height:100%;z-index:2;mix-blend-mode:multiply;filter:blur(2.3px);pointer-events:none;transition:opacity .85s ease}
#enter{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);z-index:4;width:min(90vw,480px);height:min(65vh,440px);padding:0;border:0;outline:none;box-shadow:none;background:none;color:#282824;cursor:pointer;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#enter:focus-visible{border-radius:48%;box-shadow:0 0 35px 2px #27282220}
.entry-pending #enter{cursor:progress}
.opening #enter{pointer-events:none}
.awaiting-entry .demo-controls,.opening .demo-controls{opacity:0;visibility:hidden;pointer-events:none}
.demo-controls{transition:opacity 1s ease}
.entered #entrance-ink{opacity:0}
.entered #enter{display:none}

/* One permanent canvas owns the ink before, during and after the reveal. */
body:not(.compatibility) .paint{opacity:0;transition:none}
body:not(.compatibility) .silhouette canvas{animation:none;transform:none}
body:not(.compatibility) #entrance-ink{opacity:1;transition:none;filter:blur(1.7px)}

.compatibility .paint{opacity:0;transition:none}.compatibility.entered #entrance-ink{opacity:1;transition:none}