/* ==========================================================================
   wf-cases: the AI LAB cases index, a 1:1 port of webfluencer.nl/works on a white ground.
   Every size, easing and duration is the original value (measured 2026-09-09); the
   reference's #181818 page is white here by request, the cards themselves stay dark.
   Loads together with wf-journal.css (title words, CTA panel, shared tokens).
   Source of truth: products/_wf-nav/wf-cases.css (copied to noveq/css/ by inject-cases.py).
   ========================================================================== */

.wfc{--j-e:cubic-bezier(.16,1,.3,1);--j-k:cubic-bezier(.6,.01,.05,.95);
  --j-gutter:clamp(16px,2.5vw,20px);--j-ink:#181818;--j-bg:#FFFFFF;--j-dark:#050B1C;--j-cream:#fbf8f1;
  --j-sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --j-serif:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;   /* the site's own face, per the owner (no serif) */
  position:relative;background:var(--j-bg);color:var(--j-ink);font-family:var(--j-sans);padding-top:90px;-webkit-font-smoothing:antialiased}
.wfc *{box-sizing:border-box}
/* the site paints main#main with its own --bg; the id wins over a class, so restate it */
main#main.wfc,body.page-light main#main.wfc{background:var(--j-bg)}
.wfc a{text-decoration:none;color:inherit}
.wfc h1,.wfc h2,.wfc h3,.wfc p{margin:0}

/* the page body is sticky under the CTA + footer: they slide over it and it eases back */
.wfc-sticky{position:sticky;top:min(0px,calc(100vh - var(--wfc-h,0px)));z-index:0;background:var(--j-bg)}
.wfc-scale{will-change:transform;transform-origin:50% 100%}
.wfc-after{position:relative;z-index:1;background:var(--j-bg)}

/* ---------- head ---------------------------------------------------------- */
.wfc-sec{background:var(--j-bg);padding:clamp(56px,7vw,120px) 0 clamp(90px,10vw,170px)}
.wfc-in{max-width:1900px;margin:0 auto;padding:0 var(--j-gutter)}
.wfc-eyebrow{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:clamp(18px,2vw,36px);
  opacity:0;transform:translateY(12px);transition:opacity .9s var(--j-e) .2s,transform .9s var(--j-e) .2s}
.is-ready .wfc-eyebrow{opacity:1;transform:none}
.wfc-eyebrow span:first-child{font-weight:600;text-transform:uppercase;letter-spacing:.22em;font-size:clamp(10px,.78vw,12px);color:rgba(24,24,24,.62)}
.wfc-eyebrow span+span{font-variant-numeric:tabular-nums;letter-spacing:.16em;font-size:clamp(10px,.72vw,12px);color:rgba(24,24,24,.62)}
.wfc-h1{margin-top:24px;font-family:var(--j-serif);font-weight:600;line-height:1.06;letter-spacing:-.035em;max-width:1300px;font-size:clamp(34px,4vw,62px);color:var(--j-ink)}
.wfc-h1 .dim{color:rgba(24,24,24,.6)}
.wfc-h1 .blk{display:block}
.wfc-lead{margin-top:20px;line-height:1.65;max-width:560px;font-size:clamp(15px,1.2vw,18px);font-weight:400;color:rgba(24,24,24,.66);
  opacity:0;transform:translateY(12px);transition:opacity .9s var(--j-e) .45s,transform .9s var(--j-e) .45s}
.is-ready .wfc-lead{opacity:1;transform:none}

/* ---------- grid ---------------------------------------------------------- */
.wfc-grid{display:grid;grid-template-columns:1fr;gap:clamp(12px,1.4vw,24px);margin-top:clamp(48px,6vw,110px)}
@media (min-width:768px){.wfc-grid{grid-template-columns:1fr 1fr}}
.wfc-card{display:block}
.wfc-frame{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:20px;background:#0f1424}
@media (min-width:768px){.wfc-frame{border-radius:24px}}
/* reveal: a mask that starts above and a body that starts below meet in the middle (1.6s, .09s per card) */
.wfc-mask{position:absolute;inset:0;overflow:hidden;transform:translate3d(0,-101%,0);transition:transform 1.6s var(--j-e);transition-delay:var(--d,0s)}
.wfc-body{position:absolute;inset:0;transform:translate3d(0,92%,0) scale(1.06);transition:transform 1.6s var(--j-e);transition-delay:var(--d,0s)}
.wfc-cover{position:absolute;inset:0;transform:translate3d(0,101%,0);transition:transform 1.6s var(--j-e);transition-delay:var(--d,0s)}
.wfc-card.in .wfc-mask,.wfc-card.in .wfc-cover{transform:translate3d(0,0,0)}
.wfc-card.in .wfc-body{transform:translate3d(0,0,0) scale(1)}
.wfc-body img,.wfc-body video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform 1.2s var(--j-e)}
.wfc-body video{opacity:0;transition:opacity .6s ease,transform 1.2s var(--j-e)}
.wfc-body video.is-live{opacity:1}
.wfc-card:hover .wfc-body img,.wfc-card:hover .wfc-body video{transform:scale(1.045)}
.wfc-shade{position:absolute;inset:0;background:var(--wfc-shade,rgba(0,0,0,.25));transition:background-color .9s var(--j-e)}
.wfc-card:hover .wfc-shade{background:var(--wfc-shade-h,rgba(0,0,0,.15))}
.wfc-gtop{position:absolute;left:0;right:0;top:0;height:25%;background:linear-gradient(to bottom,var(--wfc-gtop,rgba(0,0,0,.5)),transparent);pointer-events:none}
.wfc-gbot{position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to top,var(--wfc-gbot,rgba(0,0,0,.85)),var(--wfc-gbot2,rgba(0,0,0,.45)),transparent);pointer-events:none}
.wfc-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:clamp(14px,1.3vw,26px) clamp(16px,1.6vw,32px) 0;pointer-events:none}
@media (min-width:768px){.wfc-top{gap:16px}}
.wfc-top>span:first-child{display:flex;align-items:center;gap:12px}
@media (min-width:768px){.wfc-top>span:first-child{gap:16px}}
.wfc-num,.wfc-year{font-weight:600;font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.22em;font-size:clamp(10px,.72vw,12px);color:rgba(251,248,241,.92)}
.wfc-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.95);color:#000;font-weight:600;letter-spacing:-.1px;font-size:clamp(10px,.78vw,13px);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.wfc-badge i{position:relative;display:flex;width:6px;height:6px}
.wfc-badge i::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.4);animation:wfc-ping 1s cubic-bezier(0,0,.2,1) infinite}
.wfc-badge i::after{content:"";position:relative;width:6px;height:6px;border-radius:50%;background:#000}
@keyframes wfc-ping{75%,100%{transform:scale(2);opacity:0}}
/* the centred wordmark: 38% wide, max 200px, up to 80px tall, white; lifts 12px on hover */
.wfc-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.wfc-logo span{display:flex;align-items:center;justify-content:center;width:38%;max-width:200px;max-height:64px;color:#fff;font-weight:600;letter-spacing:-.04em;line-height:1;white-space:nowrap;
  font-size:clamp(26px,3vw,44px);transform:scale(var(--ls,1));transition:transform 1.1s var(--j-e)}
@media (min-width:768px){.wfc-logo span{max-height:80px}}
.wfc-card:hover .wfc-logo span{transform:scale(var(--ls,1)) translateY(-12px)}
/* a real brand mark: same box as the reference (38% wide, max 200px, 64/80px tall), centred, white or
   inverted to white; the text wordmark is only the fallback for a brand without a usable file */
.wfc-logo img{display:block;width:38%;max-width:200px;height:auto;max-height:64px;object-fit:contain;object-position:center;
  transform:scale(var(--ls,1));transition:transform 1.1s var(--j-e);filter:drop-shadow(0 2px 14px rgba(0,0,0,.28))}
@media (min-width:768px){.wfc-logo img{max-height:80px}}
.wfc-logo img.inv{filter:brightness(0) invert(1) drop-shadow(0 2px 14px rgba(0,0,0,.28))}
.wfc-card:hover .wfc-logo img{transform:scale(var(--ls,1)) translateY(-12px)}
/* a case without a public website is a card, not a link: same look, no arrow, no pointer */
div.wfc-card{cursor:default}
div.wfc-card .wfc-arr{display:none}
.wfc-bot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 clamp(16px,1.6vw,32px) clamp(16px,1.6vw,32px)}
.wfc-tags{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(6px,.6vw,10px)}
.wfc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wfc-tag{display:inline-flex;align-items:center;padding:8px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  color:#fff;font-weight:500;letter-spacing:-.02em;line-height:1;font-size:clamp(11px,.68vw,12px);transition:border-color .5s}
@media (min-width:768px){.wfc-tag{padding-top:10px;padding-bottom:10px}}
.wfc-card:hover .wfc-tag{border-color:rgba(255,255,255,.35)}
.wfc-arr{display:none;flex:none;width:48px;height:48px;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(255,255,255,.25);color:#fff;transition:background-color .5s,border-color .5s,color .5s}
@media (min-width:768px){.wfc-arr{display:flex}}
.wfc-arr svg{width:16px;height:16px;display:block}
.wfc-card:hover .wfc-arr{background:#fff;border-color:#fff;color:#000}

/* ---------- a11y + motion ------------------------------------------------- */
.wfc-card:focus-visible{outline:2px solid var(--j-ink);outline-offset:4px;border-radius:24px}
@media (prefers-reduced-motion:reduce){
  .wfc-eyebrow,.wfc-lead,.wfc-mask,.wfc-body,.wfc-cover,.wfc-logo span,.wfc-logo img,.wfc-body img,.wfc-body video{transition:none}
  .wfc-eyebrow,.wfc-lead{opacity:1;transform:none}
  .wfc-mask,.wfc-cover{transform:none}.wfc-body{transform:none}
  .wfc-badge i::before{animation:none}
  .wfc-body video{display:none}
  .wfc-sticky{position:relative;top:auto}
}

/* The intro is revealed by an .is-ready class that only JavaScript adds. With no scripting it
   stayed at opacity 0 and the page opened with its eyebrow and lead invisible. Show the
   settled state; the animated path is untouched. */
@media (scripting: none){.wfc-eyebrow,.wfc-lead,.wfc-h1,.wfc-card{opacity:1;transform:none}}

/* world 1: the head in the studio's own voice. Webfluencer sets this in a 300 serif; a 600 sans at the
   same size reads as a slab. The studio's hero is 400 at -.04em, so the head follows it: first line ink,
   second line the studio grey, the lead 18/1.6 in the same grey with the reference's 24 and 20px rhythm
   (a later reset had taken both margins to 0). */
body:has(.wfn[data-wfn-world="world1"]) .wfc-h1{margin-top:24px;font-weight:400;letter-spacing:-.04em;line-height:1.04;font-size:clamp(38px,4.6vw,72px);color:#242424}
body:has(.wfn[data-wfn-world="world1"]) .wfc-h1 .dim{color:#616161}
body:has(.wfn[data-wfn-world="world1"]) .wfc-lead{margin-top:22px;max-width:600px;font-size:clamp(16px,1.25vw,19px);line-height:1.6;letter-spacing:-.01em;color:#616161}
body:has(.wfn[data-wfn-world="world1"]) .wfc-eyebrow span:first-child,body:has(.wfn[data-wfn-world="world1"]) .wfc-eyebrow span+span{color:#616161}
body:has(.wfn[data-wfn-world="world1"]) .wfc-grid{margin-top:clamp(56px,6vw,96px)}
@media (max-width:767px){body:has(.wfn[data-wfn-world="world1"]) .wfc-h1{margin-top:16px;font-size:clamp(34px,9.5vw,44px)}body:has(.wfn[data-wfn-world="world1"]) .wfc-lead{margin-top:16px;font-size:16px}}

/* No scripting, the inner layers too: the mask and cover would otherwise stay parked above and
   below the frame and every card would open as an empty dark block. */
@media (scripting: none){.wfc-mask,.wfc-cover{transform:none}.wfc-body{transform:none}.wfc-sticky{position:relative;top:auto}}