/* 산타 재판소 — 그림 전용 꾸밈·움직임 (public/art/*.js 가 만드는 SVG 용)
   style.css 뒤에 불러옵니다. 그림의 크기·자리만 여기서 덮어씁니다. */

/* ── 그림 자리 ─────────────────────────────── */
/* 눈 마을(넓은 화면): 창 전체 높이를 채움. 가운데 위쪽은 하늘이라 제목이 들어감 */
.bg-wide.village-wide {
  left: 0; bottom: 0; width: 100%; height: 100%;
  min-height: 0; max-width: none; transform: none;
}
/* 데스크탑: 큰 버튼이 재판소 꼭대기 별을 가리지 않게 그림을 조금 낮춤(하늘은 화면 바탕이라 이음매 없음) */
@media (min-width: 900px) {
  .bg-wide.village-wide { height: 90%; overflow: visible; }
}
@media (min-width: 900px) and (max-height: 720px) {
  .bg-wide.village-wide { height: 84%; }
}
/* 눈 마을 화면의 별은 그림 안에 그려 넣었으므로 화면 틀의 별은 숨김(집 위에 별이 뜨지 않게) */
.screen.village .sky .st { display: none; }
svg.bg-bottom, svg.bg-wide { pointer-events: none; }

/* ── 움직임 ─────────────────────────────── */
/* 관절·흔들림: --r0 ~ --r1 사이를 오감 (도는 중심은 그 묶음의 원점) */
@keyframes a-rot { from { transform: rotate(var(--r0, -6deg)); } to { transform: rotate(var(--r1, 6deg)); } }
.a-rot { animation: a-rot var(--t, 2s) ease-in-out infinite alternate; }
@keyframes a-throw {
  0%, 52% { transform: rotate(var(--r0, 140deg)); }
  62% { transform: rotate(var(--r1, -70deg)); }
  78%, 100% { transform: rotate(var(--r0, 140deg)); }
}
.a-throw { animation: a-throw var(--t, 2.6s) ease-in-out infinite; }
@keyframes a-bob { from { transform: translateY(0); } to { transform: translateY(var(--dy, -2px)); } }
.a-bob { animation: a-bob var(--t, 1.6s) ease-in-out infinite alternate; }
@keyframes a-hop { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(-8px); } }
.a-hop { animation: a-hop 1.3s ease-out infinite; }
/* 왔다 갔다(끝에서 돌아섬) */
@keyframes a-patrol {
  0% { transform: translate(var(--x0, 0), var(--y0, 0)) scaleX(1); }
  48.5% { transform: translate(var(--x1, 40px), var(--y1, 0)) scaleX(1); }
  50% { transform: translate(var(--x1, 40px), var(--y1, 0)) scaleX(-1); }
  98.5% { transform: translate(var(--x0, 0), var(--y0, 0)) scaleX(-1); }
  100% { transform: translate(var(--x0, 0), var(--y0, 0)) scaleX(1); }
}
.a-patrol { animation: a-patrol var(--t, 9s) linear infinite; }
@keyframes a-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.a-blink { animation: a-blink 4.4s linear infinite; }
@keyframes a-tw { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.a-tw { animation: a-tw 2.3s ease-in-out infinite; }
@keyframes a-tw1 { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .32; } }
.a-tw1 { animation: a-tw1 1.5s linear infinite; }
.a-tw2 { animation: a-tw1 1.5s linear -0.75s infinite; }
@keyframes a-pulse { from { opacity: .55; } to { opacity: 1; } }
.a-pulse { animation: a-pulse 2.6s ease-in-out infinite alternate; }
@keyframes a-flick { 0%, 44%, 56%, 100% { opacity: 1; } 50% { opacity: .68; } 78% { opacity: .86; } }
.a-flick { animation: a-flick 5.2s linear infinite; }
@keyframes a-smoke {
  0% { transform: translate(0, 0) scale(.5); opacity: 0; }
  14% { opacity: .78; }
  100% { transform: translate(14px, -40px) scale(1.9); opacity: 0; }
}
.a-smoke { animation: a-smoke 4.5s linear infinite; }
@keyframes a-steam { 0% { transform: translateY(2px); opacity: 0; } 30% { opacity: .85; } 100% { transform: translateY(-6px); opacity: 0; } }
.a-steam { animation: a-steam 2.2s ease-out infinite; }
@keyframes a-flag { from { transform: skewY(-7deg) scaleX(1); } to { transform: skewY(7deg) scaleX(.86); } }
.a-flag { animation: a-flag 1s ease-in-out infinite alternate; }
@keyframes a-fire { from { transform: scale(1, 1) skewX(-3deg); } to { transform: scale(.9, 1.16) skewX(4deg); } }
.a-fire { animation: a-fire .42s ease-in-out infinite alternate; }
@keyframes a-wob { from { transform: rotate(-9deg) scale(1); } to { transform: rotate(9deg) scale(1.08); } }
.a-wob { animation: a-wob 2.4s ease-in-out infinite alternate; }
@keyframes a-roll { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.a-roll { animation: a-roll var(--t, 4s) linear infinite; }
/* 하늘 */
@keyframes a-aurora { from { transform: translateX(-26px); opacity: .55; } to { transform: translateX(26px); opacity: 1; } }
.a-aurora { animation: a-aurora 11s ease-in-out infinite alternate; }
@keyframes a-shoot {
  0%, 86% { transform: translate(0, 0); opacity: 0; }
  88% { opacity: 1; }
  96% { transform: translate(-260px, 120px); opacity: 0; }
  100% { transform: translate(-260px, 120px); opacity: 0; }
}
.a-shoot { opacity: 0; animation: a-shoot 13s linear infinite; }
/* 산타 썰매: 넓은 화면은 왼쪽 위에서 내려와 가운데를 스치고 오른쪽 위로 */
@keyframes a-fly-wide {
  0% { transform: translate(-1500px, -150px) rotate(9deg); }
  25% { transform: translate(-750px, -42px) rotate(5deg); }
  50% { transform: translate(0, 0) rotate(0deg); }
  75% { transform: translate(750px, -42px) rotate(-5deg); }
  100% { transform: translate(1500px, -150px) rotate(-9deg); }
}
.a-fly-wide { animation: a-fly-wide 44s linear infinite; }
@keyframes a-fly-m {
  0% { transform: translate(-420px, 22px) rotate(4deg); }
  50% { transform: translate(-40px, 0) rotate(0deg); }
  100% { transform: translate(340px, -26px) rotate(-5deg); }
}
.a-fly-m { animation: a-fly-m 17s linear infinite; }
/* 썰매 타고 내려오기 */
@keyframes a-slide {
  0% { transform: translate(var(--x0, 0), var(--y0, 0)); opacity: 0; }
  7% { opacity: 1; }
  62% { transform: translate(var(--x1, 0), var(--y1, 0)); opacity: 1; }
  70%, 100% { transform: translate(var(--x1, 0), var(--y1, 0)); opacity: 0; }
}
.a-slide { animation: a-slide var(--t, 6s) cubic-bezier(.45, 0, .8, .6) infinite; }
/* 눈뭉치 포물선 (a-throw 와 같은 박자) */
@keyframes a-ball {
  0%, 60% { transform: translate(0, 0); opacity: 0; }
  61% { transform: translate(0, 0); opacity: 1; }
  68% { transform: translate(calc(var(--x, 80px) * .3), calc(var(--h, 30px) * -.84)); opacity: 1; }
  75% { transform: translate(calc(var(--x, 80px) * .55), calc(var(--h, 30px) * -1)); opacity: 1; }
  83% { transform: translate(calc(var(--x, 80px) * .8), calc(var(--h, 30px) * -.6)); opacity: 1; }
  90% { transform: translate(var(--x, 80px), 0); opacity: 1; }
  92%, 100% { transform: translate(var(--x, 80px), 0); opacity: 0; }
}
.a-ball { opacity: 0; animation: a-ball var(--t, 2.6s) linear infinite; }
/* 재판정 인물 */
@keyframes a-breath { from { transform: scale(1, 1); } to { transform: scale(1.012, 1.022); } }
.a-breath { animation: a-breath 2.2s ease-in-out infinite alternate; }
@keyframes a-nod { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(2.5px) rotate(1.6deg); } }
.a-nod { animation: a-nod 2.6s ease-in-out infinite; }
@keyframes a-read { 0%, 10% { transform: translateX(-1.6px); } 45%, 55% { transform: translateX(1.6px); } 90%, 100% { transform: translateX(-1.6px); } }
.a-read { animation: a-read 2.6s ease-in-out infinite; }
@keyframes a-gavel {
  0%, 50%, 100% { transform: rotate(0deg); }
  64% { transform: rotate(-18deg); }
  74% { transform: rotate(63deg); }
  79% { transform: rotate(54deg); }
  84% { transform: rotate(61deg); }
}
.a-gavel { animation: a-gavel 2.6s cubic-bezier(.5, 0, .4, 1) infinite; }
@keyframes a-hit { 0%, 72%, 100% { opacity: 0; transform: scale(.6); } 76% { opacity: 1; transform: scale(1.15); } 90% { opacity: 1; transform: scale(1); } }
.a-hit { opacity: 0; animation: a-hit 2.6s linear infinite; }
@keyframes a-shake { 0%, 72%, 86%, 100% { transform: translateY(0); } 76% { transform: translateY(2.5px); } 80% { transform: translateY(-1px); } }
.a-shake { animation: a-shake 2.6s linear infinite; }
@keyframes a-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.a-sway { animation: a-sway var(--t, 2.2s) ease-in-out infinite alternate; }

/* ── 움직임 줄이기 ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  svg [class^="a-"], svg [class*=" a-"] { animation: none !important; }
  .a-fly-wide { transform: translate(-560px, -70px) rotate(6deg); }
  .a-fly-m { transform: translate(-150px, 6px); }
}