*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{cursor:crosshair;background:#171b19;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif}main{width:100%;height:100%;min-height:100svh;position:relative;isolation:isolate}main::before{content:"";position:absolute;inset:-24px;z-index:-1;background:url("assets/background.jpg") center/cover no-repeat;transform:translate(var(--bg-x,0px),var(--bg-y,0px));will-change:transform;pointer-events:none}canvas{display:block;width:100%;height:100%;position:absolute;inset:0}#feel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translate(var(--fg-x,0px),var(--fg-y,0px));border:0;background:transparent;border-radius:50%;cursor:crosshair;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}#feel:focus-visible{outline:1px solid #e8076c;outline-offset:16px}





.intro-filters{position:absolute;pointer-events:none}
.shake-overlay{display:none}
@media(hover:none) and (pointer:coarse){
  #feel{pointer-events:none}
  .shake-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:transparent;opacity:1;visibility:visible;pointer-events:auto;transform:scale(1);transform-origin:center;overflow:visible;isolation:isolate}
  .shake-backdrop{position:absolute;inset:0;background:#000;pointer-events:none;border-radius:0;z-index:0}
  #motion-prompt{position:relative;z-index:1;pointer-events:auto;width:100%;margin:0;padding:0 4px;border:0;background:transparent;color:#fff;opacity:1;font:700 12.6vw/1 Helvetica,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.065em;white-space:nowrap;text-align:center;-webkit-tap-highlight-color:transparent}
  #motion-prompt:disabled{pointer-events:none;color:#fff;opacity:1;-webkit-text-fill-color:#fff}
  #motion-prompt:focus-visible{outline:1px solid #fff;outline-offset:4px}
}

.has-shaken .shake-overlay{pointer-events:none;animation:intro-swirl .15s cubic-bezier(.45,0,.8,.4) forwards}
.has-shaken .shake-backdrop{filter:url(#intro-warp);animation:intro-edge-warp .15s ease-in forwards}
.intro-finished .shake-overlay{display:none}
.intro-finished .shake-backdrop{filter:none}
@keyframes intro-swirl{
  0%{transform:scale(1) skew(0deg);visibility:visible}
  35%{transform:scale(.77) skew(-5deg)}
  65%{transform:scale(.40) skew(-14deg)}
  85%{transform:scale(.13) skew(8deg)}
  100%{transform:scale(0) skew(0deg);visibility:hidden}
}
@keyframes intro-edge-warp{
  0%{border-radius:0}
  35%{border-radius:18% 43% 26% 49% / 35% 22% 47% 31%}
  70%{border-radius:48% 28% 61% 35% / 31% 59% 23% 53%}
  100%{border-radius:44% 56% 37% 63% / 62% 35% 65% 38%}
}
@media(prefers-reduced-motion:reduce){.has-shaken .shake-overlay,.has-shaken .shake-backdrop{animation-duration:.01s}}



canvas.intro-vortex{z-index:12;pointer-events:none}
.vortex-active .shake-overlay{visibility:hidden;animation:none}
.vortex-active .shake-backdrop{animation:none;filter:none}