/* enhance: work (owned by its section agent) */
/* Signature: giant type + moving clips woven together (tobiaslindb energy).
   All motion is transform/opacity. Everything scoped under .work-stage. */

/* the grid leans on fast scroll (velocity skew set from JS) */
.work-stage .work-grid{
  transform-origin:0% 50%;
  will-change:transform;
}

/* wrapper JS adds around each .clip so the tile can parallax + set-in
   without ever touching .clip's own transform (hover owns that). */
.work-stage .clip-wrap{
  display:inline-flex;
  vertical-align:middle;
  will-change:transform,opacity;
  backface-visibility:hidden;
}

/* let the frame own hover transforms cleanly (JS drives them) */
.work-stage .wproj .clip{
  will-change:transform;
}

/* dimming the projects you are NOT hovering: opacity only (cheap, GPU-safe).
   overrides the base .wproj transition so the dim eases in. */
.work-stage .wproj{
  transition:color .3s ease, opacity .5s cubic-bezier(.215,.61,.355,1);
}
.work-stage.is-hovering .wproj.is-dim{
  opacity:.26;
}

/* per-character set-in reveal hooks (SplitText writes .wchar; mask wraps clip). */
.work-stage .wchar{
  will-change:transform;
}

/* reduced motion / no-JS: nothing here forces anything hidden.
   All hidden initial states are applied in JS only when 'motion' is on,
   so with reduced motion the page renders fully visible via base CSS. */
@media (prefers-reduced-motion: reduce){
  .work-stage .work-grid,
  .work-stage .clip-wrap,
  .work-stage .wproj .clip,
  .work-stage .wchar{ will-change:auto; }
}