:root {
  --folder-color: #5227FF;
  --folder-back-color: #4722DD;
  --paper-1: #e6e6e6;
  --paper-2: #f2f2f2;
  --paper-3: #ffffff;
}

.folder-container {
  position: relative;
  width: 200px;
  height: 160px;
  margin: 0 auto;
  perspective: 800px;
}

.folder {
  transition: all 0.2s ease-in;
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: relative;
}

.folder:not(.open):hover {
  transform: translateY(-12px);
}

.folder:not(.open):hover .paper {
  transform: translate(-50%, 0%);
}

.folder:not(.open):hover .folder__front {
  transform: skew(15deg) scaleY(0.6);
}

.folder:not(.open):hover .right {
  transform: skew(-15deg) scaleY(0.6);
}

.folder.open {
  transform: translateY(-12px);
}

/* Dynamic Open State for Papers */
.folder.open .paper {
  /* Use CSS variables set by JS for the open position */
  transform: translate(var(--open-x, -50%), var(--open-y, -90%)) rotateZ(var(--open-r, 0deg));
}

.folder.open .paper:hover {
  /* Scale up slightly on hover when open */
  /* Note: The JS mousemove event will override this transform, which is fine */
  z-index: 100 !important;
}

.folder.open .folder__front {
  transform: skew(15deg) scaleY(0.6);
}

.folder.open .right {
  transform: skew(-15deg) scaleY(0.6);
}

.folder__back {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--folder-back-color);
  border-radius: 0px 20px 20px 20px;
}

.folder__back::after {
  position: absolute;
  z-index: 0;
  bottom: 98%;
  left: 0;
  content: '';
  width: 60px;
  height: 20px;
  background: var(--folder-back-color);
  border-radius: 10px 10px 0 0;
}

.paper {
  position: absolute;
  z-index: 2;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, 10%);
  width: 70%;
  height: 80%;
  background: var(--paper-3);
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #666;
  overflow: hidden;
}

/* Slight variation for papers to look stacked when closed */
.paper:nth-child(2n) {
  background: var(--paper-2);
}

.paper:nth-child(3n) {
  background: var(--paper-1);
}

.folder__front {
  position: absolute;
  z-index: 50;
  /* Ensure front is above papers when closed */
  width: 100%;
  height: 100%;
  background: var(--folder-color);
  border-radius: 10px 20px 20px 20px;
  transform-origin: bottom;
  transition: all 0.3s ease-in-out;
}

.folder__front.right {
  z-index: 51;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.1) 100%);
  pointer-events: none;
}