//----------
- let objects = ["trunk", "lower", "middle", "higher"];
- let giftCount = 2;
- let cellCount = 36;
- for (let i = 0; i < cellCount; i++)
  - for (let j = 0; j < cellCount; j++)
    .cell(class="row-" + i + " col-" + j)
.container
  - for (let i = 0; i < objects.length; i++)
    .object(class=objects[i])
      .top
      .bottom
      .left
      .right
  - for (let i = 1; i <= giftCount; i++)
    .object.gift(class="gift-" + i)
      .x1
      .x2
      .y1
      .y2
      .z1

//----------VARIABLE DECLARATION----------//

.container {
  --size: 30vmin;
  --extra-size: 1px;
  --z-loc: -20vmin;
}

.object.trunk {
  --background-color: #9C4f00;
  --width: 5vmin;
  --half-width: 2.5vmin;
  --height: 40.078049vmin;
  --rotate: 86.43061225deg;
  --rotate-minus: -86.43061225deg;
  --floating-point: 0vmin;
}

.object.lower {
  --background-color: #0e8c00;
  --width: 30vmin;
  --half-width: 15vmin;
  --height: 33.54101966249684vmin;
  --rotate: 63deg;
  --rotate-minus: -63deg;
  --floating-point: 10vmin;
}

.object.middle {
  --background-color: #1aad00;
  --width: 20vmin;
  --half-width: 10vmin;
  --height: 18.027756vmin;
  --rotate: 56.48285887deg;
  --rotate-minus: -56.48285887deg;
  --floating-point: 25vmin;
}

.object.higher {
  --background-color: #20ca01;
  --width: 10vmin;
  --half-width: 5vmin;
  --height: 7.071068vmin;
  --rotate: 45.73561104deg;
  --rotate-minus: -45.73561104deg;
  --floating-point: 35vmin;
}

.object.gift-1 {
  --background-color: #ff5C8b;
  --width: 5vmin;
  --height: 5vmin;
  --floating-point: 0;
  --x-position: 10vmin;
  --y-position: 20vmin;
  --ribbon: #ffd129;
  --rotate: -12deg;
}

.object.gift-2 {
  --background-color: #24baff;
  --width: 3.5vmin;
  --height: 3.5vmin;
  --floating-point: 0;
  --x-position: 16.5vmin;
  --y-position: 20vmin;
  --ribbon: #ffd129;
  --rotate: 15deg;
}

//----------STYLING AREA----------//

body {
  background-color: #dfeaf0;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.container {
  background-color: rgba(10, 10, 10, 0.8);
  width: var(--size);
  height: var(--size);
  margin: auto;
  display: flex;
  border-radius: 50%;
  perspective: calc(var(--size) * 5);
  transform-style: preserve-3d;
  transform: rotateX(80deg) rotateZ(60deg) translateZ(var(--z-loc));
  
}

.x1 {
  --origin: left;
  --transform: rotateY(-90deg);
}

.x2 {
  --origin: right;
  --transform: rotateY(90deg);
}

.y1 {
  --origin: top;
  --transform: rotateX(90deg);
}

.y2 {
  --origin: bottom;
  --transform: rotateX(-90deg);
}

.z1 {
  --origin: center;
  --transform: translateZ(var(--height));
}

//----------COMMON AREA----------//

.object {
  background-color: var(--background-color);
  width: var(--width);
  height: var(--width);
  position: absolute;
  top: calc(50% - var(--half-width));
  left: calc(50% - var(--half-width));
  transform-style: preserve-3d;
  transform: translateZ(var(--floating-point));
  transition: transform 100ms ease-in-out;
}

.top, .bottom, .left, .right, .x1, .x2, .y1, .y2, .z1 {
  position: absolute;
  transform-style: preserve-3d;
}

.top {
  border-top: solid var(--height) var(--background-color);
  border-bottom: none;
  border-left: solid calc(var(--half-width) + var(--extra-size)) transparent;
  border-right: solid calc(var(--half-width) + var(--extra-size)) transparent;
  top: 0;
  transform-origin: top;
  transform: rotateX(var(--rotate));
}

.bottom {
  border-top: none;
  border-bottom: solid var(--height) var(--background-color);
  border-left: solid calc(var(--half-width) + var(--extra-size)) transparent;
  border-right: solid calc(var(--half-width) + var(--extra-size)) transparent;
  bottom: 0;
  transform-origin: bottom;
  transform: rotateX(var(--rotate-minus));
}

.left {
  border-top: solid calc(var(--half-width) + var(--extra-size)) transparent;
  border-bottom: solid calc(var(--half-width) + var(--extra-size)) transparent;
  border-left: solid var(--height) var(--background-color);
  border-right: none;
  left: 0;
  transform-origin: left;
  transform: rotateY(var(--rotate-minus));
}

.right {
  border-top: solid calc(var(--half-width) + var(--extra-size)) transparent;
  border-bottom: solid calc(var(--half-width) + var(--extra-size)) transparent;
  border-left: none;
  border-right: solid var(--height) var(--background-color);
  right: 0;
  transform-origin: right;
  transform: rotateY(var(--rotate));
}

.gift {
  top: var(--x-position);
  left: var(--y-position);
  transform: rotate(var(--rotate)) translateZ(var(--floating-point));
}

.x1, .x2, .y1, .y2, .z1 {
  background-color: var(--background-color);
  width: 100%;
  height: 100%;
  transform-origin: var(--origin);
  transform: var(--transform);
}

.x1, .x2 {
  background-image:
    linear-gradient(to top, transparent 0% 40%, var(--ribbon) 40% 60%, transparent 60% 100%),
    linear-gradient(to left, transparent 0% 40%, var(--ribbon) 40% 60%, transparent 60% 100%);
}

.y1, .y2, .z1 {
  background-image:
    linear-gradient(to top, transparent 0% 40%, var(--ribbon) 40% 60%, transparent 60% 100%);
}

//----------CSS LOOPS/HOVERABLE----------//
//This is the only area that I actually used the Sass/SCSS functionality

$deg: 360;
$cells-count: 36;
$hover-deg-x: $deg / $cells-count;
$hover-deg-y: ($deg / 8) / $cells-count;
$cell-width: 100vw / $cells-count;
$cell-height: 100vh / $cells-count;

@for $i from 0 to $cells-count {
  @for $j from 0 to $cells-count {
    .cell.row-#{$i}.col-#{$j} {
      width: $cell-width;
      height: $cell-height;
      position: absolute;
      top: $cell-height * $i;
      left: $cell-width * $j;
      z-index: 2;
      &:hover ~ .container {
        transform: rotateX(#{(-$i * $hover-deg-y) + 80}deg) rotateZ(#{$j * $hover-deg-x}deg) translateZ(var(--z-loc));
      }
    }
  }
}