/* Dynasty Library — the Liner drawer.
   The four Cars of a train are one file, not four unrelated products, so they
   are presented the way a file is actually kept: a stack of folders in a drawer,
   tabs staggered so every Car is readable at once and the one you are looking at
   comes forward. Colour comes from the Library tokens in library.css. */

.drawer{
  position:relative;
  margin:8px 0 26px;
  perspective:1500px;
  perspective-origin:50% 22%;
}

/* The drawer front lip — the stack sits inside something. */
.drawer-lip{
  position:absolute;left:0;right:0;bottom:-1px;height:16px;
  border:1px solid var(--edge);border-top:0;border-radius:0 0 5px 5px;
  background:linear-gradient(180deg,var(--slate),var(--near));
  z-index:60;pointer-events:none;
}

.drawer-deck{
  position:relative;
  height:352px;
  transform-style:preserve-3d;
  /* Tab geometry for the number of Cars currently on the shelf. The tabs are
     laid across one row, so step and width are set together: the last tab's
     right edge lands at (tabs - 1) * step + width, which must stay under 100%.
     Five Cars: 4 * 19.6 + 18.6 = 97%. Change both when a Car is added. */
  --tab-step:19.6%;
  --tab-w:18.6%;
}

/* A FOLDER. `--d` is how far back it sits from the open one; the script keeps
   it current, and the inline values in the markup mean the stack still reads
   correctly with no script at all. */
.folder{
  position:absolute;left:0;right:0;top:34px;bottom:0;
  transform-style:preserve-3d;
  transform:
    translate3d(0, calc(var(--d) * -13px), calc(var(--d) * -78px))
    rotateX(calc(var(--d) * 1.15deg))
    scale(calc(1 - var(--d) * 0.012));
  transition:transform .42s cubic-bezier(.22,.7,.2,1), filter .42s ease;
  filter:brightness(calc(1 - var(--d) * 0.13));
  z-index:calc(40 - var(--d) * 10);
}
.folder.is-open{filter:none}

/* THE TAB — staggered across the drawer so every Car labels itself at once. */
.folder-tab{
  position:absolute;top:-32px;left:calc(var(--x) * var(--tab-step));
  width:var(--tab-w);min-width:104px;height:34px;
  display:flex;flex-direction:column;justify-content:center;gap:1px;
  padding:0 12px;text-align:left;cursor:pointer;
  border:1px solid var(--edge);border-bottom:0;border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,var(--slate),var(--near));
  color:var(--mute);
  font-family:'BarlowCondensed';
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.folder-tab:hover{color:var(--off);border-color:var(--bone)}
.folder.is-open .folder-tab{
  background:linear-gradient(180deg,#3a2c0c,var(--near));
  border-color:var(--amber-soft);color:var(--off);
  height:38px;top:-36px;
}
.ft-no{
  font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);line-height:1;
}
.folder.is-open .ft-no{color:var(--amber)}
.ft-name{
  font-weight:600;font-size:14px;letter-spacing:.03em;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* THE FACE — the manila. */
.folder-face{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:22px 26px 24px;
  border:1px solid var(--edge);border-radius:3px 5px 5px 5px;
  background:
    linear-gradient(180deg, rgba(245,158,11,.05), transparent 120px),
    linear-gradient(180deg, var(--near), #101010);
  box-shadow:0 -1px 0 var(--edge) inset, 0 18px 40px rgba(0,0,0,.55);
  color:var(--bone);
}
.folder.is-open .folder-face{border-color:#3d3d3d}
.folder-face:hover{border-color:var(--amber-soft)}

.ff-kicker{
  font-family:'BarlowCondensed';font-weight:700;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--amber);
}
.ff-title{
  font-family:'ArchivoBlack';font-size:clamp(26px,3.4vw,40px);line-height:1.04;
  color:var(--off);margin:8px 0 4px;
}
.ff-line{
  font-family:'Spectral';font-style:italic;font-size:17px;line-height:1.4;
  color:var(--amber-soft);margin-bottom:10px;
}
.ff-sub{
  font-family:'Spectral';font-size:16.5px;line-height:1.52;
  color:var(--bone);max-width:52em;
}
.ff-meta{
  margin-top:auto;padding-top:16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:0 9px;
  font-family:'BarlowCondensed';font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);
}
.ff-meta .dot{color:var(--slate)}
.ff-open{
  margin-top:14px;
  font-family:'BarlowCondensed';font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
}
.folder-face:hover .ff-open{color:var(--off)}

/* A folder behind the open one shows its title and one line; the rest of the
   face is covered by the folders in front of it anyway. */
.folder:not(.is-open) .ff-sub,
.folder:not(.is-open) .ff-meta,
.folder:not(.is-open) .ff-open{opacity:0;transition:opacity .2s ease}

.drawer-hint{
  font-family:'BarlowCondensed';font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);
  margin:26px 0 0;
}

@media (prefers-reduced-motion:reduce){
  .folder{transition:none}
}

/* FLAT DRAWER — under 760px the stack becomes a plain list of folders. Depth is
   a nicety; reading the four Cars is not. */
@media (max-width:760px){
  .drawer{perspective:none}
  .drawer-lip{display:none}
  .drawer-deck{height:auto;display:flex;flex-direction:column;gap:44px;padding-top:6px}
  .folder{
    position:relative;left:auto;right:auto;top:auto;bottom:auto;
    transform:none !important;filter:none !important;z-index:auto;
  }
  .folder-tab{position:relative;top:0;left:0;width:auto;height:auto;padding:8px 12px}
  .folder.is-open .folder-tab{top:0;height:auto}
  .folder-face{position:relative;inset:auto;border-radius:0 5px 5px 5px}
  .folder:not(.is-open) .ff-sub,
  .folder:not(.is-open) .ff-meta,
  .folder:not(.is-open) .ff-open{opacity:1}
  .ff-title{font-size:28px}
}