/* 从 Ehsan Designs 文件夹组件提取，局部作用于独立作品。 */
:root { --muted: #737373; --text: #282828; color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #fafafa; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
main { min-height: 100svh; display: grid; place-items: center; padding: 60px 16px; }
button { font: inherit; border: 0; background: none; cursor: pointer; }
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./inter-latin-wght-normal.woff2") format("woff2"); }
.folder-navigation { position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-start; width: min(480px, 100% - 28px); gap: 6px; margin: 36px auto 0px; }
.folder-button { position: relative; flex: 1 1 0px; display: flex; flex-direction: column; align-items: center; min-width: 0px; gap: 5px; padding: 0px 2px 6px; border-radius: 12px; color: var(--muted); font-size: 12px; line-height: 1.45; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.folder-button:is([data-preview], [aria-pressed="true"], :not([data-dismissed]):is(:hover, :focus-visible)) { z-index: 5; color: var(--text); }
.folder-visual { position: relative; display: block; width: 106px; max-width: 100%; height: 100px; isolation: isolate; transform-origin: 50% 80%; transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
.folder-button:is([data-preview], [aria-pressed="true"], :not([data-dismissed]):is(:hover, :focus-visible)) .folder-visual { transform: scale(1.003); }
.folder-button :is(.folder-back, .folder-front) { position: absolute; left: 0px; bottom: 0px; display: block; width: 106px; height: 84px; max-width: 100%; object-fit: contain; filter: drop-shadow(rgba(40, 40, 40, 0.07) 0px 7px 6px); transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s; }
.folder-back { z-index: 0; }
.folder-button :is(.folder-back, .folder-front) > img { position: absolute; left: 0; bottom: -16%; display: block; width: 100%; height: auto; }
/* The pocket starts at y=118 in the 448px site icon; cards slide between the two layers. */
.folder-front > img { clip-path: inset(26.4% 4% 12.8% round 6%); }
.folder-button .folder-front { z-index: 3; transform-origin: 50% 95%; }
.folder-items { position: absolute; inset: 0px; z-index: 1; pointer-events: none; }
.folder-button .folder-thumb { --offset: 0px; --lift: -18px; --angle: -2deg; position: absolute; bottom: 18px; left: 50%; display: block; width: 62px; height: 48px; max-width: none; border: 3px solid rgb(255, 255, 255); border-radius: 6px; object-fit: cover; background: rgb(255, 255, 255); box-shadow: rgba(40, 40, 40, 0.2) 0px 2px 5px; transform: translate(calc(-50% + var(--offset))) translateY(var(--lift)) rotate(var(--angle)); transition: transform 0.65s cubic-bezier(0.18, 0.9, 0.25, 1.2); }
.folder-button .folder-thumb:first-child { --offset: -22px; --lift: -9px; --angle: -14deg; }
.folder-button .folder-thumb:nth-child(2) { z-index: 2; transition-delay: 35ms; }
.folder-button .folder-thumb:nth-child(3) { --offset: 22px; --lift: -7px; --angle: 12deg; transition-delay: 70ms; }
.folder-button .folder-thumb:only-child { --offset: 0px; --lift: -18px; --angle: -4deg; }
.folder-button:is([data-preview], [aria-pressed="true"], :not([data-dismissed]):is(:hover, :focus-visible)) .folder-thumb { transform: translate(calc(-50% + var(--offset))) translateY(calc(var(--lift) - var(--side-rise, 26px))) rotate(var(--angle)); }
.folder-button:is([data-preview], [aria-pressed="true"], :not([data-dismissed]):is(:hover, :focus-visible)) .folder-thumb:nth-child(2) { transform: translate(-50%) translateY(var(--center-lift, -57px)) rotate(-2deg); }
.folder-button[data-section="products"] .folder-thumb { width: 50px; height: 50px; border-radius: 50%; object-fit: contain; padding: 4px; }
.folder-button[data-section="about"] .folder-thumb { width: 40px; height: 58px; }
.folder-caption { font-weight: 600; white-space: nowrap; }
.folder-navigation { margin: 0; width: 480px; max-width: 100%; zoom: 2; }
.folder-button:focus-visible { outline: 1px solid #a3a3a3; outline-offset: 6px; }
@media (max-width: 1040px) { .folder-navigation { zoom: 1.65; } }
@media (max-width: 840px) { .folder-navigation { zoom: 1.3; } }
@media (max-width: 660px) { .folder-navigation { zoom: 1; } }
@media (max-width: 520px) {
  main { padding: 48px 12px; }
  .folder-navigation { width: 100%; gap: 2px; --side-rise: 17px; --center-lift: -43px; }
  .folder-button { font-size: 11px; padding-inline: 0; }
  .folder-visual { width: 76px; height: 83px; }
  .folder-button :is(.folder-back, .folder-front) { width: 76px; height: 60px; }
  .folder-button .folder-thumb { width: 43px; height: 35px; bottom: 12px; --lift: -16px; }
  .folder-button .folder-thumb:first-child { --offset: -14px; --lift: -9px; }
  .folder-button .folder-thumb:nth-child(3) { --offset: 14px; --lift: -7px; }
  .folder-button[data-section="products"] .folder-thumb { width: 34px; height: 34px; padding: 3px; }
  .folder-button[data-section="about"] .folder-thumb { width: 28px; height: 41px; }
}
@media (max-width: 360px) { .folder-button { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .folder-button * { transition: none !important; } }