/* Motion layer: popup splash + articulated, environment-aware idle parkour. */

.signal-sky,
.signal-ui {
  opacity: 0;
  will-change: transform, opacity;
}

.signal-sky {
  transform: translate(-50%, -50%) scale(0.72) rotate(-6deg);
  border-radius: 58% 42% 61% 39% / 44% 58% 42% 56%;
  transition:
    transform 520ms cubic-bezier(.16, .9, .2, 1),
    opacity 260ms ease,
    border-radius 560ms cubic-bezier(.16, .9, .2, 1);
}

.signal-ui {
  transform: translate(-50%, calc(-50% + 28px)) scale(0.9);
  transition:
    transform 430ms cubic-bezier(.16, .9, .2, 1),
    opacity 220ms ease;
}

.signal.is-open .signal-sky {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  border-radius: 47% 53% 42% 58% / 55% 43% 57% 45%;
}

.signal.is-open .signal-ui {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 70ms;
}

.signal.is-open .signal-sky::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0;
  animation: splash-ring 720ms 80ms ease-out forwards;
  pointer-events: none;
}

@keyframes splash-ring {
  0% { opacity: 0.4; transform: scale(0.72); }
  100% { opacity: 0; transform: scale(1.16); }
}

.idle-runner {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 800;
  width: 48px;
  height: 78px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-120px, -120px, 0);
  transform-origin: 50% 100%;
  will-change: transform;
  transition: opacity 80ms linear;
}

.idle-runner.is-visible {
  opacity: 1;
}

.runner-figure {
  width: 48px;
  height: 78px;
  overflow: visible;
  fill: none;
  stroke: #080808;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.95));
}

.runner-body {
  transform-origin: 24px 39px;
}

.idle-runner[data-facing="left"] .runner-body {
  transform: scaleX(-1);
}

.runner-head {
  fill: #ffffff;
  stroke: #080808;
  transform-origin: 24px 17px;
}

.runner-hand {
  fill: #080808;
  stroke: none;
}

.runner-joint,
.runner-head,
.runner-neck,
.runner-torso {
  transform-box: view-box;
}

.runner-shoulder-left,
.runner-shoulder-right { transform-origin: 24px 23px; }
.runner-elbow-left { transform-origin: 15px 33px; }
.runner-elbow-right { transform-origin: 33px 33px; }
.runner-hip-left,
.runner-hip-right { transform-origin: 24px 43px; }
.runner-knee-left { transform-origin: 17px 57px; }
.runner-knee-right { transform-origin: 31px 57px; }

.runner-shadow {
  position: absolute;
  left: 8px;
  bottom: 4px;
  width: 32px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  filter: blur(2px);
  transform: scaleX(0.7);
  transform-origin: center;
  transition: opacity 100ms ease, transform 100ms ease;
}

.project-link.runner-contact {
  position: relative;
}

.project-link.runner-contact::after {
  content: "";
  position: absolute;
  left: var(--runner-contact-x, 50%);
  top: -3px;
  width: 13px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.14;
  transform: translateX(-50%);
  pointer-events: none;
}

.project-link.runner-grip::after {
  top: -1px;
  width: 18px;
  opacity: 0.23;
}

.idle-runner.is-standing .runner-body {
  animation: standing-breath 1050ms ease-in-out infinite alternate;
}

.idle-runner.is-looking .runner-head {
  animation: look-ahead 170ms ease-out both;
}

.idle-runner.is-looking .runner-shoulder-left { transform: rotate(-5deg); }
.idle-runner.is-looking .runner-shoulder-right { transform: rotate(-10deg); }
.idle-runner.is-looking .runner-torso { transform: rotate(2deg); transform-origin: 24px 43px; }

.idle-runner.is-walking .runner-body {
  animation: walk-bob 300ms ease-in-out infinite alternate;
}
.idle-runner.is-walking .runner-shoulder-left { animation: walk-arm-left 300ms ease-in-out infinite alternate; }
.idle-runner.is-walking .runner-shoulder-right { animation: walk-arm-right 300ms ease-in-out infinite alternate; }
.idle-runner.is-walking .runner-elbow-left { animation: walk-elbow-left 300ms ease-in-out infinite alternate; }
.idle-runner.is-walking .runner-elbow-right { animation: walk-elbow-right 300ms ease-in-out infinite alternate; }
.idle-runner.is-walking .runner-hip-left { animation: walk-hip-left 300ms ease-in-out infinite alternate; }
.idle-runner.is-walking .runner-hip-right { animation: walk-hip-right 300ms ease-in-out infinite alternate; }
.idle-runner.is-walking .runner-knee-left { animation: walk-knee-left 300ms ease-in-out infinite alternate; }
.idle-runner.is-walking .runner-knee-right { animation: walk-knee-right 300ms ease-in-out infinite alternate; }

.idle-runner.is-running .runner-body {
  animation: run-bob 190ms ease-in-out infinite alternate;
  transform-origin: 24px 71px;
}
.idle-runner.is-running .runner-shoulder-left { animation: run-arm-left 190ms ease-in-out infinite alternate; }
.idle-runner.is-running .runner-shoulder-right { animation: run-arm-right 190ms ease-in-out infinite alternate; }
.idle-runner.is-running .runner-elbow-left,
.idle-runner.is-running .runner-elbow-right { transform: rotate(-22deg); }
.idle-runner.is-running .runner-hip-left { animation: run-hip-left 190ms ease-in-out infinite alternate; }
.idle-runner.is-running .runner-hip-right { animation: run-hip-right 190ms ease-in-out infinite alternate; }
.idle-runner.is-running .runner-knee-left { animation: run-knee-left 190ms ease-in-out infinite alternate; }
.idle-runner.is-running .runner-knee-right { animation: run-knee-right 190ms ease-in-out infinite alternate; }

.idle-runner.is-balancing .runner-body {
  animation: balance-body 760ms ease-in-out infinite alternate;
}
.idle-runner.is-balancing .runner-shoulder-left { transform: rotate(50deg); }
.idle-runner.is-balancing .runner-shoulder-right { transform: rotate(-50deg); }
.idle-runner.is-balancing .runner-elbow-left { transform: rotate(-10deg); }
.idle-runner.is-balancing .runner-elbow-right { transform: rotate(10deg); }
.idle-runner.is-balancing .runner-hip-left { transform: rotate(5deg); }
.idle-runner.is-balancing .runner-hip-right { transform: rotate(-5deg); }

.idle-runner.is-crouching .runner-body { transform: translateY(5px); }
.idle-runner.is-crouching .runner-torso { transform: rotate(8deg); transform-origin: 24px 43px; }
.idle-runner.is-crouching .runner-shoulder-left { transform: rotate(-30deg); }
.idle-runner.is-crouching .runner-shoulder-right { transform: rotate(-42deg); }
.idle-runner.is-crouching .runner-elbow-left { transform: rotate(22deg); }
.idle-runner.is-crouching .runner-elbow-right { transform: rotate(30deg); }
.idle-runner.is-crouching .runner-hip-left { transform: rotate(-34deg); }
.idle-runner.is-crouching .runner-hip-right { transform: rotate(38deg); }
.idle-runner.is-crouching .runner-knee-left { transform: rotate(68deg); }
.idle-runner.is-crouching .runner-knee-right { transform: rotate(-64deg); }
.idle-runner.is-crouching .runner-shadow { transform: scaleX(1.04); opacity: 0.23; }

.idle-runner.is-airborne .runner-body {
  animation: airborne-body 380ms ease-in-out infinite alternate;
}
.idle-runner.is-airborne .runner-shoulder-left { transform: rotate(42deg); }
.idle-runner.is-airborne .runner-shoulder-right { transform: rotate(-24deg); }
.idle-runner.is-airborne .runner-elbow-left { transform: rotate(-28deg); }
.idle-runner.is-airborne .runner-elbow-right { transform: rotate(22deg); }
.idle-runner.is-airborne .runner-hip-left { transform: rotate(-20deg); }
.idle-runner.is-airborne .runner-hip-right { transform: rotate(28deg); }
.idle-runner.is-airborne .runner-knee-left { transform: rotate(42deg); }
.idle-runner.is-airborne .runner-knee-right { transform: rotate(-28deg); }

.idle-runner.is-vaulting .runner-body { animation: vault-body 320ms ease-in-out infinite alternate; }
.idle-runner.is-vaulting .runner-shoulder-left { transform: rotate(68deg); }
.idle-runner.is-vaulting .runner-elbow-left { transform: rotate(-38deg); }
.idle-runner.is-vaulting .runner-shoulder-right { transform: rotate(-18deg); }
.idle-runner.is-vaulting .runner-elbow-right { transform: rotate(34deg); }
.idle-runner.is-vaulting .runner-hip-left { transform: rotate(-42deg); }
.idle-runner.is-vaulting .runner-knee-left { transform: rotate(76deg); }
.idle-runner.is-vaulting .runner-hip-right { transform: rotate(46deg); }
.idle-runner.is-vaulting .runner-knee-right { transform: rotate(-70deg); }

.idle-runner.is-falling .runner-body { animation: falling-body 420ms ease-in-out infinite alternate; }
.idle-runner.is-falling .runner-shoulder-left { transform: rotate(62deg); }
.idle-runner.is-falling .runner-shoulder-right { transform: rotate(-62deg); }
.idle-runner.is-falling .runner-elbow-left { transform: rotate(-18deg); }
.idle-runner.is-falling .runner-elbow-right { transform: rotate(18deg); }
.idle-runner.is-falling .runner-hip-left { transform: rotate(-12deg); }
.idle-runner.is-falling .runner-hip-right { transform: rotate(18deg); }
.idle-runner.is-falling .runner-knee-left { transform: rotate(18deg); }
.idle-runner.is-falling .runner-knee-right { transform: rotate(-12deg); }

.idle-runner.is-hanging .runner-shoulder-left,
.idle-runner.is-catching .runner-shoulder-left,
.idle-runner.is-pulling .runner-shoulder-left,
.idle-runner.is-mantling .runner-shoulder-left { transform: rotate(96deg); }

.idle-runner.is-hanging .runner-shoulder-right,
.idle-runner.is-catching .runner-shoulder-right,
.idle-runner.is-pulling .runner-shoulder-right,
.idle-runner.is-mantling .runner-shoulder-right { transform: rotate(-96deg); }

.idle-runner.is-hanging .runner-elbow-left,
.idle-runner.is-catching .runner-elbow-left { transform: rotate(-16deg); }
.idle-runner.is-hanging .runner-elbow-right,
.idle-runner.is-catching .runner-elbow-right { transform: rotate(16deg); }

.idle-runner.is-hanging .runner-body { animation: hanging-weight 720ms ease-in-out infinite alternate; }
.idle-runner.is-hanging .runner-hip-left { transform: rotate(-8deg); }
.idle-runner.is-hanging .runner-hip-right { transform: rotate(12deg); }
.idle-runner.is-hanging .runner-knee-left { transform: rotate(15deg); }
.idle-runner.is-hanging .runner-knee-right { transform: rotate(-12deg); }

.idle-runner.is-swinging .runner-shoulder-left { transform: rotate(92deg); }
.idle-runner.is-swinging .runner-shoulder-right { transform: rotate(-92deg); }
.idle-runner.is-swinging .runner-elbow-left { transform: rotate(-12deg); }
.idle-runner.is-swinging .runner-elbow-right { transform: rotate(12deg); }
.idle-runner.is-swinging .runner-hip-left { transform: rotate(-30deg); }
.idle-runner.is-swinging .runner-hip-right { transform: rotate(34deg); }
.idle-runner.is-swinging .runner-knee-left { transform: rotate(26deg); }
.idle-runner.is-swinging .runner-knee-right { transform: rotate(-22deg); }
.idle-runner.is-swinging .runner-body { animation: body-swing 340ms ease-in-out infinite alternate; }

.idle-runner.is-catching .runner-body { animation: catch-recoil 190ms cubic-bezier(.2,.85,.25,1) both; }
.idle-runner.is-catching .runner-head { animation: head-catch 190ms ease both; }

.idle-runner.is-bracing .runner-body { transform: rotate(-8deg); }
.idle-runner.is-bracing .runner-shoulder-left { transform: rotate(64deg); }
.idle-runner.is-bracing .runner-elbow-left { transform: rotate(-34deg); }
.idle-runner.is-bracing .runner-shoulder-right { transform: rotate(-36deg); }
.idle-runner.is-bracing .runner-elbow-right { transform: rotate(44deg); }
.idle-runner.is-bracing .runner-hip-left { transform: rotate(-54deg); }
.idle-runner.is-bracing .runner-knee-left { transform: rotate(30deg); }
.idle-runner.is-bracing .runner-hip-right { transform: rotate(38deg); }
.idle-runner.is-bracing .runner-knee-right { transform: rotate(-18deg); }

.idle-runner.is-mantling .runner-body { animation: mantle-strain 260ms ease-in-out infinite alternate; }
.idle-runner.is-mantling .runner-elbow-left { transform: rotate(-54deg); }
.idle-runner.is-mantling .runner-elbow-right { transform: rotate(54deg); }
.idle-runner.is-mantling .runner-hip-left { transform: rotate(-34deg); }
.idle-runner.is-mantling .runner-knee-left { transform: rotate(66deg); }
.idle-runner.is-mantling .runner-hip-right { transform: rotate(20deg); }
.idle-runner.is-mantling .runner-knee-right { transform: rotate(-32deg); }

.idle-runner.is-pulling .runner-body { animation: mantle-strain 260ms ease-in-out infinite alternate; }
.idle-runner.is-pulling .runner-elbow-left { transform: rotate(-48deg); }
.idle-runner.is-pulling .runner-elbow-right { transform: rotate(48deg); }

.idle-runner.is-landing .runner-body { animation: runner-land 200ms cubic-bezier(.2,.9,.3,1); }
.idle-runner.is-landing .runner-hip-left { transform: rotate(-20deg); }
.idle-runner.is-landing .runner-hip-right { transform: rotate(22deg); }
.idle-runner.is-landing .runner-knee-left { transform: rotate(42deg); }
.idle-runner.is-landing .runner-knee-right { transform: rotate(-40deg); }
.idle-runner.is-landing .runner-shadow { animation: shadow-land 200ms ease; }

.idle-runner.is-interrupted .runner-body { animation: interrupted-recoil 180ms ease-out both; }
.idle-runner.is-interrupted .runner-shoulder-left { transform: rotate(46deg); }
.idle-runner.is-interrupted .runner-shoulder-right { transform: rotate(-50deg); }
.idle-runner.is-interrupted .runner-hip-left { transform: rotate(-20deg); }
.idle-runner.is-interrupted .runner-hip-right { transform: rotate(24deg); }
.idle-runner.is-interrupted .runner-knee-left { transform: rotate(24deg); }
.idle-runner.is-interrupted .runner-knee-right { transform: rotate(-22deg); }

.idle-runner.is-airborne .runner-shadow,
.idle-runner.is-vaulting .runner-shadow,
.idle-runner.is-falling .runner-shadow,
.idle-runner.is-hanging .runner-shadow,
.idle-runner.is-swinging .runner-shadow,
.idle-runner.is-catching .runner-shadow,
.idle-runner.is-pulling .runner-shadow,
.idle-runner.is-mantling .runner-shadow,
.idle-runner.is-bracing .runner-shadow,
.idle-runner.is-interrupted .runner-shadow,
.idle-runner.is-exiting .runner-shadow {
  opacity: 0;
  transform: scaleX(0.32);
}

@keyframes standing-breath {
  from { transform: translateY(0); }
  to { transform: translateY(-0.7px); }
}

@keyframes look-ahead {
  from { transform: rotate(0deg) translateX(0); }
  to { transform: rotate(6deg) translateX(1px); }
}

@keyframes walk-bob {
  from { transform: translateY(0) rotate(-0.8deg); }
  to { transform: translateY(-1.2px) rotate(0.8deg); }
}
@keyframes walk-arm-left { from { transform: rotate(-24deg); } to { transform: rotate(32deg); } }
@keyframes walk-arm-right { from { transform: rotate(30deg); } to { transform: rotate(-26deg); } }
@keyframes walk-elbow-left { from { transform: rotate(14deg); } to { transform: rotate(-10deg); } }
@keyframes walk-elbow-right { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }
@keyframes walk-hip-left { from { transform: rotate(20deg); } to { transform: rotate(-18deg); } }
@keyframes walk-hip-right { from { transform: rotate(-18deg); } to { transform: rotate(20deg); } }
@keyframes walk-knee-left { from { transform: rotate(-10deg); } to { transform: rotate(32deg); } }
@keyframes walk-knee-right { from { transform: rotate(30deg); } to { transform: rotate(-12deg); } }

@keyframes run-bob {
  from { transform: translateY(0) rotate(4deg); }
  to { transform: translateY(-2px) rotate(7deg); }
}
@keyframes run-arm-left { from { transform: rotate(-42deg); } to { transform: rotate(50deg); } }
@keyframes run-arm-right { from { transform: rotate(48deg); } to { transform: rotate(-44deg); } }
@keyframes run-hip-left { from { transform: rotate(42deg); } to { transform: rotate(-36deg); } }
@keyframes run-hip-right { from { transform: rotate(-38deg); } to { transform: rotate(44deg); } }
@keyframes run-knee-left { from { transform: rotate(-16deg); } to { transform: rotate(58deg); } }
@keyframes run-knee-right { from { transform: rotate(54deg); } to { transform: rotate(-18deg); } }

@keyframes balance-body {
  from { transform: translateX(-1px) rotate(-1.4deg); }
  to { transform: translateX(1px) rotate(1.4deg); }
}

@keyframes airborne-body {
  from { transform: rotate(-3deg) translateY(0); }
  to { transform: rotate(4deg) translateY(-2px); }
}

@keyframes vault-body {
  from { transform: rotate(-8deg) translateY(0); }
  to { transform: rotate(10deg) translateY(-2px); }
}

@keyframes falling-body {
  from { transform: rotate(-5deg); }
  to { transform: rotate(6deg); }
}

@keyframes hanging-weight {
  from { transform: translateY(0) rotate(-1.1deg); }
  to { transform: translateY(2px) rotate(1.1deg); }
}

@keyframes body-swing {
  from { transform: rotate(-8deg); }
  to { transform: rotate(9deg); }
}

@keyframes catch-recoil {
  0% { transform: translateY(9px) scaleY(1.05); }
  55% { transform: translateY(-3px) scaleY(0.95); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes head-catch {
  0% { transform: translateY(2px) rotate(-4deg); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes mantle-strain {
  from { transform: translateY(2px) rotate(-1.5deg); }
  to { transform: translateY(-3px) rotate(1.5deg); }
}

@keyframes runner-land {
  0% { transform: translateY(-2px); }
  48% { transform: translateY(5px) scaleY(0.94); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes shadow-land {
  0% { transform: scaleX(0.48); opacity: 0.07; }
  48% { transform: scaleX(1.18); opacity: 0.24; }
  100% { transform: scaleX(0.7); opacity: 0.15; }
}

@keyframes interrupted-recoil {
  0% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(4px) rotate(5deg); }
  100% { transform: translateY(1px) rotate(2deg); }
}

@media (max-width: 760px) {
  .idle-runner {
    width: 42px;
    height: 68px;
  }

  .runner-figure {
    width: 42px;
    height: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .idle-runner {
    display: none !important;
  }

  .signal-sky,
  .signal-ui {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) !important;
  }

  .signal.is-open .signal-sky::before {
    display: none;
  }
}