:root {
  --pressScale: 1;
  --rotate: 0turn;     /* kept for future use if you want rotation */
  --corner: 50%;       /* corner radius for shape (circle=50%, packed=0) */
  --gutter: 48px;
    /* 배경 HSL(숫자 대신 퍼센트 문자열로 받음) */
  --bgH: 0;     /* hue: 빨강(0도) 고정 */
  --bgS: 0%;    /* saturation */
  --bgL: 6%;    /* lightness: 넓을수록 6% 부근(거의 검정) */

  /* 텍스트 밝기(회색/흰으로 자동 조절) */
  --fgL: 95%;
}


body{
  margin:0;
  /* ✅ 배경을 HSL 변수로 */
  background: hsl(var(--bgH) var(--bgS) var(--bgL));
  /* 텍스트는 무채색 밝기 변수 사용 */
  color: hsl(0 0% var(--fgL));
  transition: background-color 240ms ease, color 240ms ease;
  font-family: Inter, Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

/* 헤더 글자색도 전역 텍스트 밝기 따라가게(있다면 유지) */
.hdr{ color: hsl(0 0% var(--fgL)); }

/* Compose transforms so breathing + boop work together */
.shape {
  transform: rotate(var(--rotate)) scale(var(--pressScale));
  border-radius: var(--corner);
}

/* Breathing for non-packed modes (includes pressScale so boop shows) */
.shape:not([data-mode="packed"]) {
  animation: breathe 3.5s ease-in-out infinite alternate;
}

/* full-screen overlay for hands */
.ui-canvas{
  position: fixed;    /* cover the viewport, not the shape */
  inset: 0;
  width: 100vw;
  height: 100dvh;     /* avoid iOS toolbar issues */
  pointer-events: none;
  z-index: 30;        /* above the face canvas */
}
/* keep the face canvas inside the shape */
.shape-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 10;
}


/* (optional) keep any inner text below the canvas layer */
.text{ position: relative; z-index: 0; }

/* hard shake for packed mode */
@keyframes shakePacked {
  0%   { transform: translate( 0px,  0px); }
  25%  { transform: translate(-3px,  1px); }
  50%  { transform: translate( 3px, -2px); }
  75%  { transform: translate(-2px, -1px); }
  100% { transform: translate( 2px,  2px); }
}

/* Apply shake to the canvases so we don't fight the shape's own transforms */
.shape[data-mode="packed"] .shape-canvas,
.shape[data-mode="packed"] .ui-canvas{
  animation: shakePacked 90ms steps(2, end) infinite;
  will-change: transform;
}