/* ========================================
   Hangman – Figure rig, drawing, and win-dance staging
   Joint motion for the dances is driven by dance.js (Web Animations API);
   this file sets up the skeleton, the static poses, and the stage effects.
======================================== */

:root {
  --shadow-ink: rgba(0, 0, 0, 0.55);
}

:root[data-theme="light"] {
  --shadow-ink: rgba(30, 30, 60, 0.2);
}

.hangman-area {
  position: relative;
  cursor: default;
}

.hangman-area.dancing {
  cursor: pointer; /* tap to skip to the result */
}

/* ---------- Drawing the figure ----------
   Each stroke "draws" itself: dash = its length, offset animates to 0.
   Arms and legs are two segments (elbow / knee); the second follows the first. */
.hangman-part {
  --len: 60;
  stroke: var(--figure);
  stroke-width: 4;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  opacity: 0;
  transition: stroke-dashoffset 0.3s ease-out, opacity 0.1s;
}

#head { --len: 126; transition-duration: 0.45s; }
#body { --len: 60; }
.seg-arm { --len: 18.1; }
.seg-leg { --len: 22.4; }
.seg-2 { transition-delay: 0.22s; }

.hangman-part.visible {
  stroke-dashoffset: 0;
  opacity: 1;
}

/* ---------- Joints (rest-pose coordinates in SVG user units) ---------- */
.figure,
.dancer,
.torso,
.fig-head,
.larm-u, .larm-f, .rarm-u, .rarm-f,
.lleg-u, .lleg-l, .rleg-u, .rleg-l,
.shadow,
.rope,
.disco-ball,
.beam {
  transform-box: view-box;
}

.dancer { transform-origin: 140px 190px; }  /* feet */
.shadow { transform-origin: 140px 190px; }
.torso { transform-origin: 140px 150px; }   /* hips */
.fig-head { transform-origin: 140px 90px; } /* neck */
.larm-u,
.rarm-u { transform-origin: 140px 110px; }  /* shoulders */
.larm-f { transform-origin: 125px 120px; }  /* elbows */
.rarm-f { transform-origin: 155px 120px; }
.lleg-u,
.rleg-u { transform-origin: 140px 150px; }  /* hips */
.lleg-l { transform-origin: 130px 170px; }  /* knees */
.rleg-l { transform-origin: 150px 170px; }
.rope { transform-origin: 140px 20px; }

/* ---------- Face ---------- */
.face {
  opacity: 0;
  transition: opacity 0.3s 0.3s;
}

.face.visible {
  opacity: 1;
}

.face .eye-dot {
  fill: var(--figure);
}

.face .mouth,
.face .eye-x,
.face .eye-happy {
  stroke: var(--figure);
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.face .grin {
  fill: var(--figure);
}

.face .shades {
  fill: #0d0d14;
  stroke: var(--figure);
  stroke-width: 1;
  stroke-linejoin: round;
}

.face .eye-x,
.face .eye-happy,
.face .grin,
.face .shades,
.face.dead .eye-dot {
  display: none;
}

.face.dead .eye-x {
  display: inline;
}

.face.dead .mouth {
  transform: translateY(6px) scaleY(-1);
  transform-origin: 140px 79px;
}

/* ---------- Winning: drop off the rope, land, strike a pose ---------- */
.figure {
  transition: transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) 0.35s;
}

.ground {
  stroke: var(--gallows);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.3s ease 0.4s;
}

.shadow {
  fill: var(--shadow-ink);
  opacity: 0;
  transition: opacity 0.3s ease 0.7s;
}

#hangman-svg.won .figure { transform: translateY(40px); }
#hangman-svg.won .ground { opacity: 1; }
#hangman-svg.won .shadow { opacity: 0.9; }

/* Victory "V" while landing (and the whole show for reduced-motion players) */
.larm-u,
.rarm-u,
.larm-f,
.rarm-f { transition: transform 0.3s ease 0.55s; }
#hangman-svg.won .larm-u { transform: rotate(62deg); }
#hangman-svg.won .larm-f { transform: rotate(34deg); }
#hangman-svg.won .rarm-u { transform: rotate(-62deg); }
#hangman-svg.won .rarm-f { transform: rotate(-34deg); }

#hangman-svg.won .face .eye-dot,
#hangman-svg.won .face .mouth { display: none; }
#hangman-svg.won .face .eye-happy,
#hangman-svg.won .face .grin { display: inline; }

/* The empty rope swings after the figure lets go */
#hangman-svg.won .rope {
  animation: rope-swing 2.6s ease-out 0.4s 1 both;
}

@keyframes rope-swing {
  0% { transform: rotate(0); }
  15% { transform: rotate(18deg); }
  35% { transform: rotate(-12deg); }
  55% { transform: rotate(7deg); }
  75% { transform: rotate(-3deg); }
  100% { transform: rotate(0); }
}

/* Dust puffs on landing */
.dust circle {
  fill: var(--muted);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

#hangman-svg.won .dust circle {
  animation: dust-l 0.7s ease-out 0.78s 1 both;
}
#hangman-svg.won .dust circle:nth-child(2) { animation-name: dust-r; }
#hangman-svg.won .dust circle:nth-child(3) { animation-name: dust-up; }

@keyframes dust-l {
  from { transform: translate(0, 0) scale(0.3); opacity: 0.8; }
  to { transform: translate(-14px, -6px) scale(1.8); opacity: 0; }
}
@keyframes dust-r {
  from { transform: translate(0, 0) scale(0.3); opacity: 0.8; }
  to { transform: translate(14px, -6px) scale(1.8); opacity: 0; }
}
@keyframes dust-up {
  from { transform: translate(0, 0) scale(0.3); opacity: 0.6; }
  to { transform: translate(0, -10px) scale(1.4); opacity: 0; }
}

/* Floating music notes */
.note {
  font-size: 17px;
  font-weight: 700;
  fill: var(--gold);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

#hangman-svg.won .note { animation: note-float 2.4s ease-out 1.1s infinite; }
#hangman-svg.won .note-2 { animation-delay: 1.9s; }
#hangman-svg.won .note-3 { animation-delay: 2.7s; }

@keyframes note-float {
  0% { transform: translate(0, 10px) rotate(-10deg) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  60% { transform: translate(-6px, -14px) rotate(8deg) scale(1); opacity: 1; }
  100% { transform: translate(6px, -36px) rotate(-6deg) scale(1.1); opacity: 0; }
}

/* ---------- Level 2 – The Twist: warm spotlight ---------- */
.spotlight {
  opacity: 0;
  transition: opacity 0.6s ease 0.6s;
}

.spotlight ellipse {
  fill: #fff6d5;
  opacity: 0.16;
}

#hangman-svg.dance-2 .spotlight {
  opacity: 1;
  animation: spot-pulse 1s ease-in-out 1s infinite;
}

@keyframes spot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ---------- Level 3 – Disco Fever: ball, beams, shades, colour flashes ---------- */
.disco-ball {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.4s ease 0.5s, transform 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.5s;
}

.disco-ball .ball-string {
  stroke: var(--gallows);
  stroke-width: 1.5;
}

.disco-ball .facet {
  fill: none;
  stroke: rgba(40, 44, 70, 0.55);
  stroke-width: 0.7;
}

.disco-ball .facet-1,
.disco-ball .facet-2 {
  transform-box: fill-box;
  transform-origin: center;
}

.disco-ball .sparkle {
  fill: #fff;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

#hangman-svg.dance-3 .disco-ball {
  opacity: 1;
  transform: translateY(0);
}

#hangman-svg.dance-3 .facet-1 { animation: facet-turn 1.2s linear infinite; }
#hangman-svg.dance-3 .facet-2 { animation: facet-turn 1.2s linear -0.6s infinite; }
#hangman-svg.dance-3 .sparkle { animation: twinkle 1.2s ease-in-out 1s infinite; }
#hangman-svg.dance-3 .sparkle-2 { animation-delay: 1.4s; }
#hangman-svg.dance-3 .sparkle-3 { animation-delay: 1.8s; }

@keyframes facet-turn {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(0.1); }
  100% { transform: scaleX(1); }
}

@keyframes twinkle {
  0%, 100% { transform: scale(0.2) rotate(0); opacity: 0; }
  50% { transform: scale(1.2) rotate(45deg); opacity: 1; }
}

.disco-beams {
  opacity: 0;
  transition: opacity 0.5s ease 0.9s;
}

.beam {
  transform-origin: 100px 40px;
  mix-blend-mode: screen;
  opacity: 0.22;
}

.beam-1 { fill: #f9c74f; }
.beam-2 { fill: #ff6b9d; }
.beam-3 { fill: #4ecca3; }

#hangman-svg.dance-3 .disco-beams { opacity: 1; }
#hangman-svg.dance-3 .beam-1 { animation: beam-sweep 2.2s ease-in-out infinite alternate; }
#hangman-svg.dance-3 .beam-2 { animation: beam-sweep 1.7s ease-in-out -0.8s infinite alternate-reverse; }
#hangman-svg.dance-3 .beam-3 { animation: beam-sweep 2.6s ease-in-out -1.3s infinite alternate; }

@keyframes beam-sweep {
  from { transform: rotate(-16deg); }
  to { transform: rotate(16deg); }
}

#hangman-svg.dance-3 .face .shades { display: inline; }
#hangman-svg.dance-3 .hangman-part { animation: disco-color 2s steps(1) 0.95s infinite; }

@keyframes disco-color {
  0% { stroke: var(--figure); }
  25% { stroke: #f9c74f; }
  50% { stroke: #4ecca3; }
  75% { stroke: #ff6b9d; }
}

/* ---------- "Level 2 · The Twist" badge ---------- */
.dance-label {
  position: absolute;
  top: 6px;
  right: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gold);
  color: #3a2300;
  font-size: 0.75rem;
  font-weight: 800;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease 0.9s, transform 0.3s ease 0.9s;
  pointer-events: none;
}

.dance-label.show {
  opacity: 1;
  transform: translateY(0);
}