/* Папка с вылетающими плашками над иконкой папки (центральной) в меню.
   Порт компонента FolderFloat (React Bits) на чистый CSS/JS — как и
   case-study-flip-stack рядом. Размеры уменьшены под иконку в навигации.

   Открытие висит на :hover самой ссылки, а не на папке: папка появляется
   уже раскрывающейся, отдельно наводиться на неё не нужно. Сама папка
   не ловит курсор (pointer-events: none) — иначе, наехав на неё, мы бы
   ушли с ссылки, и она схлопнулась бы под курсором. */

.navfolder-host {
  position: relative;
}

.navfolder {
  --nf-w: 104px;
  --nf-h: 72px;
  --nf-r: 9px;
  --nf-tab: 8px;
  --nf-back: #3f3f46;
  --nf-front: #52525b;
  --nf-paper: #f5f5f5;
  --nf-item: #f5f5f5;
  --nf-item-ink: #18181b;
  --nf-label: #f5f5f5;
  --nf-angle: 30deg;
  --nf-rest: 14deg;
  --nf-open: 460ms;
  --nf-close: 276ms;
  --nf-stagger: 40ms;
  --nf-spring: cubic-bezier(0.34, 1.57, 0.64, 1);
  --nf-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  position: absolute;
  /* панель меню поднимается на 19px выше самой иконки (паддинг + рамка),
     поэтому отступ считаем от неё, а не от иконки — иначе папка ляжет на панель */
  bottom: calc(100% + 30px);
  left: 50%;
  z-index: 5;
  width: var(--nf-w);
  margin-left: calc(var(--nf-w) / -2);
  padding-top: var(--nf-tab);
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 180ms ease,
    visibility 0s linear 180ms;
}

.navfolder-host:hover .navfolder,
.navfolder-host:focus-visible .navfolder {
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease;
}

/* --- сама папка ----------------------------------------------------------- */
.navfolder__folder {
  position: relative;
  display: block;
  width: var(--nf-w);
  height: var(--nf-h);
}

.navfolder__back {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--nf-r);
  background: var(--nf-back);
  transform: perspective(600px) rotateX(8deg);
  transform-origin: 50% 100%;
}

.navfolder__back::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--nf-tab));
  left: 0;
  width: 42%;
  height: calc(var(--nf-tab) + var(--nf-r));
  border-radius: var(--nf-r) var(--nf-r) 0 0;
  background: inherit;
}

.navfolder__paper {
  position: absolute;
  top: 10%;
  right: 8%;
  left: 8%;
  z-index: 1;
  height: 50%;
  border-radius: 4px;
  background: var(--nf-paper);
  opacity: 0;
  transform: translateY(6px);
  transition:
    transform var(--nf-close) var(--nf-ease-out),
    opacity var(--nf-close) ease;
}

.navfolder__front {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3px;
  height: 76%;
  padding: 8px 9px;
  box-sizing: border-box;
  border-radius: var(--nf-r);
  background: linear-gradient(180deg, color-mix(in srgb, var(--nf-front) 92%, #fff), var(--nf-front) 60%);
  color: var(--nf-label);
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.28);
  transform: perspective(600px) rotateX(calc(-1 * var(--nf-rest)));
  transform-origin: 50% 100%;
  transition: transform var(--nf-open) var(--nf-ease-out);
}

.navfolder__label {
  font-size: 10px;
  font-weight: 500;
}

.navfolder__sub {
  font-size: 8px;
  opacity: 0.55;
}

.navfolder-host:hover .navfolder__front {
  transform: perspective(600px) rotateX(calc(-1 * var(--nf-angle)));
}

.navfolder-host:hover .navfolder__paper {
  opacity: 1;
  transform: translateY(0);
  transition:
    transform var(--nf-open) var(--nf-ease-out),
    opacity 200ms ease;
}

/* --- плашки --------------------------------------------------------------- */
.navfolder__items {
  position: absolute;
  top: var(--nf-tab);
  left: 50%;
  z-index: 1;
  width: 0;
  height: 0;
}

.navfolder__item {
  position: absolute;
  top: 0;
  left: 50%;
  height: 22px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  border-radius: 11px;
  background: var(--nf-item);
  color: var(--nf-item-ink);
  font: inherit;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translate(-50%, 26px) scale(0.6);
  transform-origin: 50% 50%;
  /* закрытие идёт в обратном порядке — последняя плашка уезжает первой */
  transition:
    transform var(--nf-close) var(--nf-ease-out) calc((var(--nf-n) - 1 - var(--i)) * var(--nf-stagger) * 0.5),
    opacity 160ms ease calc((var(--nf-n) - 1 - var(--i)) * var(--nf-stagger) * 0.5 + var(--nf-close) * 0.45);
}

.navfolder-host:hover .navfolder__item {
  opacity: 1;
  transform: translate(calc(-50% + var(--x)), var(--y)) rotate(var(--r)) scale(1);
  transition:
    transform var(--nf-open) var(--nf-spring) calc(var(--i) * var(--nf-stagger)),
    opacity 160ms ease calc(var(--i) * var(--nf-stagger));
}

/* лёгкое покачивание вместо физики на matter-js */
.navfolder__drift {
  display: block;
  animation: navfolder-drift 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.7s);
  animation-play-state: paused;
}

.navfolder-host:hover .navfolder__drift {
  animation-play-state: running;
}

@keyframes navfolder-drift {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navfolder__front,
  .navfolder__paper,
  .navfolder__item {
    transition: opacity 200ms ease;
  }

  .navfolder-host:hover .navfolder__front {
    transform: perspective(600px) rotateX(calc(-1 * var(--nf-rest)));
  }

  .navfolder__paper {
    transform: none;
  }

  .navfolder-host:hover .navfolder__item {
    transition: opacity 200ms ease calc(var(--i) * var(--nf-stagger));
  }

  .navfolder__drift {
    animation: none;
  }
}

/* на тач-устройствах наведения нет — прячем совсем */
@media (hover: none) {
  .navfolder {
    display: none;
  }
}