/* ==========================================================================
   FUGO CREATIVE — work case-study modal
   Loaded by /work only. Depends on the tokens and component classes in
   core.css (--green, .eyebrow, .tag, .steps, .stat, .btn, .tlink).

   z-index map it has to live inside:
     curtain 200 · peek 800 · menu 880 · nav 900 · prog 950
     >>> modal 960 · lightbox 970 <<<
     loader 9990 · cursor 9999
   ========================================================================== */

.wm{
  position:fixed; inset:0; z-index:960; display:grid; place-items:end center;
  padding:clamp(.5rem,2vw,2.2rem);
}
.wm[hidden]{display:none}
@media(min-width:861px){.wm{place-items:center}}

.wm__scrim{
  position:absolute; inset:0; background:rgba(4,5,7,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .45s var(--e-out);
}
.wm.is-open .wm__scrim{opacity:1}

.wm__panel{
  position:relative; width:min(1120px,100%); max-height:min(94svh,1000px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg-raise); border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--line),0 40px 120px rgba(0,0,0,.7);
  opacity:0; transform:translateY(28px) scale(.985);
  transition:opacity .5s var(--e-out),transform .6s var(--e-out);
}
.wm.is-open .wm__panel{opacity:1;transform:none}
@media(max-width:860px){
  .wm__panel{max-height:94svh;border-radius:var(--r-lg) var(--r-lg) 0 0}
}

.wm__close{
  position:absolute; top:clamp(.7rem,1.6vw,1.2rem); right:clamp(.7rem,1.6vw,1.2rem); z-index:3;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background:rgba(7,8,10,.62); color:var(--ink); font-size:1rem;
  box-shadow:inset 0 0 0 1px var(--line-soft);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .3s,color .3s,transform .45s var(--e-out);
}
.wm__close:hover{background:var(--green);color:#04150f;transform:rotate(90deg)}

.wm__scroll{
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.wm__scroll:focus{outline:none}
.wm__scroll::-webkit-scrollbar{width:10px}
.wm__scroll::-webkit-scrollbar-track{background:transparent}
.wm__scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:100px;border:3px solid var(--bg-raise)}
.wm__scroll::-webkit-scrollbar-thumb:hover{background:var(--ink-faint)}

/* ---- hero -------------------------------------------------------------- */
.wm__hero{position:relative}
.wm__art{aspect-ratio:16/7;position:relative;overflow:hidden;background:var(--bg)}
.wm__art>*{width:100%;height:100%;object-fit:cover}
.wm__hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(7,8,10,.12) 0%,rgba(13,15,19,.58) 55%,var(--bg-raise) 100%);
}
.wm__heroin{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(1.2rem,3vw,2.6rem) clamp(1.2rem,3.4vw,3rem);
}
.wm__title{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.7rem,4.4vw,3.4rem); letter-spacing:-.04em; line-height:.98;
  margin-top:.5rem;
}
.wm__lede{
  margin-top:.9rem; max-width:56ch; color:var(--ink-mute);
  font-size:clamp(.98rem,1.25vw,1.15rem);
}
@media(max-width:640px){.wm__art{aspect-ratio:4/3}}

/* ---- body -------------------------------------------------------------- */
.wm__in{padding:clamp(1.4rem,3.4vw,3rem)}

.wm__facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(1rem,2.4vw,2rem); align-items:start;
  padding-bottom:clamp(1.2rem,2.4vw,1.8rem); border-bottom:1px solid var(--line);
}
.wm__fact{margin-top:.45rem;font-size:.95rem}
.wm__logo{display:flex;align-items:center;justify-content:flex-end}
.wm__logo img{max-width:120px;max-height:44px;object-fit:contain;opacity:.75;filter:grayscale(1) brightness(1.7)}
@media(max-width:640px){.wm__logo{justify-content:flex-start}}

.wm__tags{margin-top:1.4rem}

.wm__sec{margin-top:clamp(2.2rem,4.6vw,3.6rem)}
.wm__sec .eyebrow{margin-bottom:1.2rem}
.wm__sec .steps .step:first-child{border-top:0;padding-top:0}
.wm__prose{display:grid;gap:1.1rem;max-width:66ch}
.wm__prose p{color:var(--ink-mute);font-size:clamp(.98rem,1.15vw,1.08rem)}
.wm__hint{margin:-.6rem 0 1.1rem;letter-spacing:.12em;text-transform:uppercase;font-size:10px}
.wm__stats{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:720px){.wm__stats{grid-template-columns:repeat(2,1fr)}}

/* ---- gallery ----------------------------------------------------------- */
.wm__gal{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.7rem,1.6vw,1.2rem)}
@media(max-width:640px){.wm__gal{grid-template-columns:1fr}}
.wm__tile{
  display:block; text-align:left; border-radius:var(--r); overflow:hidden;
  background:var(--bg-raise-2); box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .5s var(--e-out),box-shadow .4s;
}
.wm__tile.is-wide{grid-column:span 2}
@media(max-width:640px){.wm__tile.is-wide{grid-column:span 1}}
.wm__tile:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(61,220,151,.45)}
.wm__tilemedia{position:relative;display:block;aspect-ratio:16/9;overflow:hidden}
.wm__tilemedia>svg,.wm__tilemedia>img,.wm__tilemedia>video{
  width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e-out);
}
.wm__tile:hover .wm__tilemedia>svg,
.wm__tile:hover .wm__tilemedia>img,
.wm__tile:hover .wm__tilemedia>video{transform:scale(1.05)}
.wm__play{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:rgba(7,8,10,.6); color:var(--green); font-size:.9rem;
  box-shadow:inset 0 0 0 1px rgba(61,220,151,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.wm__tilecap{display:flex;flex-direction:column;gap:.3rem;padding:.9rem 1rem 1.1rem;font-size:.9rem}
.wm__tilecap .mono{letter-spacing:.13em;text-transform:uppercase;font-size:10px}

/* ---- documentation ----------------------------------------------------- */
.wm__docs{display:grid;gap:0;border-top:1px solid var(--line)}
.wm__doc{
  display:grid; grid-template-columns:1fr auto auto; gap:1rem; align-items:center;
  padding:1rem 0; border-bottom:1px solid var(--line); font-size:.95rem;
}
.wm__doc>a{
  display:grid; grid-template-columns:1fr auto auto; gap:1rem; align-items:center;
  grid-column:1/-1; transition:color .3s;
}
.wm__doc>a:hover{color:var(--green)}
.wm__docico{font-family:var(--f-mono);color:var(--green)}
.wm__onreq{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
  padding:.34rem .6rem; border-radius:100px; box-shadow:inset 0 0 0 1px var(--line);
}
@media(max-width:640px){
  .wm__doc,.wm__doc>a{grid-template-columns:1fr auto}
  .wm__onreq{grid-column:1/-1;justify-self:start}
}

/* ---- use cases --------------------------------------------------------- */
.wm__uses{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,2rem)}
@media(max-width:820px){.wm__uses{grid-template-columns:1fr}}
.wm__use{padding-top:1.1rem;border-top:1px solid var(--line)}
.wm__use h4{font-family:var(--f-display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;margin-bottom:.5rem}
.wm__use p{color:var(--ink-mute);font-size:.93rem}

/* ---- credits ----------------------------------------------------------- */
.wm__credits{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem clamp(1rem,2.4vw,2rem)}
@media(max-width:640px){.wm__credits{grid-template-columns:1fr}}
.wm__credits li{
  display:flex; flex-direction:column; gap:.25rem;
  padding-top:.8rem; border-top:1px solid var(--line); font-size:.93rem;
}
.wm__credits .mono{letter-spacing:.12em;text-transform:uppercase;font-size:10px}

/* ---- modal footer ------------------------------------------------------ */
.wm__foot{
  margin-top:clamp(2.2rem,4.6vw,3.4rem); padding-top:clamp(1.4rem,2.6vw,2rem);
  border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:1.2rem;
  align-items:center; justify-content:space-between;
}
.wm__nav{display:flex;flex-wrap:wrap;gap:1.6rem}
.wm__cta{display:flex;flex-wrap:wrap;gap:.7rem}

/* ---- the page behind an open modal ------------------------------------- */
body.wm-open .peek{opacity:0}
body.wm-open .curtain{z-index:1000}   /* a page transition still covers the modal */
html.wm-lock{overflow:hidden}          /* scroll lock fallback when Lenis is absent */

/* the work rows are buttons now, not links — keep the inherited type */
.wrow{width:100%;text-align:left;font:inherit;color:inherit;background:none;border:0}

/* ---- lightbox ---------------------------------------------------------- */
.wm-lb{
  position:fixed; inset:0; z-index:970; display:grid; place-items:center;
  padding:clamp(1rem,4vw,3rem); background:rgba(4,5,7,.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transition:opacity .35s var(--e-out);
}
.wm-lb[hidden]{display:none}
.wm-lb.is-open{opacity:1}
.wm-lb__fig{width:min(1300px,100%);max-height:100%;display:flex;flex-direction:column;gap:1rem}
.wm-lb__media{
  border-radius:var(--r); overflow:hidden; background:var(--bg-raise);
  box-shadow:inset 0 0 0 1px var(--line); max-height:78svh;
}
.wm-lb__media>*{width:100%;max-height:78svh;object-fit:contain;display:block}
.wm-lb__cap{color:var(--ink-mute);font-size:.92rem;text-align:center}
.wm-lb__close{
  position:absolute; top:clamp(1rem,2.4vw,2rem); right:clamp(1rem,2.4vw,2rem);
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:rgba(7,8,10,.6); box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:background .3s,color .3s,transform .45s var(--e-out);
}
.wm-lb__close:hover{background:var(--green);color:#04150f;transform:rotate(90deg)}

/* ---- reduced motion ---------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .wm__panel{transform:none!important}
  .wm__tile:hover{transform:none!important}
  .wm__tile:hover .wm__tilemedia>*{transform:none!important}
}