/* =====================================================================
   Work page — the four pillar folders
   Glass folder (front panel with a tab) over a darker back folder, three
   project frames tucked in between, lit from behind by a column of light in
   the pillar's colour. Per card: --c (pillar colour), --ct (small text on
   dark), --rgb (pillar colour as r,g,b). Folder outlines: assets/folders.js.
   ===================================================================== */
.fold-sec { background: transparent; }
.fold-grid { max-width: 80rem; margin: 0 auto; padding: 0 1rem; display: grid; grid-template-columns: 1fr; gap: 3rem 2.25rem; }
@media (min-width: 768px) { .fold-grid { grid-template-columns: 1fr 1fr; padding: 0 2rem; } }

.fold { --th: 44px; --rx: 0deg; --ry: 0deg; --pt: clamp(140px, 38vw, 210px); position: relative; display: block; padding-top: var(--pt); isolation: isolate;
  color: #fff; text-decoration: none; border-radius: 28px; outline: none; -webkit-tap-highlight-color: transparent; }
@media (min-width: 768px) { .fold { --pt: clamp(170px, 17vw, 230px); } }
.fold:focus-visible { outline: 2px solid var(--ct); outline-offset: 8px; }

/* ambient floor light under the folder */
.fold::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: -10%; height: 40%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--rgb), .22), rgba(var(--rgb), 0) 70%); filter: blur(10px);
  opacity: .7; transition: opacity .6s ease; }

/* the column of light behind the glass */
.fold-beam { position: absolute; z-index: 2; left: 33%; width: 34%; top: 0; bottom: 30%; pointer-events: none;
  transform-origin: 50% 100%; transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1); opacity: .9; }
.fold-beam::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--rgb), 0) 0%, rgba(var(--rgb), .28) 30%, rgba(var(--rgb), .7) 72%, rgba(var(--rgb), 1) 100%);
  -webkit-mask: linear-gradient(90deg, #000 0 3%, rgba(0,0,0,.5) 18% 82%, #000 97% 100%);
          mask: linear-gradient(90deg, #000 0 3%, rgba(0,0,0,.35) 18% 82%, #000 97% 100%);
  filter: blur(6px); }
.fold-beam::after { content: ''; position: absolute; left: -24%; right: -24%; bottom: -9%; height: 20%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(var(--rgb), .85) 38%, rgba(var(--rgb), 0) 100%); filter: blur(7px); }

/* back folder (tab on the right) */
.fold-back { position: absolute; z-index: 1; left: 3.5%; right: 3.5%; top: calc(var(--pt) * .36); bottom: 3%;
  background:
    linear-gradient(180deg, rgba(var(--rgb), .10), rgba(var(--rgb), 0) 45%),
    linear-gradient(180deg, #202126 0%, #121316 70%);
  clip-path: inset(0 round 24px); }

/* the frames tucked into the folder */
.fold-papers { position: absolute; z-index: 3; left: 12%; right: 12%; top: calc(var(--pt) * .52); height: var(--pt); pointer-events: none; }
.fold-papers img { position: absolute; top: 0; width: 40%; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 22px 40px -18px rgba(0, 0, 0, .9);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .6s ease; filter: saturate(.9) brightness(.9); }
.fold-papers img:nth-child(1) { left: 0;   transform: translateY(14%) rotate(-9deg); }
.fold-papers img:nth-child(2) { left: 30%; transform: translateY(0) rotate(1.5deg); z-index: 1; }
.fold-papers img:nth-child(3) { left: 60%; transform: translateY(16%) rotate(8deg); }

/* glass front (tab on the left) */
.fold-front { position: relative; z-index: 4; display: flex; flex-direction: column; min-height: 23rem;
  padding: 1.15rem 1.5rem 1.4rem; overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(var(--rgb), .10), rgba(var(--rgb), 0) 60%),
    linear-gradient(165deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04) 38%, rgba(16, 16, 20, .42) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  clip-path: inset(0 round 26px);
  transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)); transform-origin: 50% 100%;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.fold-rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fold-rim path { fill: none; stroke: rgba(255, 255, 255, .26); stroke-width: 2; transition: stroke .5s ease; }

.fold-top { display: flex; align-items: flex-start; justify-content: space-between; position: relative; }
.fold-num { font: 600 .68rem/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .9);
  display: inline-flex; align-items: center; gap: .55rem; padding-top: .35rem; text-shadow: 0 1px 10px rgba(0,0,0,.7); }
.fold-num::before { content: ''; width: .5rem; height: .5rem; border-radius: 2px; background: var(--c); box-shadow: 0 0 12px rgba(var(--rgb), .9); }
.fold-arrow { width: 1.6rem; height: 1.6rem; margin-top: calc(var(--th) + .35rem); color: rgba(255, 255, 255, .55); stroke-width: 1.4;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), color .4s ease; }

.fold-body { margin-top: auto; position: relative; }
.fold-title { display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: -.01em;
  font-size: clamp(1.55rem, 2.9vw, 2.55rem); line-height: 1.02; }
.fold-title b { display: block; font-weight: 700; font-size: 1.22em; letter-spacing: -.02em; }
.fold-sub { display: block; margin-top: .75rem; max-width: 34ch; color: rgba(255, 255, 255, .7); font-size: .9rem; line-height: 1.55; }

.fold-foot { position: relative; margin-top: 1.15rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.fold-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.fold-tags span { font: 500 .6rem/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72); padding: .42rem .55rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(10, 10, 12, .25); }
.fold-cta { flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: .62rem .75rem .62rem 1rem; border-radius: 999px;
  background: var(--c); color: #0A0A0A; font: 600 .74rem/1 'Inter', sans-serif; letter-spacing: .02em;
  box-shadow: 0 10px 30px -10px rgba(var(--rgb), .9); transition: gap .4s ease, box-shadow .4s ease; }
.fold-cta svg { width: .95rem; height: .95rem; stroke-width: 2.2; }
@media (max-width: 479px) {
  .fold-front { padding: 1rem 1.15rem 1.15rem; }
  .fold-tags span:nth-child(n+4) { display: none; }
  .fold-sub { font-size: .85rem; }
  .fold-front { min-height: 0; }
  .fold-foot { flex-wrap: wrap; }
}

/* hover / focus: more light, frames slide up out of the folder, arrow flips to "open" */
@media (hover: hover) {
  .fold:hover .fold-beam, .fold:focus-visible .fold-beam { opacity: 1; transform: scaleY(1.06); }
  .fold:hover::before { opacity: 1; }
  .fold:hover .fold-papers img:nth-child(1) { transform: translate(-10%, -16%) rotate(-14deg); filter: none; }
  .fold:hover .fold-papers img:nth-child(2) { transform: translateY(-30%) rotate(0deg); filter: none; }
  .fold:hover .fold-papers img:nth-child(3) { transform: translate(10%, -14%) rotate(13deg); filter: none; }
  .fold:hover .fold-rim path { stroke: rgba(var(--rgb), .75); }
  .fold:hover .fold-arrow { transform: rotate(180deg); color: var(--ct); }
  .fold:hover .fold-cta { gap: .75rem; box-shadow: 0 14px 40px -8px rgba(var(--rgb), 1); }
}

/* entrance (only when folders.js runs) */
.fold-js .fold { opacity: 0; transform: translateY(48px) scale(.97); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.fold-js .fold.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fold-js .fold, .fold * { transition: none !important; }
  .fold-js .fold { opacity: 1; transform: none; }
}