/*
 * Folder shelf styles, adapted from "FolderFloat" in React Bits (https://reactbits.dev).
 * MIT + Commons Clause License Condition v1.0, Copyright (c) 2026 David Haz — full notice in folder-float.js.
 * Changes: several folders share one cloud above them, and every movement is stepped at 12fps like the rest of the site.
 */
.folder-shelf {
  --cloud:0px;
  --ff-w:156px;
  --ff-h:112px;
  --ff-r:13px;
  --ff-tab:13px;
  --ff-back:#2f3742;
  --ff-front:#46515f;
  --ff-paper:#f2efe9;
  --ff-item:#f5f3ef;
  --ff-ink:#18181b;
  --ff-label:#f5f5f5;
  --ff-open:520ms;
  --ff-close:312ms;
  --ff-stagger:45ms;
  position:relative;
  isolation:isolate;
  padding-top:var(--cloud);
  margin-top:6px;
  transition:padding-top 250ms steps(3,end)
}

.folder-shelf__row {
  display:flex;
  flex-wrap:wrap;
  gap:14px
}

.folder-float {
  position:relative;
  width:var(--ff-w);
  padding-top:var(--ff-tab);
  font-size:13px;
  font-weight:500;
  line-height:1.2
}

.folder-float__folder {
  position:relative;
  width:var(--ff-w);
  height:var(--ff-h)
}

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

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

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

.folder-float__front {
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:5px;
  height:76%;
  padding:12px 14px;
  border-radius:var(--ff-r);
  background:linear-gradient(180deg,color-mix(in srgb,var(--ff-front) 92%,#fff),var(--ff-front) 60%);
  color:var(--ff-label);
  box-shadow:0 -10px 24px rgb(0 0 0/.28);
  transform:perspective(600px) rotateX(-16deg);
  transform-origin:50% 100%;
  transition:transform var(--ff-open) steps(6,end)
}

.folder-float__label {
  font-size:14px;
  font-weight:600
}

.folder-float__sub {
  font-size:11px;
  opacity:.7
}

.folder-float__trigger {
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  z-index:3;
  height:76%;
  margin:0;
  padding:0;
  border:0;
  border-radius:var(--ff-r);
  background:transparent;
  cursor:pointer
}

.folder-float__trigger:focus-visible {
  outline:2px solid var(--accent-secondary);
  outline-offset:3px
}

.folder-float:hover .folder-float__front {
  transform:perspective(600px) rotateX(-22deg)
}

.folder-float[data-open] .folder-float__front {
  transform:perspective(600px) rotateX(-34deg)
}

.folder-float[data-open] .folder-float__paper {
  opacity:1;
  transform:translateY(0);
  transition:transform var(--ff-open) steps(6,end),opacity 200ms steps(2,end)
}

/* The cloud's origin is the top centre of the folder row; pills are placed from there. */
.folder-shelf__cloud {
  position:absolute;
  top:var(--cloud);
  left:50%;
  z-index:4;
  width:0;
  height:0;
  transition:top 250ms steps(3,end)
}

.folder-float__items {
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:0
}

.folder-float__item {
  position:absolute;
  top:0;
  left:0;
  display:flex;
  align-items:center;
  gap:6px;
  height:34px;
  margin:0;
  padding:0 14px;
  border:0;
  border-radius:17px;
  background:var(--ff-item);
  color:var(--ff-ink);
  font:inherit;
  font-size:13px;
  white-space:nowrap;
  text-decoration:none;
  box-shadow:0 4px 12px rgb(0 0 0/.24);
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-drag:none;
  opacity:0;
  pointer-events:none;
  transform:translate(calc(-50% + var(--x0,0px)),var(--y0,44px)) scale(.6)
}

.folder-float__items[data-closing] .folder-float__item {
  animation:folder-float-sink var(--ff-close) steps(4,end) calc((var(--n) - 1 - var(--i)) * var(--ff-stagger) * .5) both
}

/* Account logos as masks in the pill's text colour, so they also follow high-contrast colours. */
.folder-float__icon {
  flex:none;
  width:14px;
  height:14px;
  background:currentColor;
  forced-color-adjust:none;
  -webkit-mask:var(--icon) center/contain no-repeat;
  mask:var(--icon) center/contain no-repeat
}

.folder-float__item:hover,.folder-float__item:focus-visible {
  color:var(--ff-ink)
}

.folder-float__item:focus-visible {
  outline:2px solid var(--accent-secondary);
  outline-offset:2px
}

/* Each 12fps step of the rise: out of the folder, a little past the spot, then settle. */
.folder-float__items[data-open] .folder-float__item {
  opacity:1;
  pointer-events:auto;
  animation:folder-float-rise var(--ff-open) steps(6,end) calc(var(--i) * var(--ff-stagger)) both
}

.folder-float__items[data-live] .folder-float__item {
  animation:none;
  transform:translate(calc(-50% + var(--x)),var(--y)) rotate(var(--r));
  touch-action:none;
  cursor:grab
}

.folder-float__items[data-live] .folder-float__item[data-drag] {
  cursor:grabbing;
  scale:1.05
}

@keyframes folder-float-rise {
  0% { opacity:0; transform:translate(calc(-50% + var(--x0)),var(--y0,44px)) scale(.6) }
  30% { opacity:1 }
  70% { transform:translate(calc(-50% + var(--x)),calc(var(--y) - 7px)) rotate(var(--r)) scale(1.04) }
  100% { opacity:1; transform:translate(calc(-50% + var(--x)),var(--y)) rotate(var(--r)) scale(1) }
}

@keyframes folder-float-sink {
  0% { opacity:1; transform:translate(calc(-50% + var(--x,0px)),var(--y,0px)) rotate(var(--r,0deg)) scale(1) }
  60% { opacity:1 }
  100% { opacity:0; transform:translate(calc(-50% + var(--x0,0px)),var(--y0,44px)) scale(.6) }
}

@media(hover:hover) and (pointer:fine) {
  .folder-float__items[data-open] .folder-float__item:hover {
    scale:1.05
  }
}

@media(max-width:620px) {
  .folder-shelf {
    --ff-w:128px;
    --ff-h:94px
  }
  .folder-float__front {
    padding:10px 12px
  }
}

/* Narrow phones: two folders still share one row. */
@media(max-width:400px) {
  .folder-shelf__row {
    gap:10px
  }
  .folder-float {
    width:min(var(--ff-w),calc((100% - 10px) / 2))
  }
  .folder-float__folder {
    width:100%
  }
  .folder-float__front {
    padding:10px 9px
  }
}

@media(forced-colors:active) {
  .folder-float__back,.folder-float__front,.folder-float__paper {
    border:1px solid CanvasText
  }
  .folder-float__item {
    border:1px solid ButtonText
  }
  a.folder-float__item {
    border-color:LinkText
  }
  .folder-float__icon {
    background:ButtonText
  }
  a.folder-float__item .folder-float__icon {
    background:LinkText
  }
}

@media(prefers-reduced-motion:reduce) {
  .folder-float__front,.folder-float[data-open] .folder-float__front,.folder-float:hover .folder-float__front {
    transform:perspective(600px) rotateX(-16deg)
  }
  .folder-float__paper {
    transform:none
  }
  .folder-float__items[data-open] .folder-float__item {
    transform:translate(calc(-50% + var(--x)),var(--y)) rotate(var(--r))
  }
}