/* Featured folders — five coloured glass folders (2026-10-02).
   Layers per slot, outside → in. Each layer owns different transforms so no
   two animations ever fight over one property:
     .ff-slot   stable layout box + the hit area (never transformed)
     .ff-shift  neighbours making room / shrinking while another is open
     .ff-drag   entrance drop + drag-throw
     .ff-idle   the endless float
     .ff-lean   magnetic tilt toward the pointer (+ landing squash)
     .ff-folder the open timeline: shrink, pocket hinge, cards fan
   One colour per folder: a solid back and a frosted front of the same
   tone. The front frosts a blurred copy of the cards sitting behind it. */

.ff-root{--fw:clamp(132px,11.8vw,206px);--fh:calc(var(--fw) * 1.22);--front-h:.62;
  position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(40px,7.2vw,124px);   /* ~3× the old spacing */
  padding:calc(var(--fh) * 1.05) 0 calc(var(--fh) * .22)}
.ff-row{display:contents}
.ff-slot{position:relative;width:var(--fw);height:var(--fh);flex:none}
.ff-slot.is-open{z-index:6}
.ff-shift,.ff-drag,.ff-idle,.ff-lean,.ff-folder{position:absolute;inset:0}
.ff-folder{transform-origin:50% 100%;transform-style:flat}  /* flat: back < cards < pocket always paint in DOM order */

/* Hit area: stable, on top, invisible. Grows upward while open so the
   raised cards stay inside it (growth never causes a flicker loop). */
.ff-hit{position:absolute;inset:-8% -6% -6%;z-index:20;margin:0;padding:0;border:0;background:transparent;cursor:none;
  -webkit-tap-highlight-color:transparent;border-radius:24px}
.ff-slot.is-open .ff-hit{inset:-118% -42% -6%}
.ff-hit:focus-visible{outline:2px solid var(--sky,#0EA5E9);outline-offset:6px}
@media (hover:none){.ff-hit{cursor:pointer}}

/* Bloom + floor shadow (outside the transformed stack). */
.ff-bloom{position:absolute;left:50%;top:40%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--pocket) 0%,transparent 72%);filter:blur(28px);opacity:.16;z-index:-1}
.ff-shadow{position:absolute;left:8%;right:8%;bottom:-8%;height:14%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(14,14,15,.28),transparent);filter:blur(6px);z-index:-1}

/* Back panel + tab. */
.ff-back{position:absolute;inset:24% 0 0 0;border-radius:18px;background:color-mix(in srgb,var(--pocket) 88%,#000);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -24px 40px rgba(0,0,0,.12),0 18px 40px -18px rgba(14,14,15,.4)}

/* Cards. .ff-card is moved by the open timeline; .ff-peek by breathe +
   shuffle. The refract copy uses the exact same structure. */
.ff-cards,.ff-refract-cards{position:absolute;inset:0;pointer-events:none}
.ff-cards{z-index:2}
.ff-card{position:absolute;left:12.5%;width:75%;bottom:7%;aspect-ratio:4/5;transform-origin:50% 100%}
.ff-peek{position:absolute;inset:0;border-radius:10px;overflow:hidden;background:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 10px 24px -10px rgba(14,14,15,.45)}
.ff-peek img,.ff-peek video{width:100%;height:100%;object-fit:cover;display:block}
.ff-card-bloom{position:absolute;inset:-18%;border-radius:30px;background:radial-gradient(closest-side,rgba(255,255,255,.9),transparent 70%);
  opacity:0;filter:blur(14px);z-index:-1}

/* The pocket — living glass. Hinged at its bottom edge. */
/* Front + tab are ONE shape: the outline (rounded corners, wedge tab)
   is a clip-path path built in JS from the folder's size — no seams. */
.ff-front{position:absolute;z-index:5;left:-3%;right:-3%;bottom:0;height:calc(var(--front-h) * 100%);overflow:hidden;
  transform-origin:50% 100%;color:var(--ink);isolation:isolate;
  box-shadow:0 22px 40px -18px rgba(14,14,15,.55),0 2px 0 rgba(0,0,0,.08)}
/* A copy of the cards, aligned to the folder, warped by the SVG filter. */
.ff-refract{position:absolute;left:2.83%;right:2.83%;bottom:0;height:var(--fh);pointer-events:none}
.ff-refract-cards{filter:blur(9px) saturate(1.2)}
.ff-tint{position:absolute;inset:0;background:var(--pocket);opacity:var(--glass)}
.ff-label{position:absolute;left:12%;right:10%;bottom:11%;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.ff-name{font:600 clamp(15px,1.35vw,19px)/1.08 var(--font-display,system-ui,sans-serif);letter-spacing:-.01em;margin:0;text-wrap:balance}
.ff-line{font:400 clamp(10.5px,.82vw,12px)/1.35 var(--font-body,system-ui,sans-serif);opacity:.78;margin:0;text-wrap:pretty}
.ff-meta{display:flex;gap:8px;align-items:center;font:500 9.5px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-top:2px}
.ff-meta i{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
.ff-lines{position:absolute;left:10%;right:10%;bottom:6%;height:5px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;opacity:.16;pointer-events:none}

/* Pinned: an explicit "Open project" pill, so double-click is never the
   only way in. */
.ff-open{position:absolute;left:50%;bottom:calc(-6% - 46px);translate:-50% 0;z-index:21;display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:99px;text-decoration:none;white-space:nowrap;
  font:500 10.5px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:#0E0E0F;
  box-shadow:0 10px 24px -10px rgba(14,14,15,.5);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.ff-slot.is-pinned .ff-open{opacity:1;pointer-events:auto}
.ff-open:hover{background:var(--pocket)}
.ff-open:focus-visible{outline:2px solid var(--sky,#0EA5E9);outline-offset:3px}

/* Cursor pill. */
.ff-cursor{position:fixed;left:0;top:0;z-index:80;pointer-events:none;padding:9px 14px;border-radius:99px;
  font:500 10.5px/1 var(--font-mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  color:#fff;background:color-mix(in srgb,var(--c,#0E0E0F) 78%,transparent);-webkit-backdrop-filter:blur(10px) saturate(1.6);backdrop-filter:blur(10px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 22px -8px rgba(14,14,15,.45);opacity:0;scale:.6;translate:-50% -50%}
@media (hover:none){.ff-cursor{display:none}}

/* The colour wipe into a project. */
.ff-wipe{position:fixed;inset:0;z-index:90;pointer-events:none;background:var(--c);clip-path:circle(0 at var(--x) var(--y))}

.ff-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Mobile: a swipe carousel with snap; the centred folder opens itself. */
@media (max-width:767px){
  .ff-root{--fw:min(52vw,220px);justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    padding:calc(var(--fh) * 1.05) calc(50vw - var(--fw) / 2) calc(var(--fh) * .5);gap:72px}
  .ff-root::-webkit-scrollbar{display:none}
  .ff-slot{scroll-snap-align:center}
  .ff-slot.is-open .ff-hit{inset:-100% -10% -6%}
}
@media (prefers-reduced-motion:reduce){
    .ff-refract-cards{filter:blur(2px) saturate(1.3)}
}