@import './skin/head.css';
@import './skin/body.css';
@import './skin/arm_left.css';
@import './skin/arm_right.css';
@import './skin/leg_left.css';
@import './skin/leg_right.css';

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color-scheme: dark;
}

:root {
  --scale: 15;
  --layer-offset: 0.3;
  --pitch: 0deg;
  --yaw: 0deg;
  --background-image: url('./default_skin.png');
}

@property --skin-head-pitch {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --skin-head-yaw {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --skin-arm-left {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --skin-arm-right {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --skin-leg-left {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@property --skin-leg-right {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
  perspective: 500px;
  background-color: #222;
  overflow: hidden;
}

.skin,
.skin-part-origin,
.skin-part,
.skin-part__plane {
  transform-origin: top left;
  transform-style: preserve-3d;
  pointer-events: none;
  user-select: none;
}

.skin {
  transform:
    rotateX(var(--pitch))
    rotateY(var(--yaw));
}

.skin-part {
  .skin-part__plane {
    position: absolute;
    display: grid;
    image-rendering: pixelated;
    background-size:
      calc(var(--scale) * 64px)
      calc(var(--scale) * 64px);
    background-image: var(--background-image);
    background-repeat: no-repeat;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-size: calc(var(--scale) * 64px) calc(var(--scale) * 64px);
      background-image: var(--background-image);
      background-repeat: no-repeat;
      transform-style: preserve-3d;
      pointer-events: none;
      user-select: none;
      transform:
        translateZ(calc(var(--scale) * var(--layer-offset) * 1px));
    }

    &.down::before {
      transform:
        translateZ(calc(var(--scale) * var(--layer-offset) * -1px));
    }
  }
}