.folder {
  --folder-back-1: #f7c14b;
  --folder-back-2: #e9a52f;
  --folder-front-1: #ffd970;
  --folder-front-2: #fbc548;
  --folder-edge: #d68f23;
  --paper: #fdfdfb;
  --paper-2: #f1f0ea;
  --ink: #2a2520;
  --ink-soft: #7c736a;
  --ring: #1d6cf5;
  --radius: 0.875em;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  position: relative;
  display: inline-block;
  width: 16em;
  font-size: 16px;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}

.folder__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.folder__shape {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  transition: transform 0.45s var(--ease);
}

.folder__back {
  position: absolute;
  inset: 14% 0 0 0;
  background: linear-gradient(
    135deg,
    var(--folder-back-1),
    var(--folder-back-2)
  );
  border-radius: 0.25em var(--radius) var(--radius) var(--radius);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.folder__back::before {
  content: "";
  position: absolute;
  top: -13%;
  left: 0;
  width: 46%;
  height: 16%;
  background: linear-gradient(
    135deg,
    var(--folder-back-1),
    var(--folder-back-2)
  );
  border-radius: 0.375em 0.375em 0 0;
  clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
}

.folder__papers {
  position: absolute;
  inset: 6% 8% 12% 8%;
  z-index: 2;
  display: block;
}

.paper {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 86%;
  height: 78%;
  translate: -50% 0;
  background: var(--paper);
  border-radius: 0.375em;
  box-shadow: 0 0.25em 0.875em rgba(60, 40, 10, 0.12);
  transition:
    transform 0.45s var(--ease),
    bottom 0.45s var(--ease);
  overflow: hidden;
}

.paper::before,
.paper::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 24%;
  height: 6%;
  border-radius: 0.2em;
  background: var(--paper-2);
}
.paper::before {
  top: 22%;
}
.paper::after {
  top: 40%;
  right: 40%;
}

.paper--1 {
  width: 78%;
  height: 70%;
  background: #f6f4ee;
}
.paper--2 {
  width: 82%;
  height: 74%;
  background: #fbfaf6;
}
.paper--3 {
  width: 86%;
}

.folder__front {
  position: absolute;
  inset: 38% 0 0 0;
  z-index: 3;
  background: linear-gradient(
    150deg,
    var(--folder-front-1),
    var(--folder-front-2)
  );
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 -1px 0 var(--folder-edge),
    0 0.875em 1.375em -0.75em rgba(120, 80, 10, 0.35);
  transform-origin: bottom center;
  transition: transform 0.45s var(--ease);
}

.folder__front::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.35) 0%,
    transparent 45%
  );
  pointer-events: none;
}

.folder__meta {
  display: block;
  margin-top: 1.1em;
  text-align: center;
}
.folder__title {
  display: block;
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: -0.01em;
}
.folder__count {
  display: block;
  margin-top: 0.15em;
  font-size: 0.85em;
  color: var(--ink-soft);
}

@media (hover: hover) {
  .folder:hover .folder__shape {
    transform: translateY(-0.375em);
  }
  .folder:hover .folder__front {
    transform: rotateX(-32deg);
  }
  .folder:hover .paper {
    transform: translateY(-26%);
  }
  .folder:hover .paper--1 {
    transform: translate(-26%, -18%) rotate(-7deg);
  }
  .folder:hover .paper--2 {
    transform: translate(22%, -22%) rotate(6deg);
  }
}

.folder:active .folder__shape {
  transform: translateY(-0.125em) scale(0.99);
}

.folder__toggle:checked ~ .folder__shape {
  transform: translateY(-0.375em);
}
.folder__toggle:checked ~ .folder__shape .folder__front {
  transform: rotateX(-32deg);
}
.folder__toggle:checked ~ .folder__shape .paper {
  transform: translateY(-26%);
}
.folder__toggle:checked ~ .folder__shape .paper--1 {
  transform: translate(-26%, -18%) rotate(-7deg);
}
.folder__toggle:checked ~ .folder__shape .paper--2 {
  transform: translate(22%, -22%) rotate(6deg);
}

.folder__toggle:focus-visible ~ .folder__shape .folder__back {
  outline: 3px solid var(--ring);
  outline-offset: 4px;
  border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  .folder__shape,
  .folder__front,
  .paper {
    transition: none;
  }
}